Comment Ionic vous aide

à améliorer la performance de vos applications mobiles

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é
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 !