App Performance: The Windows Performance Toolkit (3-100)

Session animée par Chell Sterioff

Objectif : se familiariser avec les outils d’analyses d’applications

Outils d’analyse de performance :

  • Visual Studio
  • Windows performance Toolkit
    • Windows Performance Recorder
    • Windows Performance Analyser

Démo de présentation du recorder et quelles sont les différentes options à notre disposition.

Démo de présentation de tout ce que présente l’analyseur et de la logique à utiliser pour diagnostiquer correctement des problèmes de performance.

Une session très orientée démo et assez difficile à suivre qui dans une certaine mesure entre en conflit avec précédente. La principale difference étant que celle-ci est orienté HTML alors que la précédente était XAML. A voir mais surement plusieurs fois et en plusieurs fois.

John Thiriet

Create Fast and Fluid Interfaces with HTML and JavaScript (3-156)

Session animée par Paul Gildea

Session traitant des perfs et notamment de comment gérer le chargement des apps et des écrans, d’une façon générale et avec les nouvelles API.

UI responsiveness

Un des enjeux est de prioriser des opérations sans lien pour ne pas bloquer le thread UI. Le contrôle Scheduler permet de gérer cette problématique. Le Scheduler permet de définir des priorités sur les traitements. Le Scheduler fonctionne comme un setImmediate.

Consommation mémoire

Winjs implémente un mécanisme de  libération mémoire similaire a celui de .net avec une méthode dispose. Les contrôles qui supportent ce pattern ajoute une classe css “win-disposable”, et doivent libérer les contrôles enfant avec winjs.utilities.disposeSubTree. Le controle Navigator présent dans les templates projet implémente tout cela.

Longues listes

Le point principal concerne le rendu des items. Les contrôles winjs sont responsables du déclenchement de ce rendu. Avec winjs 2 les templates sont compilés, ce qui améliore les perfs. Les templates permettent aussi de libérer la mémoire (disposable). Une option du Template peut le rendre debuggable.

Temps de démarrage

Pour commencer, faire attention à la structure du html car cela impacte le temps de chargement. Le Scheduler permet aussi d’améliorer le chargement (en utilisant une methode requestDrain qui force l’exécution des traitements de la priorité ciblée).

Guillaume Leborgne

XAML performance fundamentals (3-157)

Session animée par Kiran Kumar

On commence par une petite piqure de rappel sur ce que signifie la performance

  • Fluidité
  • Rapidité
  • Impression des utilisateurs

Ensuite on parle de ce qu’il faut savoir

  • Connaître le runtime
  • Connaître son budget (CPU ou temps de développement)
  • Utilisation de pattern (MVVM)

Rappel/présentation sur l’architecture de XAML et les différents threads qui le compose.

Description du cycle de vie d’une frame XAML.

Description du démarrage d’une application en XAML et de ce qui cause des ralentissements.

S’ensuit une démonstration de comment on peu diagnostiquer ce genre de soucis de démarrage et de parsing de xaml (utilisation de wprui et wpa avec un profil spécialisé pour l’analyse du XAML)

Rappels sur les animations dépendantes et indépendantes et que les animations dépendantes ralentissent sont soumises au CPU et non au GPU.

Nouvelles api de diagnostics : DebugSettings.EnableFrameRateCounter, DebugSetting.EnableRedrawRegions, DebugSettings.IsOverdrawHeatMapEnabled

Description du fonctionnement des animations de panning et pastes d’améliorations pour l’affichage des contenus virtualisés.

Présentation d’une nouvelle api GridView.ContainerContentChanging qui permet d’éviter le coût du databinding en donnant la main à l’utilisateur pour qu’il remplisse les éléments du GridView.

Démo diagnostic des problèmes d’animations et de panning.

On parle ensuite des médias et de la manière d’optimiser leurs performance.

Présentation des améliorations :

  • Démarrage plus rapide
  • Templates par défuts meilleurs
  • Support du XAML binaire
  • Databinding plus rapide
  • Utilisation mémoire inférieure
  • Grouping Panning 2x plus rapide
  • Nouvelle api pour les panels
  • Etc…

Comme l’année dernière Kiran Kumar a fait une belle session rentrant bien dans les détails du moteur de XAML et montrant les nouveautés du Windows Performance Analyser

John Thiriet

Fast Apps and Sites with JavaScript (4-313)

Session animée par Gaurav Seth

Session sur comment faire ou améliorer les perfs de nos codes JavaScript.

Les démos présentées sont disponibles ici :

http://aka.ms/fastjs

http://aka.ms/fasterjs

On attire notre attention sur le fait que le browser est en single thread donc pour atteindre 60fps, les traitements doivent prendre moins de 16ms sinon on a du flickering. JavaScript est très flexible et permet toujours plusieurs façons très différentes de faire quelque chose, donc il faut être vigilant car certains mauvais usages ont des impacts importants sur les perfs.

Le premier point abordé est de faire attention aux allocations d’objet. L’allocation elle même n’est pas très couteuse mais elle implique de la garbage collection. Si on doit manipuler beaucoup d’objets, on peut par exemple faire des pools d’objets.

JavaScript permet de faire des objets avec des propriétés dynamiques, mais les interpréteurs infèrent des types. Il est préférable d’initialiser toutes les propriétés des objets, même celles qui ne sont pas utilisées. Le moteur peut ainsi optimiser le type. L’utilisation du mot clé delete, ou l’ajout de propriétés à la volée, ou le fait de changer le type d’une propriété empêchent aussi le moteur d’optimiser le type. L’utilisation des accesseurs sur les propriétés est également plus lent. De la même façon, il est préférable d’avoir un format homogène sur les données stockées dans les tableaux. L’idéal est d’utiliser les array typées (Float64Array). Pour itérer sur les tableaux, le plus efficace est une boucle for, a condition de ne pas faire un .length dans le for (faire une variable).

En JavaScript les nombres sont par défaut des double en 64bits. Le moteur peut améliorer les perfs si il peut être sûr de pouvoir stocker une variable sous la forme d’un nombre entier.
Le dernier point est de prendre garde aux appels au DOM. Il est souvent préférable de créer une variable intermédiaire (sur la propriété style par exemple).

Guillaume Leborgne

Pour une bonne expérience de recherche

SmartSearch correspond à la nouvelle page de résultat, ie le hub avec les résultats dans les fichiers, les images, les musiques, sur le web avec des preview…

Côté app, on a toujours le contrat de recherche comme avant.

Il n’y a pas de nouveau contrat pour être intégré à la SmartSearch, c’est le système qui gère tout, et décide s’il prend des résultats de notre app ou pas !!

Si on a un site web, il vaut mieux lié son site web à son app pour que Bing puisse faire le lien, voire de proposer d’ouvrir l’app plutôt que le site web.

Avec Windows 8.1, on a un nouveau control : la SearchBox

Ce contrôle permet de monter l’historique des dernières recherches, des suggestions de résultat, et des suggestion de termes de recherche.

Il peut aussi gérer le Type to search, ie comme sur le start screen, on commence à taper pour lancer une recherche (à utiliser que sur les pages où il n’y a pas d’autre textbox)

Il faut aussi penser à rajouter une option Clear history dans les settings (via l’API WinRT) !

Le speaker présente ensuite différents conseils sur la manière de positionner le contrôle de recherche, en tenant aussi compte de la taille de l’écran (éventuellement en mettant un bouton de recherche pouvant s’étendre).

Enfin on arrive au code pour ajouter une SearchBox :

  1. On ajoute le contrôle SearchBox avec ses styles et on crée une page de résultat (avec le template VS)
  2. On se branche sur le querysubmitted event pour aller sur la page de résultat
  3. On traite la recherche dans la page de résultats

Pour gérer les suggestions, il y a un évènement suggestionsrequested sur la SearchBox.

Ensuite, sur cet évènement on peut ajouter des QuerySuggestion ou des ResultSuggestion (dans ce cas il faut gérer l’évènement ResultSuggestionChoosen).

Si on upgrade un projet de 8 à 8.1, on passe facilement du SearchPane à la SearchBox avec les mêmes évènements.

Si on ne fait pas une mise à jour majeure de l’app Win8, le conseil est d’ajouter au moins un bouton Recherche qui ouvre le SearchPane (le truc interdit jusqu’alors) !!!

Pierre-Yves Hemery

Unlocking the power of DirectX in apps that use XAML (4-065)

Session animée par Bede Jordan

A chaque fois j’essaie d’aller voir une session C++ ou DirectX et celle-ci est l’heureuse élue.

Pourquoi utiliser XAML et DirectX ensemble

  • XAML permet de faire des interfaces graphiques simplement (comparé à DirectX)
  • DirectX est la couche la plus basse pour faire du graphique. XAML (dans Windows 8) est construit au dessus de DirectX via DirectComposition pour Windows 8.1

En bref :

  • XAML => UI et contrôles
  • DirectX => Graphisme edition d’images, jeux.

Applications utilisants cette intéropérabilité entre XAML et DirectX :

  • OneNote
  • FreshPaint
  • Bing Maps
  • Reader (Pdf)
  • Jeux de Microsoft

Plusieurs options pour gérer ça :

  • SurfaceImageSource et VirtualSurfaceImageSource (explication de comment on les utilise et des nouveautés dans Windows 8.1)
  • SwapChainBackgroundPanel, SwapChainPanel (permet de créer plusieurs SwapChain et d’avoir des tailles plus petites que le plein écran des SwapChainBackgroundPanel, plus de limitation de z-order comme les webview)

On nous explique quelle API utiliser et quand les utiliser.

Présentation des Dependent et Independent Input et de comment on utilise des entrées indépendentes et démonstration.

Une session très intéressante qui permet d’imaginer des scenarii un peu différents de ceux que l’on a l’habitude de faire.

John Thiriet

Building Apps That Integrate with People and Events (3-007)

Session animée par Zainab Hakim

Cette session permettra de découvrir comment lire et/ou écrire dans les contacts et dans le calendrier.

Ces manipulations vont se faire en implémentant des contrats.

On a maintenant la possibilité d’ afficher une carte de contact dans les applications. Cette carte affiche les infos essentielles et permet des actions type déclencher un appel ou envoyer un message. Nos applications peuvent se déclarer comme cible pour ces actions avec une déclaration dans le manifeste.

Une syntaxe de recherche permet de récupérer le contact selon les infos dont on dispose dans l’appli. Avec la preview de 8.1, le contrat se comportera systématiquement comme si le contact n’existe pas, a savoir que la carte de contact affiche les informations qui ont été fournies par l’application.

Une application n’a pas accès aux informations des contacts car la carte est gérée par le système. On peut préciser la position a laquelle la carte sera affichée.

Il y a également un contact picker qui permet de sélectionner un contact.

Les interactions avec le calendrier fonctionne exactement de la même façon.

Guillaume Leborgne

Beautiful Apps at Any Size on Any Screen (2-150)

Session animée par Sarah McDevitt

Explication des intérêts de bien prévoir son application pour plusieurs résolutions et du lancement de l’application depuis une autre avec plusieurs applications affichés en même temps sur l’écran et plusieurs apps en même temps sur le plusieurs écrans.

Suppression de l’obligation de faire un snapmode en 320px. 500px minimum dans ce cas là.

Il faut fournir des fonctionnalités complètes jusqu’à 500px car les petits appareils se tiennent souvent en mode portrait.

Si l’application est orienté autour d’un scroll horizontal il n’y a rien à faire.

Si l’application est multicolonne comme Mail il faut choisir de réduire certaines colonnes ou les faire disparaitre en fonction de la largeur disponible.

Pour les jeux c’est un peu différent car il faut choisir comment réorganiser les contenus. Il faut mettre en pause le jeu lorsque la taille change et il y a des API pour le savoir.

Gestion du support du snap et intéressant dans certains cas :

Quand on veux surveiller l’arrivée de contenus comme les applications de news, rss, mails, paniers pour les applications de commerce etc… En dessous de 500px on peux retirer des fonctionnalités. Donc pour le snapped mode on est pas obligé de tout garder dans le design.

Suppression du TryUnsnap. Seuls les utilisateurs peuvent désormais repasser en mode normal.

Il ne faut plus utiliser les ViewStates il faut utilise les tailles disponible (exemple width < 500)

En ce qui concerne les appbar :

Windows se charge d’adapter au maximum les boutons en fonction de la taille disponible en diminuant les marges et en supprimant les libellés.

Rappels concernant la gestion des dpi et du scaling et des tailles minimales de contrôles touch en fonction de leur fréquence d’usage.

La hauteur minimale est de 768px quelque soit l’appareil.

Introduction de ResourcePackage pour éviter d’embarquer les ressources pour tout les appareils dans le même paquet.

Démonstration des différentes options d’orientation etc.. avec le simulateur de visual studio.

Une session intéressante et pas très technique montrant comment gérer les différentes nouveautés liées à la variabilité des tailles de fenêtres.

John Thiriet

Building Great Service Connected apps (3-090)

Session animée par Suhail Khalid et Matt Merry

Les défis à relever :

  • Etre connecté
  • Etre authentifié
  • Avoir son propre service
  • Garder le contenu de l’app à jour

On commence donc par un présentation du nouveau HttpClient, et notamment la gestion du cache avec des HttpFilter.

HttpClient apporte quelques nouveautés, mais surtout les mêmes fonctionnalités sur tous les langages.

On peut aussi utiliser les HttpFilters pour gérer l’authentification avec un OAuthHttpFilter par exemple, qui fait ensuite appel au Web Authentication Broker. L’idée de demander les credentials de l’utilisateur qu’une seule fois.

Pour construire son service, on nous propose bien sûr Azure Mobile Services (et les prix !), puis on revoie le wizard de VS2013 qui permet d’ajouter des notifications en 3 clics à son app (quand le speaker ne fait pas n’importe quoi).

Pour garder un contenu à jour, on peut indiquer au système des URIs à pré charger :

ContentPrefetcher.ContentUris.Add(uri) pour charger les URI une à une

Ou ContentPrefetcher.IndirectContentUri pour renvoyer vers un fichier XML distant qui contient la liste des URIs à charger

Le préchargement par le système se fait selon certaines conditions : disponibilité du réseau, niveau de la batterie, l’utilisation de l’app, etc.

Pour générer le fichier XML, il utilise un job dans son site Mobile Services.

Il faut lancer l’app une fois pour permettre le préchargement.

Le préchargement supporte l’authentification par cookie.

Il y a des API pour lancer manuellement le préchargement.

Au passage on apprend qu’il y a un Network simulator avec 8.1 pour tester les changements de type de réseau.

Pierre-Yves Hemery

What’s New in .NET Development (2-303)

Session animée par Habib Heydarian

Asp.net est maintenant délivré par NuGet plutôt qu’avec .net. Les outils Visual Studio évoluent à un rythme différent.

On revient sur l’évolution de asp.net et le fait qu’il n’y a qu’un seul asp.net avec différentes briques, d’où le nouveau wizard de création de projet.

Une autre grosse nouveauté concerne le mode d’authentification qui va maintenant être base sur OWIN.

On voit ensuite une quantité de, petites démos sur les différentes parties et sur vs 2013.

Session agréable mais un peu creuse.

Guillaume Leborgne