• 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. 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 !#mstechdaysDéveloppeurs
  • 3. INTRODUCTION Définition Caractéristiques Pourquoi ? #mstechdaysDéveloppeurs
  • 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) #mstechdaysDéveloppeurs
  • 5. Caractéristiques • Application web = HTML / CSS / Javascript • Gestion des états / de l’historique • Utilisation intensive Ajax #mstechdaysDéveloppeurs
  • 6. Cross-Platform Natif AvantagesInconvénients• Performances• Gestion des compétences• Look’n’Feel• Maintenance• Rapidité du développement• Technologies propriétaires#mstechdaysDéveloppeurs
  • 7. Cross-Platform SPA AvantagesInconvénients• « Un seul code »• Performances• Réutilisation des compétences• Navigateurs• Adaptabilité• Debugging#mstechdaysDéveloppeurs
  • 8. PRODUCTIVITÉ Ne pas réinventer la roue Choisir les bonnes librairies Automation #mstechdaysDéveloppeurs
  • 9. Librairies • All in One• Angular • Backbone• Spécialisées• Underscore • KnockoutJS• Framework• Durandal • SPA Tools#mstechdaysDéveloppeurs
  • 10. Automation • Gestion des dépendances • Génération • Test • Scaffolding #mstechdaysDéveloppeurs
  • 11. Yeoman • Bower • Grunt • Generators / Sub Generators #mstechdaysDéveloppeurs
  • 12. Language Overlay • Simplifier le CSS – LESS – SCSS• Améliorer la gestion du javascript – Typescript – Coffee Script – DartAttention ! Avoir une bonne vision du code généré est indispensable. #mstechdaysDéveloppeurs
  • 13. YEOMAN Créer un projet prêt à démarrer Créer des composants du projet #mstechdaysDéveloppeurs
  • 14. ARCHITECTURE Choisir une architecture adaptée au Javascript et aux SPA Utiliser des bonnes pratiques / Design Patterns#mstechdaysDéveloppeurs
  • 15. Architecture - base • Modularité • Separation of Concern • MV* • Convention First #mstechdaysDéveloppeurs
  • 16. Architecture – Design Patterns • Performances / Maintenance • Patterns Javascript recommandés – – – – – – – #mstechdaysAMD Promise Singleton Memoization Factory Observer Reusehttp://shichuan.github.io/javascript-patterns/ Développeurs
  • 17. DESIGN PATTERNS Démonstration des différents design patterns avec leur utilité respective #mstechdaysDéveloppeurs
  • 18. LIMITES (À CONTOURNER) Les limites actuelles et comment les contourner#mstechdaysDéveloppeurs
  • 19. Limites actuelles • Taille et Manipulation DOM • Traitement de grandes quantité de données • Empreinte mémoire #mstechdaysDéveloppeurs
  • 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#mstechdaysDéveloppeurs
  • 21. Gestion des ressources • HTML / Style / Javascript • RequireJS – Modularité – Build – Preprocessing#mstechdaysDéveloppeurs
  • 22. Gestion des états (pages) • Cycle de vie • Etats principaux / secondaire#mstechdaysDéveloppeurs
  • 23. Traitement de grande quantité de données • Attention aux fuites mémoire • Ne pas bloquer le thread principal • Décharger la donnée #mstechdaysDéveloppeurs
  • 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 #mstechdaysDéveloppeurs
  • 25. Offline Storage#mstechdaysDéveloppeurs
  • 26. LIMITES ET ASTUCES Cycle de vie Traitement de longues listes Stockage hors-ligne #mstechdaysDéveloppeurs
  • 27. HYBRIDATION Transformer sa SPA en application native#mstechdaysDéveloppeurs
  • 28. Solutions • WebView – Uniquement HTML / Javascript / CSS – Selon les fonctionnalités attendus cela suffit• Solutions Hybride – Apache Cordova • Adobe PhoneGap • Intel XDK • Icenium #mstechdaysDéveloppeurs
  • 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 #mstechdaysDéveloppeurs
  • 30. Apache Cordova CLI • • • •Prepare Preview Build Deploy• Toutes les plateformes avec un même outil • Toutes les plateformes dans un seul dossier#mstechdaysDéveloppeurs
  • 31. Apache Cordova Merges • Styles (indispensable) – Personnaliser le rendu / plateforme – Look’n’Feel Natif• Scripts – Preprocessing (compilation conditionnelle) – Personnaliser les fonctionnalités #mstechdaysDéveloppeurs
  • 32. APACHE CORDOVA Intégrer une SPA dans Cordova Personnaliser le rendu #mstechdaysDéveloppeurs
  • 33. Merci !! • Quelques liens – http://www.html5rocks.com/fr/ – http://addyosmani.com/resources/essentialjsdesignpatt erns/book/ – https://github.com/spatools#mstechdaysDéveloppeurs
  • 34. Digital is business
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

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

    by touchify

    on

    Report

    Category:

    Technology

    Download: 0

    Comment: 0

    560

    views

    Comments

    Description

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

    Transcript

    • 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. 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 !#mstechdaysDéveloppeurs
  • 3. INTRODUCTION Définition Caractéristiques Pourquoi ? #mstechdaysDéveloppeurs
  • 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) #mstechdaysDéveloppeurs
  • 5. Caractéristiques • Application web = HTML / CSS / Javascript • Gestion des états / de l’historique • Utilisation intensive Ajax #mstechdaysDéveloppeurs
  • 6. Cross-Platform Natif AvantagesInconvénients• Performances• Gestion des compétences• Look’n’Feel• Maintenance• Rapidité du développement• Technologies propriétaires#mstechdaysDéveloppeurs
  • 7. Cross-Platform SPA AvantagesInconvénients• « Un seul code »• Performances• Réutilisation des compétences• Navigateurs• Adaptabilité• Debugging#mstechdaysDéveloppeurs
  • 8. PRODUCTIVITÉ Ne pas réinventer la roue Choisir les bonnes librairies Automation #mstechdaysDéveloppeurs
  • 9. Librairies • All in One• Angular • Backbone• Spécialisées• Underscore • KnockoutJS• Framework• Durandal • SPA Tools#mstechdaysDéveloppeurs
  • 10. Automation • Gestion des dépendances • Génération • Test • Scaffolding #mstechdaysDéveloppeurs
  • 11. Yeoman • Bower • Grunt • Generators / Sub Generators #mstechdaysDéveloppeurs
  • 12. Language Overlay • Simplifier le CSS – LESS – SCSS• Améliorer la gestion du javascript – Typescript – Coffee Script – DartAttention ! Avoir une bonne vision du code généré est indispensable. #mstechdaysDéveloppeurs
  • 13. YEOMAN Créer un projet prêt à démarrer Créer des composants du projet #mstechdaysDéveloppeurs
  • 14. ARCHITECTURE Choisir une architecture adaptée au Javascript et aux SPA Utiliser des bonnes pratiques / Design Patterns#mstechdaysDéveloppeurs
  • 15. Architecture - base • Modularité • Separation of Concern • MV* • Convention First #mstechdaysDéveloppeurs
  • 16. Architecture – Design Patterns • Performances / Maintenance • Patterns Javascript recommandés – – – – – – – #mstechdaysAMD Promise Singleton Memoization Factory Observer Reusehttp://shichuan.github.io/javascript-patterns/ Développeurs
  • 17. DESIGN PATTERNS Démonstration des différents design patterns avec leur utilité respective #mstechdaysDéveloppeurs
  • 18. LIMITES (À CONTOURNER) Les limites actuelles et comment les contourner#mstechdaysDéveloppeurs
  • 19. Limites actuelles • Taille et Manipulation DOM • Traitement de grandes quantité de données • Empreinte mémoire #mstechdaysDéveloppeurs
  • 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#mstechdaysDéveloppeurs
  • 21. Gestion des ressources • HTML / Style / Javascript • RequireJS – Modularité – Build – Preprocessing#mstechdaysDéveloppeurs
  • 22. Gestion des états (pages) • Cycle de vie • Etats principaux / secondaire#mstechdaysDéveloppeurs
  • 23. Traitement de grande quantité de données • Attention aux fuites mémoire • Ne pas bloquer le thread principal • Décharger la donnée #mstechdaysDéveloppeurs
  • 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 #mstechdaysDéveloppeurs
  • 25. Offline Storage#mstechdaysDéveloppeurs
  • 26. LIMITES ET ASTUCES Cycle de vie Traitement de longues listes Stockage hors-ligne #mstechdaysDéveloppeurs
  • 27. HYBRIDATION Transformer sa SPA en application native#mstechdaysDéveloppeurs
  • 28. Solutions • WebView – Uniquement HTML / Javascript / CSS – Selon les fonctionnalités attendus cela suffit• Solutions Hybride – Apache Cordova • Adobe PhoneGap • Intel XDK • Icenium #mstechdaysDéveloppeurs
  • 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 #mstechdaysDéveloppeurs
  • 30. Apache Cordova CLI • • • •Prepare Preview Build Deploy• Toutes les plateformes avec un même outil • Toutes les plateformes dans un seul dossier#mstechdaysDéveloppeurs
  • 31. Apache Cordova Merges • Styles (indispensable) – Personnaliser le rendu / plateforme – Look’n’Feel Natif• Scripts – Preprocessing (compilation conditionnelle) – Personnaliser les fonctionnalités #mstechdaysDéveloppeurs
  • 32. APACHE CORDOVA Intégrer une SPA dans Cordova Personnaliser le rendu #mstechdaysDéveloppeurs
  • 33. Merci !! • Quelques liens – http://www.html5rocks.com/fr/ – http://addyosmani.com/resources/essentialjsdesignpatt erns/book/ – https://github.com/spatools#mstechdaysDéveloppeurs
  • 34. Digital is business
  • Fly UP