2. Développer une SPA pour
tous les devices
Maxime LUCE
Fondateur
Touch it
maxime@touchit.fr
http://touchit.fr
@Touchit_App
Développeurs

3. 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

4. INTRODUCTION
Définition
Caractéristiques
Pourquoi ?
#mstechdays
Développeurs

5. 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

6. Caractéristiques
• Application web = HTML / CSS / Javascript
• Gestion des états / de l’historique
• Utilisation intensive Ajax
#mstechdays
Développeurs

7. 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

8. Cross-Platform SPA
Avantages
Inconvénients
• « Un seul code »
• Performances
• Réutilisation des compétences
• Navigateurs
• Adaptabilité
• Debugging
#mstechdays
Développeurs

9. PRODUCTIVITÉ
Ne pas réinventer la roue
Choisir les bonnes librairies
Automation
#mstechdays
Développeurs

10. Librairies
• All in One
• Angular
• Backbone
• Spécialisées
• Underscore
• KnockoutJS
• Framework
• Durandal
• SPA Tools
#mstechdays
Développeurs

11. Automation
• Gestion des dépendances
• Génération
• Test
• Scaffolding
#mstechdays
Développeurs

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

13. 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

14. YEOMAN
Créer un projet prêt à démarrer
Créer des composants du projet
#mstechdays
Développeurs

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

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

17. 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

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

19. LIMITES (À CONTOURNER)
Les limites actuelles et comment les contourner
#mstechdays
Développeurs

20. Limites actuelles
• Taille et Manipulation DOM
• Traitement de grandes quantité de données
• Empreinte mémoire
#mstechdays
Développeurs

21. 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

22. Gestion des ressources
• HTML / Style / Javascript
• RequireJS
– Modularité
– Build
– Preprocessing
#mstechdays
Développeurs

23. Gestion des états (pages)
• Cycle de vie
• Etats principaux / secondaire
#mstechdays
Développeurs

24. 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

25. 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

26. Offline Storage
#mstechdays
Développeurs

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

28. HYBRIDATION
Transformer sa SPA en application native
#mstechdays
Développeurs

29. 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

30. 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

31. 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

32. Apache Cordova Merges
• Styles (indispensable)
– Personnaliser le rendu / plateforme
– Look’n’Feel Natif
• Scripts
– Preprocessing (compilation conditionnelle)
– Personnaliser les fonctionnalités
#mstechdays
Développeurs

33. APACHE CORDOVA
Intégrer une SPA dans Cordova
Personnaliser le rendu
#mstechdays
Développeurs

34. MERCI !
#mstechdays
Développeurs

35. 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
#mstechdays
Développeurs

36. 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
#mstechdays
Développeurs

37. Digital is
business