Développer une SPA pour
tous les devices
Maxime LUCE
Fondateur
Touch it
maxime@touchit.fr
http://touchit.fr
@Touchit_App
D...
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!...
INTRODUCTION
Définition
Caractéristiques
Pourquoi ?
#mstechdays

Développeurs
Définition
« Une application web monopage (en anglais
single-page application ou SPA) est une application
web accessible v...
Caractéristiques
• Application web = HTML / CSS / Javascript
• Gestion des états / de l’historique
• Utilisation intensive...
Cross-Platform Natif
Avantages

Inconvénients

• Performances

• Gestion des compétences

• Look’n’Feel

• Maintenance

• ...
Cross-Platform SPA
Avantages

Inconvénients

• « Un seul code »

• Performances

• Réutilisation des compétences

• Naviga...
PRODUCTIVITÉ
Ne pas réinventer la roue
Choisir les bonnes librairies
Automation
#mstechdays

Développeurs
Librairies
• All in One

• Angular
• Backbone

• Spécialisées

• Underscore
• KnockoutJS

• Framework

• Durandal
• SPA To...
Automation
• Gestion des dépendances
• Génération
• Test
• Scaffolding
#mstechdays

Développeurs
Yeoman
• Bower
• Grunt
• Generators / Sub Generators
#mstechdays

Développeurs
Language Overlay
• Simplifier le CSS
– LESS
– SCSS

• Améliorer la gestion du javascript
– Typescript
– Coffee Script
– Da...
YEOMAN
Créer un projet prêt à démarrer
Créer des composants du projet
#mstechdays

Développeurs
ARCHITECTURE
Choisir une architecture adaptée au Javascript et aux SPA
Utiliser des bonnes pratiques / Design Patterns

#m...
Architecture - base
• Modularité
• Separation of Concern
• MV*
• Convention First
#mstechdays

Développeurs
Architecture – Design Patterns
• Performances / Maintenance
• Patterns Javascript recommandés
–
–
–
–
–
–
–
#mstechdays

A...
DESIGN PATTERNS
Démonstration des différents design patterns
avec leur utilité respective
#mstechdays

Développeurs
LIMITES (À CONTOURNER)
Les limites actuelles et comment les contourner

#mstechdays

Développeurs
Limites actuelles
• Taille et Manipulation DOM
• Traitement de grandes quantité de données
• Empreinte mémoire
#mstechdays...
Manipulation DOM
• N 1 des causes de mauvaises
performances
• Eviter les grosses manipulations
• Décharger ce qui n’est pa...
Gestion des ressources
• HTML / Style / Javascript
• RequireJS
– Modularité
– Build
– Preprocessing

#mstechdays

Développ...
Gestion des états (pages)
• Cycle de vie
• Etats principaux / secondaire

#mstechdays

Développeurs
Traitement de grande quantité de données
• Attention aux fuites mémoire
• Ne pas bloquer le thread principal
• Décharger l...
Offline Storage
• Garder la donnée importante pour un accès
rapide
• Evite la surcharge mémoire

• Utiliser des librairies...
Offline Storage

#mstechdays

Développeurs
LIMITES ET ASTUCES
Cycle de vie
Traitement de longues listes
Stockage hors-ligne
#mstechdays

Développeurs
HYBRIDATION
Transformer sa SPA en application native

#mstechdays

Développeurs
Solutions
• WebView
– Uniquement HTML / Javascript / CSS
– Selon les fonctionnalités attendus cela suffit

• Solutions Hyb...
Apache Cordova
• WebView
– Héberge la SPA
– Navigateur par défaut

• Bridge vers code natif
– Accès aux fonctions native d...
Apache Cordova CLI
•
•
•
•

Prepare
Preview
Build
Deploy

• Toutes les plateformes avec un même outil
• Toutes les platefo...
Apache Cordova Merges
• Styles (indispensable)
– Personnaliser le rendu / plateforme
– Look’n’Feel Natif

• Scripts
– Prep...
APACHE CORDOVA
Intégrer une SPA dans Cordova
Personnaliser le rendu
#mstechdays

Développeurs
Merci !!
• Quelques liens
– http://www.html5rocks.com/fr/
– http://addyosmani.com/resources/essentialjsdesignpatt
erns/boo...
Digital is
business
TechDays - Développer une single page application HTML5 - Version longue
Prochain SlideShare
Chargement dans…5
×

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

1 147 vues

Publié le

Publié dans : Technologie
  • Soyez le premier à commenter

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

×