Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TechDays - Développer une single page application HTML5 - Version longue

  • Login to see the comments

TechDays - Développer une single page application HTML5 - Version longue

  1. 1. Développer une SPA pour tous les devices Maxime LUCE Fondateur Touch it maxime@touchit.fr http://touchit.fr @Touchit_App Développeurs
  2. 2. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toute les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Développeurs
  3. 3. INTRODUCTION Définition Caractéristiques Pourquoi ? #mstechdays Développeurs
  4. 4. Définition « Une application web monopage (en anglais single-page application ou SPA) est une application web accessible via une page web unique. Le but est d'éviter le chargement d'une nouvelle page à chaque action demandée, et de fluidifier ainsi l'expérience utilisateur. » Wikipédia (Application Web Monopage) #mstechdays Développeurs
  5. 5. Caractéristiques • Application web = HTML / CSS / Javascript • Gestion des états / de l’historique • Utilisation intensive Ajax #mstechdays Développeurs
  6. 6. Cross-Platform Natif Avantages Inconvénients • Performances • Gestion des compétences • Look’n’Feel • Maintenance • Rapidité du développement • Technologies propriétaires #mstechdays Développeurs
  7. 7. Cross-Platform SPA Avantages Inconvénients • « Un seul code » • Performances • Réutilisation des compétences • Navigateurs • Adaptabilité • Debugging #mstechdays Développeurs
  8. 8. PRODUCTIVITÉ Ne pas réinventer la roue Choisir les bonnes librairies Automation #mstechdays Développeurs
  9. 9. Librairies • All in One • Angular • Backbone • Spécialisées • Underscore • KnockoutJS • Framework • Durandal • SPA Tools #mstechdays Développeurs
  10. 10. Automation • Gestion des dépendances • Génération • Test • Scaffolding #mstechdays Développeurs
  11. 11. Yeoman • Bower • Grunt • Generators / Sub Generators #mstechdays Développeurs
  12. 12. Language Overlay • Simplifier le CSS – LESS – SCSS • Améliorer la gestion du javascript – Typescript – Coffee Script – Dart Attention ! Avoir une bonne vision du code généré est indispensable. #mstechdays Développeurs
  13. 13. YEOMAN Créer un projet prêt à démarrer Créer des composants du projet #mstechdays Développeurs
  14. 14. ARCHITECTURE Choisir une architecture adaptée au Javascript et aux SPA Utiliser des bonnes pratiques / Design Patterns #mstechdays Développeurs
  15. 15. Architecture - base • Modularité • Separation of Concern • MV* • Convention First #mstechdays Développeurs
  16. 16. Architecture – Design Patterns • Performances / Maintenance • Patterns Javascript recommandés – – – – – – – #mstechdays AMD Promise Singleton Memoization Factory Observer Reuse http://shichuan.github.io/javascript-patterns/ Développeurs
  17. 17. DESIGN PATTERNS Démonstration des différents design patterns avec leur utilité respective #mstechdays Développeurs
  18. 18. LIMITES (À CONTOURNER) Les limites actuelles et comment les contourner #mstechdays Développeurs
  19. 19. Limites actuelles • Taille et Manipulation DOM • Traitement de grandes quantité de données • Empreinte mémoire #mstechdays Développeurs
  20. 20. Manipulation DOM • N 1 des causes de mauvaises performances • Eviter les grosses manipulations • Décharger ce qui n’est pas à l’écran • Charger le DOM à la demande #mstechdays Développeurs
  21. 21. Gestion des ressources • HTML / Style / Javascript • RequireJS – Modularité – Build – Preprocessing #mstechdays Développeurs
  22. 22. Gestion des états (pages) • Cycle de vie • Etats principaux / secondaire #mstechdays Développeurs
  23. 23. Traitement de grande quantité de données • Attention aux fuites mémoire • Ne pas bloquer le thread principal • Décharger la donnée #mstechdays Développeurs
  24. 24. Offline Storage • Garder la donnée importante pour un accès rapide • Evite la surcharge mémoire • Utiliser des librairies de traitement de données • Multiple technologies / Failback #mstechdays Développeurs
  25. 25. Offline Storage #mstechdays Développeurs
  26. 26. LIMITES ET ASTUCES Cycle de vie Traitement de longues listes Stockage hors-ligne #mstechdays Développeurs
  27. 27. HYBRIDATION Transformer sa SPA en application native #mstechdays Développeurs
  28. 28. Solutions • WebView – Uniquement HTML / Javascript / CSS – Selon les fonctionnalités attendus cela suffit • Solutions Hybride – Apache Cordova • Adobe PhoneGap • Intel XDK • Icenium #mstechdays Développeurs
  29. 29. Apache Cordova • WebView – Héberge la SPA – Navigateur par défaut • Bridge vers code natif – Accès aux fonctions native du téléphone – Déléguer des tâches complexes au code natif #mstechdays Développeurs
  30. 30. Apache Cordova CLI • • • • Prepare Preview Build Deploy • Toutes les plateformes avec un même outil • Toutes les plateformes dans un seul dossier #mstechdays Développeurs
  31. 31. Apache Cordova Merges • Styles (indispensable) – Personnaliser le rendu / plateforme – Look’n’Feel Natif • Scripts – Preprocessing (compilation conditionnelle) – Personnaliser les fonctionnalités #mstechdays Développeurs
  32. 32. APACHE CORDOVA Intégrer une SPA dans Cordova Personnaliser le rendu #mstechdays Développeurs
  33. 33. Merci !! • Quelques liens – http://www.html5rocks.com/fr/ – http://addyosmani.com/resources/essentialjsdesignpatt erns/book/ – https://github.com/spatools #mstechdays Développeurs
  34. 34. Digital is business

×