• 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. Caractéristiques • Application web = HTML / CSS / Javascript • Gestion des états / de l’historique • Utilisation intensive Ajax #mstechdaysDéveloppeurs
  • 5. PRODUCTIVITÉ Ne pas réinventer la roue Choisir les bonnes librairies Automation #mstechdaysDéveloppeurs
  • 6. Librairies • All in One• Angular • Backbone• Spécialisées• Underscore • KnockoutJS• Framework• Durandal • SPA Tools#mstechdaysDéveloppeurs
  • 7. Automation • Gestion des dépendances • Génération / Test • Scaffolding #mstechdaysDéveloppeurs
  • 8. YEOMAN Créer un projet prêt à démarrer Créer des composants du projet #mstechdaysDéveloppeurs
  • 9. ARCHITECTURE Choisir une architecture adaptée au Javascript et aux SPA Utiliser des bonnes pratiques / Design Patterns#mstechdaysDéveloppeurs
  • 10. Architecture - base • Separation of Concern • MV* • Convention First #mstechdaysDéveloppeurs
  • 11. Architecture – Design Patterns • Performances / Maintenance • Patterns Javascript recommandés – – – – – – – #mstechdaysAMD Promise Singleton Memoization Factory Observer Reusehttp://shichuan.github.io/javascript-patterns/ Développeurs
  • 12. DESIGN PATTERNS Démonstration des différents design patterns avec leur utilité respective #mstechdaysDéveloppeurs
  • 13. LIMITES (À CONTOURNER) Les limites actuelles et comment les contourner#mstechdaysDéveloppeurs
  • 14. Limites actuelles • Taille et Manipulation DOM • Traitement de grandes listes • Empreinte mémoire #mstechdaysDéveloppeurs
  • 15. 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
  • 16. Gestion des états (pages) • Cycle de vie • Etats principaux / secondaire#mstechdaysDéveloppeurs
  • 17. 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
  • 18. Offline Storage • Garder la donnée importante pour un accès rapide • Evite la surcharge mémoire• Utiliser des librairies adaptées • Multiple technologies / Failback #mstechdaysDéveloppeurs
  • 19. Offline Storage#mstechdaysDéveloppeurs
  • 20. LIMITES ET ASTUCES Cycle de vie Traitement de longues listes Stockage hors-ligne #mstechdaysDéveloppeurs
  • 21. HYBRIDATION Transformer sa SPA en application native#mstechdaysDéveloppeurs
  • 22. Solutions • WebView – Application simple – Aucun besoin de natif• Solutions Hybride – Application complexe – Bridge vers code natif #mstechdaysDéveloppeurs
  • 23. Apache Cordova CLI • • • •Prepare Preview Build Deploy• Toutes les plateformes avec un même outil • Toutes les plateformes dans un seul dossier#mstechdaysDéveloppeurs
  • 24. Apache Cordova Merges • Styles (indispensable) – Personnaliser le rendu / plateforme – Look’n’Feel Natif• Scripts – Preprocessing (compilation conditionnelle) – Personnaliser les fonctionnalités #mstechdaysDéveloppeurs
  • 25. APACHE CORDOVA Intégrer une SPA dans Cordova Personnaliser le rendu #mstechdaysDéveloppeurs
  • 26. MERCI !#mstechdaysDéveloppeurs
  • 27. Annexe 1 • White Sheets – http://addyosmani.com/resources/essentialjsdesignpatt erns/book/ – http://developer.yahoo.com/performance/rules.html• Find info and source – http://www.html5rocks.com/fr/ – http://microjs.com/ – https://github.com/spatools #mstechdaysDéveloppeurs
  • 28. Annexe 2 • Démo – http://github.com/spatools/techdays2014• Slides (version courte) – http://fr.slideshare.net/Touchify/techdays-dvelopper-unesingle-page-application-html5-version-courte• Slides (version longue) – http://fr.slideshare.net/Touchify/techdays-dvelopper-unesingle-page-application-html5 #mstechdaysDéveloppeurs
  • 29. 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.
    ...

    Développer une Single Page Application HTML 5 pour tous les devices

    by microsoft-developpeurs

    on

    Report

    Category:

    Technology

    Download: 0

    Comment: 0

    1,074

    views

    Comments

    Description

    Durant cette session, vous verrez comment développer une application HTML 5 complexe à destination des navigateurs, tablettes et autres téléphones. Quels sont les pièges à éviter ? quelle architecture, design pattern ? Quels outils utiliser ? Bonnes pratiques ? Toutes ces questions seront abordées dans cette session. Une démonstration sera le fil rouge.

    Speakers : Maxime LUCE (Touch it)
    Download Développer une Single Page Application HTML 5 pour tous les devices

    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. Caractéristiques • Application web = HTML / CSS / Javascript • Gestion des états / de l’historique • Utilisation intensive Ajax #mstechdaysDéveloppeurs
  • 5. PRODUCTIVITÉ Ne pas réinventer la roue Choisir les bonnes librairies Automation #mstechdaysDéveloppeurs
  • 6. Librairies • All in One• Angular • Backbone• Spécialisées• Underscore • KnockoutJS• Framework• Durandal • SPA Tools#mstechdaysDéveloppeurs
  • 7. Automation • Gestion des dépendances • Génération / Test • Scaffolding #mstechdaysDéveloppeurs
  • 8. YEOMAN Créer un projet prêt à démarrer Créer des composants du projet #mstechdaysDéveloppeurs
  • 9. ARCHITECTURE Choisir une architecture adaptée au Javascript et aux SPA Utiliser des bonnes pratiques / Design Patterns#mstechdaysDéveloppeurs
  • 10. Architecture - base • Separation of Concern • MV* • Convention First #mstechdaysDéveloppeurs
  • 11. Architecture – Design Patterns • Performances / Maintenance • Patterns Javascript recommandés – – – – – – – #mstechdaysAMD Promise Singleton Memoization Factory Observer Reusehttp://shichuan.github.io/javascript-patterns/ Développeurs
  • 12. DESIGN PATTERNS Démonstration des différents design patterns avec leur utilité respective #mstechdaysDéveloppeurs
  • 13. LIMITES (À CONTOURNER) Les limites actuelles et comment les contourner#mstechdaysDéveloppeurs
  • 14. Limites actuelles • Taille et Manipulation DOM • Traitement de grandes listes • Empreinte mémoire #mstechdaysDéveloppeurs
  • 15. 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
  • 16. Gestion des états (pages) • Cycle de vie • Etats principaux / secondaire#mstechdaysDéveloppeurs
  • 17. 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
  • 18. Offline Storage • Garder la donnée importante pour un accès rapide • Evite la surcharge mémoire• Utiliser des librairies adaptées • Multiple technologies / Failback #mstechdaysDéveloppeurs
  • 19. Offline Storage#mstechdaysDéveloppeurs
  • 20. LIMITES ET ASTUCES Cycle de vie Traitement de longues listes Stockage hors-ligne #mstechdaysDéveloppeurs
  • 21. HYBRIDATION Transformer sa SPA en application native#mstechdaysDéveloppeurs
  • 22. Solutions • WebView – Application simple – Aucun besoin de natif• Solutions Hybride – Application complexe – Bridge vers code natif #mstechdaysDéveloppeurs
  • 23. Apache Cordova CLI • • • •Prepare Preview Build Deploy• Toutes les plateformes avec un même outil • Toutes les plateformes dans un seul dossier#mstechdaysDéveloppeurs
  • 24. Apache Cordova Merges • Styles (indispensable) – Personnaliser le rendu / plateforme – Look’n’Feel Natif• Scripts – Preprocessing (compilation conditionnelle) – Personnaliser les fonctionnalités #mstechdaysDéveloppeurs
  • 25. APACHE CORDOVA Intégrer une SPA dans Cordova Personnaliser le rendu #mstechdaysDéveloppeurs
  • 26. MERCI !#mstechdaysDéveloppeurs
  • 27. Annexe 1 • White Sheets – http://addyosmani.com/resources/essentialjsdesignpatt erns/book/ – http://developer.yahoo.com/performance/rules.html• Find info and source – http://www.html5rocks.com/fr/ – http://microjs.com/ – https://github.com/spatools #mstechdaysDéveloppeurs
  • 28. Annexe 2 • Démo – http://github.com/spatools/techdays2014• Slides (version courte) – http://fr.slideshare.net/Touchify/techdays-dvelopper-unesingle-page-application-html5-version-courte• Slides (version longue) – http://fr.slideshare.net/Touchify/techdays-dvelopper-unesingle-page-application-html5 #mstechdaysDéveloppeurs
  • 29. Digital is business
  • Fly UP