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 thread
Async method
Await
Async work
Await
Await
UI thread
Async method
Async 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
page
Il faut char...
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 UI
Parsing du XAML
Layout de l...
Créer des animations performantes
Il existe deux types d’animation
Les animations indépendantes
Peuvent être calculées ent...
Tip 3 - Démo
Tip 4 Optimiser le code XAML
Optimiser le code XAML
Un peu de théorie
Au lancement de l’application, tous les fichiers XAML référencés sont parsés
Pars...
Optimiser le code XAML
<Application ...> <!-- BAD CODE DO NOT USE.-->
<Application.Resources> <!-- BAD CODE DO NOT USE.-->...
Optimiser le code XAML
Factorisez les ressources identiques
<StackPanel> <!-- BAD CODE DO NOT USE.-->
<TextBox> <!-- BAD C...
Optimiser le code XAML
Factorisez les ressources identiques
Ecrivez …
<Page ...>
<Page.Resources>
<SolidColorBrush x:Key="...
Optimiser le code XAML
Evitez d’utiliser des éléments non nécessaires. Le rendu sera
plus rapide.
<Grid> <!-- BAD CODE DO ...
Optimiser le code XAML
Evitez les overdraw.
Utilisez les subtilités de XAML (CacheMode de Canvas ci-
dessous)
<Canvas Back...
Tip 4 - Démo
Tip 5
Utiliser le cache sans
modération
Utiliser le cache sans modération
Cache des données
Ne chargez vos données qu’une fois. Sérialisez et désérialisez-les ens...
Tip 5 - Démo
Merci !
A votre dispo 
@loicrebours
loic.rebours@outlook.com
blog.loicrebours.fr
C# et XAML sous Windows 8.1
26
Windows 8.1 de A à Z
http://bit.ly/ENIW81
Concevez, développez, architecturez,
diagnostique...
Journée Windows 8 / UX le 28 mars chez MS
France
Une après-midi de sessions
Coopération développeur / designer
Trucs et as...
Améliorer la réactivité de vos applications Windows 8.1
Upcoming SlideShare
Loading in...5
×

Améliorer la réactivité de vos applications Windows 8.1

636

Published on

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éra

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
636
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.
  • Améliorer la réactivité de vos applications Windows 8.1

    1. 1. Améliorez la réactivité de vos applications Windows 8.1 5 astuces qui vont tout changer !
    2. 2. Présentation Loïc ReboursConsultant .NET - Avanade MVP Client Development @loicrebours www.blog.loicrebours.fr
    3. 3. Une application réactive pour une meilleure expérience utilisateur
    4. 4. Tip 1 Eviter les dangers d’async/await
    5. 5. Eviter les dangers d’async/await UI thread Async method Await Async work Await Await UI thread Async method Async work
    6. 6. Tip 1 - Démo
    7. 7. Tip 2 Charger les données de façon incrémentale
    8. 8. Charger les données de façon incrémentale Inutile d’afficher des milliers d’éléments au chargement d’une page Il faut charger les données quand l’utilisateur en a besoin Le chargement incrémental est moins consommateur de ressources ISupportIncrementalLoadingpublic interface ISupportIncrementalLoading { bool HasMoreItems { get; } IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count); }
    9. 9. Tip 2 - Démo
    10. 10. Tip 3 Créer des animations performantes
    11. 11. Créer des animations performantes Pour le rendu XAML, il y a 2 threads importants Le thread UI Parsing du XAML Layout de la scène Rendering des éléments Le thread Compositor Compose les animations des éléments visuels Instructions GPU / CPU
    12. 12. Créer des animations performantes Il existe deux types d’animation Les animations indépendantes Peuvent être calculées entièrement lors de leur création Gérées par le thread Compositor, utilisent la puissance du GPU Scaling, rotation, translation … Les animations dépendantes Ne peuvent pas être calculées à l’avance. Utilisation intensive du thread UI Changement de taille de police, modification de la largeur ou hauteur d’un élément …
    13. 13. Tip 3 - Démo
    14. 14. Tip 4 Optimiser le code XAML
    15. 15. Optimiser le code XAML Un peu de théorie Au lancement de l’application, tous les fichiers XAML référencés sont parsés Parser du XAML et créer les objets correspondants en mémoire peut être long Les ressources peuvent être placés à plusieurs endroits : - dans une page - dans la classe App - dans un Resource Dictionary Il est important de factoriser les ressources
    16. 16. 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.- -> N’incluez pas de ressources spécifiques à certaines pages dans le Resource Dictionary de l’application
    17. 17. 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.--> Plutôt que d’écrire …
    18. 18. Optimiser le code XAML Factorisez les ressources identiques Ecrivez … <Page ...> <Page.Resources> <SolidColorBrush x:Key="TextColor" Color="#FF3F42CC"/> </Page.Resources> <StackPanel> <TextBox Foreground="{StaticResource TextColor}" /> <Button Content="Submit" Foreground="{StaticResource TextColor}" /> </StackPanel> </Page>
    19. 19. 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 …
    20. 20. 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>
    21. 21. Tip 4 - Démo
    22. 22. Tip 5 Utiliser le cache sans modération
    23. 23. Utiliser le cache sans modération Cache des données Ne chargez vos données qu’une fois. Sérialisez et désérialisez-les ensuite. Cache des images Stocker vos images en local. Utilisez le cache HTTP. Cache des pages Utilisez la propriété NavigationCacheMode.
    24. 24. Tip 5 - Démo
    25. 25. Merci ! A votre dispo  @loicrebours loic.rebours@outlook.com blog.loicrebours.fr
    26. 26. C# et XAML sous Windows 8.1 26 Windows 8.1 de A à Z http://bit.ly/ENIW81 Concevez, développez, architecturez, diagnostiquez, testez, monétisez et déployez votre application …. 20 % sur la version numérique avec le code : UXMSLOIC214
    27. 27. Journée Windows 8 / UX le 28 mars chez MS France Une après-midi de sessions Coopération développeur / designer Trucs et astuces pour améliorer l’UX de vos applications Design et ergonomie pour le développeur Imaginez de nouvelles expériences pour vos applications de demain Retours d’expérience sur des applications Des conseils pour vos applications et de nombreux cadeaux à gagner ! 27 6 développeurs 8 UX designers
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×