Donnez votre avis !
                   Depuis votre smartphone, sur :
                    http://notes.mstechdays.fr

    De nombreux lots à gagner toutes les heures !!!
               Claviers, souris et jeux Microsoft…

       Merci de nous aider à améliorer les TechDays

http://notes.mstechdays.fr
Optimisation des
         applications Windows 8 /
                   HTML 5 / WinJS
           Thomas LEBRUN / Jonathan ANTOINE
                                             Consultants
    tlebrun@infinitesquare.com / jantoine@infinitesquare.com
                                          Infinite Square
                                                   #APP402



Code / Développement
INFINITE SQUARE
  STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES

   Société de conseil, d’expertise, de réalisation et de formation exclusivement sur les technologies
    de développement d’applications et la plateforme applicative Microsoft.

   30 collaborateurs spécialisés sur les techno MS, dont 10 MVP.




   GOLD Certified Partner
    sur 4 domaines de compétences.
   Agréé CIR.
   Centre de formation agréé.
Infinite Square aux TechDays 2013
Agenda
     •   Rappels de bonnes pratiques
     •   JavaScript & Profiling
     •   Analyse de performances
     •   Détection de fuites mémoire
     •   Optimisation de la ListView
     •   Conclusions
Code / Développement
Rappels de bonnes pratiques
     • Ne pas bloquer le thread UI !
          – Phénomène de « freeze »
          – Pas de délai de plus de 100ms


     • Analyser fréquemment la mémoire de votre
       application
          – Permet des optimisations régulières de code

Code / Développement
Rappels de bonnes pratiques (2)
• Pas de traitements asynchrones en
  JavaScript
• Utiliser des Web Worker !
  – 1 worker = 1 thread Windows
• Communication via chaîne de caractères ou
  objet JSON
AU TRAVAIL LES TRAVAILLEURS
        !
Code / Développement
JavaScript & Profiling
     • Visual Studio JavaScript Profiler
          – Enregistre le temps d’exécution de chaque méthodes
          – Enregistre le nombre exact d’appels de chaque
            méthodes
     • De quoi parle-t-on ?
          – Exclusive Time: Temps d’exécution de la méthode sans
            ses enfants
          – Inclusive Time: Temps d’exécution de la méthode avec
            ses enfants
Code / Développement
JavaScript & Profiling (2)
     function Alpha()
     {
                       30 ms


           Beta();
     }
     function Beta()
     {
                       50 ms
     }

Code / Développement
TROP D’APPELS TUENT
        L’APPEL
Code / Développement
Analyse de performances
     • Performance Analyzer
          – Installé avec Visual Studio ou le SDK Windows 8
          – Génère un rapport mesurant 13 points de performances
         Activation Time                       Memory leaks

         UI responsiveness                     Idle State CPU usage

         Layout passes                         Successful suspend

         Synchronous XHR on UI thread          Memory reduction when suspended

         Image scaling                         App memory growth

         Memory footprint                      Runtime broker memory growth

         Runtime broker memory reference set

Code / Développement
QU’EST-CE-QUI VA PAS ?

Code / Développement
Détection de fuites mémoire
     • JavaScript Memory Profiler
     • Identification de la mémoire
       involontairement retenue
          – Utilisation de « Snapshots »
     • Affiche le nombre et la taille
          – D’éléments DOM
          – D’objets JavaScript

Code / Développement
Détection de fuites mémoire (2)
     • De quoi parle-t-on (encore ?!):
          – Size: Taille de l’objet en mémoire
          – Retained Size: Quantité de mémoire qui pourrait être
            collectée par le Garbage Collector (GC) si toutes les
            références sur l’objet sont supprimées:
             • Inclut la taille de l’objet
             • Inclut la taille de tous les objets référencés (et leurs
               références)

Code / Développement
Détection de fuites mémoire (3)
     • Possibilité de prendre des « snapshots » par
       programmation:
          – Idéal pour capturer un moment précis
     •    console.takeHeapSnapshot

          – Capture un « snapshot » et l’affichage dans le profiler
     •    console.profileMark

          – Affiche un marqueur dans le profiler

Code / Développement
A BAS LES « MEMORY LEAKS » !

Code / Développement
OPTIMISATION DE LA LISTVIEW

Une ListView peut contenir des
Conclusions
     • Installer l’Update 1 de Visual Studio 2012
          – Vous profiterez de tous les outils d’analyse de
            performances
     • Ne sous-estimer pas l’importance de ces
       outils
          – Ils vous permettront d’identifier des bugs « vicieux »
            (cas rencontré récemment )
          – Utiliser les régulièrement sur votre application
Code / Développement
Code / Développement
Développeurs                                                         Pros de l’IT
 http://aka.ms/generation-app        Formez-vous en ligne        www.microsoftvirtualacademy.com

     http://aka.ms/evenements-
                  developpeurs     Retrouvez nos évènements      http://aka.ms/itcamps-france


            Les accélérateurs
                                   Faites-vous accompagner
Windows Azure, Windows Phone,
                                   gratuitement
                   Windows 8


                                    Essayer gratuitement nos     http://aka.ms/telechargements
                                                  solutions IT

          La Dev’Team sur MSDN       Retrouver nos experts       L’IT Team sur TechNet
           http://aka.ms/devteam           Microsoft             http://aka.ms/itteam

Code / Développement

Optimisation des applications Windows 8/HTML5/WinJS

  • 1.
    Donnez votre avis! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr
  • 2.
    Optimisation des applications Windows 8 / HTML 5 / WinJS Thomas LEBRUN / Jonathan ANTOINE Consultants tlebrun@infinitesquare.com / jantoine@infinitesquare.com Infinite Square #APP402 Code / Développement
  • 3.
    INFINITE SQUARE STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES  Société de conseil, d’expertise, de réalisation et de formation exclusivement sur les technologies de développement d’applications et la plateforme applicative Microsoft.  30 collaborateurs spécialisés sur les techno MS, dont 10 MVP.  GOLD Certified Partner sur 4 domaines de compétences.  Agréé CIR.  Centre de formation agréé. Infinite Square aux TechDays 2013
  • 4.
    Agenda • Rappels de bonnes pratiques • JavaScript & Profiling • Analyse de performances • Détection de fuites mémoire • Optimisation de la ListView • Conclusions Code / Développement
  • 5.
    Rappels de bonnespratiques • Ne pas bloquer le thread UI ! – Phénomène de « freeze » – Pas de délai de plus de 100ms • Analyser fréquemment la mémoire de votre application – Permet des optimisations régulières de code Code / Développement
  • 6.
    Rappels de bonnespratiques (2) • Pas de traitements asynchrones en JavaScript • Utiliser des Web Worker ! – 1 worker = 1 thread Windows • Communication via chaîne de caractères ou objet JSON
  • 7.
    AU TRAVAIL LESTRAVAILLEURS ! Code / Développement
  • 8.
    JavaScript & Profiling • Visual Studio JavaScript Profiler – Enregistre le temps d’exécution de chaque méthodes – Enregistre le nombre exact d’appels de chaque méthodes • De quoi parle-t-on ? – Exclusive Time: Temps d’exécution de la méthode sans ses enfants – Inclusive Time: Temps d’exécution de la méthode avec ses enfants Code / Développement
  • 9.
    JavaScript & Profiling(2) function Alpha() { 30 ms Beta(); } function Beta() { 50 ms } Code / Développement
  • 10.
    TROP D’APPELS TUENT L’APPEL Code / Développement
  • 11.
    Analyse de performances • Performance Analyzer – Installé avec Visual Studio ou le SDK Windows 8 – Génère un rapport mesurant 13 points de performances Activation Time Memory leaks UI responsiveness Idle State CPU usage Layout passes Successful suspend Synchronous XHR on UI thread Memory reduction when suspended Image scaling App memory growth Memory footprint Runtime broker memory growth Runtime broker memory reference set Code / Développement
  • 12.
    QU’EST-CE-QUI VA PAS? Code / Développement
  • 13.
    Détection de fuitesmémoire • JavaScript Memory Profiler • Identification de la mémoire involontairement retenue – Utilisation de « Snapshots » • Affiche le nombre et la taille – D’éléments DOM – D’objets JavaScript Code / Développement
  • 14.
    Détection de fuitesmémoire (2) • De quoi parle-t-on (encore ?!): – Size: Taille de l’objet en mémoire – Retained Size: Quantité de mémoire qui pourrait être collectée par le Garbage Collector (GC) si toutes les références sur l’objet sont supprimées: • Inclut la taille de l’objet • Inclut la taille de tous les objets référencés (et leurs références) Code / Développement
  • 15.
    Détection de fuitesmémoire (3) • Possibilité de prendre des « snapshots » par programmation: – Idéal pour capturer un moment précis • console.takeHeapSnapshot – Capture un « snapshot » et l’affichage dans le profiler • console.profileMark – Affiche un marqueur dans le profiler Code / Développement
  • 16.
    A BAS LES« MEMORY LEAKS » ! Code / Développement
  • 17.
    OPTIMISATION DE LALISTVIEW Une ListView peut contenir des
  • 18.
    Conclusions • Installer l’Update 1 de Visual Studio 2012 – Vous profiterez de tous les outils d’analyse de performances • Ne sous-estimer pas l’importance de ces outils – Ils vous permettront d’identifier des bugs « vicieux » (cas rencontré récemment ) – Utiliser les régulièrement sur votre application Code / Développement
  • 19.
  • 20.
    Développeurs Pros de l’IT http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com http://aka.ms/evenements- developpeurs Retrouvez nos évènements http://aka.ms/itcamps-france Les accélérateurs Faites-vous accompagner Windows Azure, Windows Phone, gratuitement Windows 8 Essayer gratuitement nos http://aka.ms/telechargements solutions IT La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet http://aka.ms/devteam Microsoft http://aka.ms/itteam Code / Développement

Notes de l'éditeur

  • #2 Notation
  • #3 Intro code / dev
  • #12 C:\\Program Files (x86)\\Windows Kits\\8.0\\bin\\{Plateform}\\AppPerfAnalyzer\\appperfanalyzer_js.exe
  • #13 C:\\Program Files (x86)\\Windows Kits\\8.0\\bin\\{Plateform}\\AppPerfAnalyzer\\appperfanalyzer_js.exe