Le Post Infeeny

Les articles des consultants et experts Infeeny

Build 2015 – Day 2

Par Benoît,
Pôle .Net MCNEXT

Bonjour à tous,

Suite de la Build avec la deuxième journée.
Cette fois-ci direction la nouvelle API Microsoft Ink avec la recherche de nouveaux scénarios de saisie au stylet et au doigt.
Le projet « Centennial » abordé lors de la première Keynote a eu sa session pour en aborder les contours.
Enfin, retour au code avec une session technique pour améliorer les performances en XAML.

Benoît

_______________________________________________________

1 – Introducing DirectInk : learn how to unlock new opportunities using ink in your app

La principale préoccupation de notre hôte est de chercher à écrire sur une tablette comme on écrirait naturellement sur du papier.

Car les scénarios sont multiples : dessiner un chemin sur une carte, écrire un mail au stylo et le convertir en texte ou bien encore annoter du texte, une photo ou même une vidéo.

Buid2015_Introducing DirectInk : learn how to unlock new opportunities using ink in your app

Malgré une contrainte matériel (device lourd, cher, latence, …), les conditions de réussite passent par un rendu joli et rapide, un résultat fiable et une lecture confortable.

Si on observe ce qui se fait actuellement, on s’aperçoit en zoomant que le tracé n’est pas si lisse que ça, que les extrémités des lignes sont brusques et qu’il y a une latence non négligeable entre le tracé effectif et le résultat à l’écran.

Grace à Windows 10, on va réduire de moitié ce temps de latence. Ce nouvel OS permet de distinguer 3 couches distinctes concernant DirectInk :
– InkCanvas, le contrôle qui va permettre l’entrée du tracé
– InkPresenter qui va permettre de modifier l’aspect/le rendu
– Advanced Input Processing qui va nous permettre d’aller encore plus loin

Ici, InkPresenter va nous permettre d’approcher différents scénarios. On va pouvoir par exemple sélectionner les entrées supportées par notre contrôle, comme par exemple le stylet et/ou les doigts, mais va aussi nous offrir la possibilité de sauvegarder facilement notre saisie (via la méthode SaveAsync du strokeContainer).

Une barre d’outils fait également son apparition avec les fonctionnalités communes telle que la couleur, le type de crayon ou encore sa taille :

Build2015_Introducing DirectInk : learn how to unlock new opportunities using ink in your app

Plusieurs démos viendront conclure cette très courte session, et la plus innovante reste pour moi la possibilité d’annoter des vidéos.

2 –  « Project Centennial » : Integrating Classic Windows Apps with the Universal Windows Platform and the Universal Store

Si vous avez regardé la keynote d’ouverture de la build, alors ça n’a pas pu vous échapper : il sera bientôt possible de packager une application win32 en Windows Universal App (WUA) et la déployer dans le store !

Ce projet a pour nom de code Centennial et est encore en développement.

L’idée est ici d’exécuter l’application dans un contexte isolé et d’y inclure les dépendances afin notamment d’éviter tout résidus de désinstallation ou encore de dépendances supprimées par la désinstallation d’une autre application.

Pour ce faire, 3 actions sont nécessaires : La conversion, les tests/corrections et la publication dans le store.

Build2015_« Project Centennial » : Integrating Classic Windows Apps with the Universal Windows Platform and the Universal Store

Si on jette un œil dans les fichiers ainsi générés, et plus particulièrement le fichier manifest, on s’aperçoit que le point d’entrée de notre nouvelle application est l’exécutable (.exe), que l’on peut associer à notre application des extensions de fichier et même une tuile. Bref, tout ressemble point pour point à une WUA !

Petite différence, les fichiers habituellement déployés lors d’une installation sont regroupés dans un répertoire dédié situé dans l’espace Windows Apps de notre application.

De même, le registre initialement modifié ne l’est plus et un fichier registry.dat regroupe ces informations.

Cependant, du fait que nous évoluons désormais dans une sand-box, il est quand même nécessaire de supprimer tout le code full-trust pour des raisons évidentes de sécurité et de protection de l’utilisateur.

3 –  XAML Performance : Techniques for maximizing universal Windows App Experiences built with XAML

Encore du XAML pour cette dernière session de la journée, mais pas la moins intéressante, bien au contraire.

Durant cette session, on va aborder 10 points importants pour trouver le bon équilibre entre performance et productivité !

On va apprendre ici à lire les instruments de diagnostiques et à éviter certains pièges.

Même si nous sommes en pleine promotion de Windows 10 dans cette Build, la plupart des bonnes pratiques bordées par la suite sont valables pour Windows 8.1.

Les 10 points sont listés dans les slides dans aussi je vais éviter d’alourdir ce compte-rendu et passer directement aux commentaires pour chaque :

#1 – Zen of Performance
Il faut éviter de trop en faire au démarrage, tout code qui n’est pas indispensable ne doit pas y figurer.

#2 – Define your target and your goals
Savoir identifier quels sont les problèmes et quels sont nos objectifs (temps de chargement ? abaisser la mémoire consommée ?).

#3 – Convert to a Universal Windows App
Passer à Windows 10 va nous permettre d’obtenir un gain significatif de mémoire et de temps de chargement comme le montre le slide ci-dessous.

Build2015_XAML Performance : Techniques for maximizing universal Windows App Experiences built with XAML

#4- Profile your application
Il faut utiliser les outils de diagnostiques de Visual Studio 2015 tel que la timeline ou encore l’utilisation de la mémoire. Grâce à ces outils, on va pouvoir mieux cibler l’origine de nos problèmes.

Build2015_XAML Performance : Techniques for maximizing universal Windows App Experiences built with XAML

#5 – Defer work on startup
Il ne faut pas tout charger au démarrage et ne pas hésiter à retarder le chargement de certains composants.

#6 – Reduce number of elements
Il faut regarder le nombre d’éléments chargés grâce à l’outil Live Visual Tree puis chercher à comprendre pourquoi on en a autant.

Il faut bien entendu éviter les imbrications inutiles de Grid dans un Grid, supprimer les styles inutilisés et vérifier les Templates dans les listes.

Afin de réduire le nombre d’éléments, Windows 10 nous apporte fonctionnalité : le x :DeferLoadStrategy. Cette propriété va nous permettre de spécifier qu’on ne veut pas instancier l’élément avant qu’on ne le précise explicitement en utilisant la méthode FindName avec le nom du control en paramètre :

Build2015_XAML Performance : Techniques for maximizing universal Windows App Experiences built with XAML

#7 – Virtualization
Par défaut, les ListView et GridView sont virtualisés par défaut. Aussi, il faut éviter d’annuler ceci en les plaçant dans un scrollviewer ou encore en changeant les panels au sein de ceux-ci.

#8 – Optimize Databinding
Par simplification des templates, mais aussi par l’utilisation de {x :bind} en lieu et place du {binding} (cf. Compte rendu sur les performances du binding).
Une autre manière d’optimiser le binding est l’utilisation de x :phase là aussi développé dans un précèdent compte-rendu.

#9 – Optimize your images
Bien entendu il faut éviter des images de trop grosse qualité et préférer l’utilisation de DecodePixelHeight et DecodePixelWidth pour définir la taille de l’image :

Build2015_XAML Performance : Techniques for maximizing universal Windows App Experiences built with XAML

#10 – Optimize texte rendering
Windows 10 améliore là aussi la vitesse du rendu du texte de 50%, et ce par défaut. Cependant, certaines propriétés sont à éviter pour en profiter tel que CharacterSpacing ou encore le IsTextSelectionEnabled à true.

Afin de s’assurer de cette optimisation, on peut passer la propriété IsTextPerformanceVisualizationEnabled du DebugSettings à true et tout le texte de l’application optimisé s’affichera en vert !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :