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

1. Améliorez la réactivité de vos
applications Windows 8.1
5 astuces qui vont tout changer !

2. Présentation
Loïc
ReboursConsultant .NET - Avanade
MVP Client Development
@loicrebours
www.blog.loicrebours.fr

3. Une application réactive pour une
meilleure expérience utilisateur

4. Tip 1
Eviter les dangers
d’async/await

5. Eviter les dangers d’async/await
UI thread
Async method
Await
Async work
Await
Await
UI thread
Async method
Async work

6. Tip 1 - Démo

7. Tip 2
Charger les données de façon
incrémentale

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. Tip 2 - Démo

10. Tip 3
Créer des animations
performantes

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. 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. Tip 3 - Démo

14. Tip 4 Optimiser le code XAML

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. 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. 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. 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. 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. 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. Tip 4 - Démo

22. Tip 5
Utiliser le cache sans
modération

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. Tip 5 - Démo

25. Merci !
A votre dispo 
@loicrebours
loic.rebours@outlook.com
blog.loicrebours.fr

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. 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