Comment Ionic vous aide

Comment Ionic vous aide

à améliorer la performance de vos applications mobiles

908a0c79fc96a06684fa7e2a523bde1b?s=128

Marek Kalnik

April 14, 2015
Tweet

Transcript

  1. COMMENT IONIC VOUS AIDE À AMÉLIORER LES PERFORMANCES DE VOTRE

    APPLICATION
  2. MAREK KALNIK • @marekkalnik • cofondateur et CTO de BAM

    (@bam_lab) • architecte Theodo pendant 4 ans
  3. • JavaScript • CSS

  4. JAVASCRIPT

  5. 300 MS CLICK DELAY

  6. 300 MS CLICK DELAY • L’utilisateur touche l’écran - touchstart

    • L’utilisateur lève le doigt - touchend • Le navigateur attend 300ms pour voir s’il y aura un 2eme click • Si l’utilisateur n’a pas cliqué - click
  7. 300 MS CLICK DELAY • Solution : https://github.com/driftyco/ionic/blob/master/js/utils/tap.js • déclencher

    le click lors du touchend si la distance parcourue est acceptable (12px dans chaque direction) • prévenir le ghostclick - click déclenché par le navigateur en se basant sur les coordonnées • si besoin de le désactiver : <div data-tap-disabled=“true”>…</div> • ou sinon : 
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user- scalable=no, width=device-width">
  8. SCROLLING

  9. SCROLLING • Ionic permet de choisir entre une solution JavaScript

    et navigateur
 <ion-view overflow-scroll=“true”>…</ion-view> • ionic.views.ScrollNative - 343 lignes • ionic.views.Scroll - 2482 lignes, basé sur Zynga Scroller
  10. SCROLLING • overflow-scroll=“true” à utiliser surtout sous Android • overflow-scroll=“false”

    (par défaut) pour avoir les animations, décélération, meilleure gestion du clavier etc.
  11. COLLECTION REPEAT

  12. COLLECTION REPEAT • objectif : faire un ng-repeat avec le

    minimum de manipulation DOM possible • on affiche uniquement le nombre d’éléments qui rentre dans la vue + un buffer de quelques éléments • lors du scroll on déplace l’élément qui sort de l’écran et on le met en bas de la pile • on remplace le modèle de cet élément par la valeur suivante
  13. COLLECTION REPEAT ATTENTION : • les images sous iOS prennent

    du temps à se charger (50 - 150 ms par image), il faut les précharger si besoin • marche bien pour les éléments avec la taille fixe
  14. IONIC VIEW CACHE

  15. IONIC VIEW CACHE • les vues d’Ionic sont par défaut

    cachés - jusqu’à 10 views reste dans le DOM • le scope de la vue et déconnecté du cycle de $digest, par contre le scope n’est pas détruit • le controller n’est pas appelé lors de l’affichage d’une vue caché
  16. None
  17. IONIC VIEW CACHE ATTENTION : • à l’utilisation de la

    mémoire (le scope n’est pas détruit !) • à bien utiliser l’événement view.enter si besoin de réinitialiser des valeurs
  18. MÉMOIRE

  19. dereferencer le scope le plus tôt possible

  20. CSS

  21. IONIC.ANIMATIONFRAMETHROTTLE ajoute un callback à la queue de requestAnimationFrame

  22. TRANSLATE3D pour s’assurer que la transition est prise en charge

    par le GPU
  23. TRANSLATE3D(0, 0, 0) crée une calque dans le navigateur pour

    que les animations puissent démarrer tout de suite
  24. LIST LIST-INSET supprime le box-shadow pour améliorer la fluidité lors

    du scroll
  25. GRADE-[A|B|C] supprime certains styles selon la puissance de la plateforme

  26. MERCI !