améliorer la réactivité de vos applications windows 8.1
DESCRIPTION
Présentation de Loïc Rebours, @LoicRebours, de Microsoft lors du meetup Windows Apps http://www.meetup.com/windowsapps/ du 24/03/2014 à l'IESA Multimédia, 5 avenue de l'OpéraTRANSCRIPT
Améliorez la réactivité de vos applications Windows 8.1
5 astuces qui vont tout changer !
Présentation
Loïc ReboursConsultant .NET - Avanade
MVP Client Development@loicrebours
www.blog.loicrebours.fr
Une application réactive pour une meilleure expérience utilisateur
Tip 1 Eviter les dangers d’async/await
Eviter les dangers d’async/await
UI threadAsync method AwaitAsync work Await
Await
UI threadAsync methodAsync work
Tip 1 - Démo
Tip 2 Charger les données de façon incrémentale
Charger les données de façon incrémentale
Inutile d’afficher des milliers d’éléments au chargement d’une pageIl faut charger les données quand l’utilisateur en a besoinLe chargement incrémental est moins consommateur de ressources
ISupportIncrementalLoading
public interface ISupportIncrementalLoading{ bool HasMoreItems { get; } IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count);}
Tip 2 - Démo
Tip 3 Créer des animations performantes
Créer des animations performantes
Pour le rendu XAML, il y a 2 threads importants Le thread UIParsing du XAMLLayout de la scèneRendering des éléments
Le thread CompositorCompose les animations des éléments visuels Instructions GPU / CPU
Créer des animations performantesIl existe deux types d’animationLes animations indépendantesPeuvent être calculées entièrement lors de leur créationGérées par le thread Compositor, utilisent la puissance du GPUScaling, rotation, translation …
Les animations dépendantesNe peuvent pas être calculées à l’avance.Utilisation intensive du thread UIChangement de taille de police, modification de la largeur ou hauteur d’un élément …
Tip 3 - Démo
Tip 4 Optimiser le code XAML
Optimiser le code XAML
Un peu de théorieAu lancement de l’application, tous les fichiers XAML référencés sont parsésParser du XAML et créer les objets correspondants en mémoire peut être longLes ressources peuvent être placés à plusieurs endroits : - dans une page - dans la classe App - dans un Resource DictionaryIl est important de factoriser les ressources
Optimiser le code XAML
<Application ...> <!-- BAD CODE DO NOT USE.--> <Application.Resources> <!-- BAD CODE DO NOT USE.--> <SolidColorBrush x:Key="DefaultAppTextColor" Color="#FF3F42CC"/> <!-- BAD CODE DO NOT USE.--> <SolidColorBrush x:Key="HomePageTextColor" Color="#FF3F42CC"/> <!-- BAD CODE DO NOT USE.--> <SolidColorBrush x:Key="SecondPageTextColor" Color="#FF3F42CC"/> <!-- BAD CODE DO NOT USE.--> <SolidColorBrush x:Key="ThirdPageTextColor" Color="#FF3F42CC"/> <!-- BAD CODE DO NOT USE.--> </Application.Resources> <!-- BAD CODE DO NOT USE.--> </Application> <!-- BAD CODE DO NOT USE.-->
N’incluez pas de ressources spécifiques à certaines pages dans le Resource Dictionary de l’application
Optimiser le code XAML
Factorisez les ressources identiques
<StackPanel> <!-- BAD CODE DO NOT USE.--> <TextBox> <!-- BAD CODE DO NOT USE.--> <TextBox.Foreground> <!-- BAD CODE DO NOT USE.--> <SolidColorBrush Color="#FF3F42CC"/> <!-- BAD CODE DO NOT USE.--> </TextBox.Foreground> <!-- BAD CODE DO NOT USE.--> </TextBox> <!-- BAD CODE DO NOT USE.--> <Button Content="Submit"> <!-- BAD CODE DO NOT USE.--> <Button.Foreground> <!-- BAD CODE DO NOT USE.--> <SolidColorBrush Color="#FF3F42CC"/> <!-- BAD CODE DO NOT USE.--> </Button.Foreground> <!-- BAD CODE DO NOT USE.--> </Button> <!-- BAD CODE DO NOT USE.--> </StackPanel> <!-- BAD CODE DO NOT USE.-->
Plutôt que d’écrire …
Optimiser le code XAML
Factorisez les ressources identiquesEcrivez …<Page ...> <Page.Resources> <SolidColorBrush x:Key="TextColor" Color="#FF3F42CC"/> </Page.Resources>
<StackPanel> <TextBox Foreground="{StaticResource TextColor}" /> <Button Content="Submit" Foreground="{StaticResource TextColor}" /> </StackPanel> </Page>
Optimiser le code XAML
Evitez d’utiliser des éléments non nécessaires. Le rendu sera plus rapide.
<Grid> <!-- BAD CODE DO NOT USE.--> <Rectangle Fill="Black"/> <!-- BAD CODE DO NOT USE.--> </Grid> <!-- BAD CODE DO NOT USE.-->
<Grid Background="Black" />
Plutôt que d’écrire …
Ecrivez …
Optimiser le code XAML
Evitez les overdraw. Utilisez les subtilités de XAML (CacheMode de Canvas ci-dessous)
<Canvas Background="White" CacheMode="BitmapCache"> <Ellipse Height="40" Width="40" Fill="Blue"/> <Ellipse Canvas.Left="21" Height="40" Width="40" Fill="Blue"/> <Ellipse Canvas.Top="13" Canvas.Left="10" Height="40" Width="40" Fill="Blue"/> </Canvas>
Tip 4 - Démo
Tip 5 Utiliser le cache sans modération
Utiliser le cache sans modération
Cache des donnéesNe chargez vos données qu’une fois. Sérialisez et désérialisez-les ensuite.
Cache des imagesStocker vos images en local. Utilisez le cache HTTP.
Cache des pagesUtilisez la propriété NavigationCacheMode.
Tip 5 - Démo
Merci !A votre dispo
blog.loicrebours.fr
26
C# et XAML sous Windows 8.1
Windows 8.1 de A à Zhttp://bit.ly/ENIW81Concevez, développez, architecturez, diagnostiquez, testez, monétisez et déployez votre application ….20 % sur la version numérique avec le code : UXMSLOIC214
27
Journée Windows 8 / UX le 28 mars chez MS France
Une après-midi de sessionsCoopération développeur / designerTrucs et astuces pour améliorer l’UX de vos applicationsDesign et ergonomie pour le développeurImaginez de nouvelles expériences pour vos applications de demainRetours d’expérience sur des applications
Des conseils pour vos applications et denombreux cadeaux à gagner !bit.ly/CommuW8UX
6 développeurs8 UX designers
