0
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
Caractéristiques
• Application web = HTML / CSS / Javascript
• Gestion des états / de l’historique
• Utilisation intensive...
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
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
• 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 listes
• Empreinte mémoire
#mstechdays

Développeur...
Manipulation DOM
• N 1 des causes de mauvaises
performances
• Eviter les grosses manipulations
• Décharger ce qui n’est pa...
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
– Application simple
– Aucun besoin de natif

• Solutions Hybride
– Application complexe
– Bridge vers...
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 !

#mstechdays

Développeurs
Annexe 1
• White Sheets
– http://addyosmani.com/resources/essentialjsdesignpatt
erns/book/
– http://developer.yahoo.com/pe...
Annexe 2
• Démo
– http://github.com/spatools/techdays2014

• Slides (version courte)
– http://fr.slideshare.net/Touchify/t...
Digital is
business
Développer une Single Page Application HTML 5 pour tous les devices
Upcoming SlideShare
Loading in...5
×

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

1,150

Published on

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)

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,150
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Qui dans la salle a déjà développé des SPA ?Oui  On passe vite jusqu’au slide 9Non  Vitesse normale
  • Application web dans une seule pageAucun rechargementExpérience utilisateur plus fluideSensation d’utiliser un application pour l’utilisateurHTML / CSS / JavascriptUniquement des technologies web pour le frontLiberté technologique pour le backRester RESTfulGestion des états :Etats fondamentauxNavigation principaleChangement du contenu principalEtats secondairesAJAHAJAXGestion de l’historique :Autoriser la navigation en utilisant le javascriptCycle de vie des pagesGestion du hash de l’urlPrécédent / Suivant_escaped_fragment_AJAX :RESTCORSStockage Offline
  • Ne pas réinventer la roueChoisir des librairies adaptées à ses besoins.Peu de documentation != Peu de solutionsEviter les usines à gazAll in OneSimplifie le démarrage de l’applicationEnfermé dans la logique de la librairieLibrairies spécialiséesUne librairie pour un besoin précisDes librairies plus petitesAttention ! Multiplier les librairies qui accomplissent des tâches similairesExemple : jQuery + PrototypeAugmente l’empreinte mémoire pour rienRisque d’utiliser les deux dans le code (très difficile à maintenir)Attention ! Ne pas maîtriser le résultat des librairies utiliséesExemple : jQuery MobileConcept bloquantUn problème de librairie est quasiment incorrigibleHybrideRéutilise plusieurs librairiesOrganise le code
  • Ne pas tout faire manuellement.Utiliser des outils pour augmenter la productivitéGestion des dépendancesNe jamais gérer ses dépendances manuellementSimplifie la maintenance des dépendancesNuGetVisual StudioWindowsBowerNode.jsSpécialisé webGruntGestionnaire de tâches d’automationServer avec livereloadingBuild / TestPreprocessingÉquivalent de la précompilationExemple YeomanGénérateur de projetGénérateur de composant de projetSimplifier le démarrage et la maintenance d'une application Permet de partir en utilisant de bonnes pratiques et les assurer dans le temps
  • Tags: 0.1.0 Initialization par le générateur Durandal de Yeoman0.1.1  Ajout d’un ViewModel en utilisant un sous-générateur Yeoman0.1.2  Démo LiveReview
  • Langage dynamique non typéFacile de faire n’importe quoiFacilement modulableSeparation of Concern / Modularité Code Spaghetti vs Code RavioliUn module = Une fonction préciseModule principalSous-moduleMV*MVVMMVWMVPConventions vs ConfigurationJavascript love conventionsConfigurations est une étape supplémentaire à interprété
  • Très important pour garder une application maintenable dans le tempsPermet d’adopter un schéma stricte et performant
  • Tags:0.2.0  Préparation de la démo0.2.1  Ajout des exemples0.2.2  Correction erreurs page Promise
  • Taille et Manipulation du DOMN°1 de la cause de mauvaise performance selon jsperf.comImpose une réelle gestion du DOMTraitementEviter de bloquer le thread principalPrivilégier la délégationEmpreinte mémoireDécharger la données inutileDécharger le DOM
  • Le DOM est la manipulation la moins performante du HTML5 et Javascript.Minimiser sa charge en traitant des petites quantités d’informations.N°1 de la cause de mauvaise performance selon jsperf.comManipulation de grande quantitéNe jamais manipuler ni laisser de grande quantité d’élément dans le DOMEnormément de DOM généré en même temps = CRRRRRRRRChainer le chargement (10 puis 10 puis 10…)Infinite List LoadingChargement de la suite de la liste lorsque le scroll arrive à la fin.Selon la taille, décharger le début de la listeDéchargerConcepts des jeux vidéosMettre en cache le DOM qui est souvent réutiliséCharger le DOM à la demandeNe jamaisprécharger tout le DOM de votre application (non scalable)ExternalTemplatingRequire.JS Text Plugin
  • Cycle de vie :Activation => ChargementDésactivation => Déchargement (si possible)Etats principaux / secondairePrincipal = page / navigationSecondaire = bloc / sous-partie / réaction (affichage d’erreur, message de confirmation…)Principal gère secondaireSecondaire peut être un module à part entière avec son cycle de vie
  • Le javascript n’aime pas les grosses listes d’objetsFuites mémoireDécharger les objets de tous les SingletonDétacher les objets non-Singleton pouvant contenir des entitésTraitementsetTimeout + chainingWebWorkersDécharger la donnéeEviter de conserver la données en mémoireStocker en cache la données inutile à l’instant T
  • Pourquoi stocker les données de manière hors-ligne ?Quelle solution utilisée ?Donnée importanteAu démarrage de l’applicationEviter des chargementSurchargeEmpreinte mémoireStocke grande liste puis traite par blocEvite de charger vos tableaux / dictionnaires d’objet.Stocke les données non utiles à l’instant T.Librairies de traitement de donnéesAmplifyJSBreezeSPA ToolsMultiple technologiesDans l’ordre de traitementIndexedDBWebSQLLocalStorageCookie (Wow !! Optionel)Cet ordre d’exécution est établi en fonction des :Spécifications du W3CPerformancesMaintenabilitéIndexedDB => LocalStorage (shim pour WebSQL)
  • Tags :0.3.0  Préparation de la démo0.3.1  Présentations des exemples
  • WebViewUniquement HTML / Javascript / CSSSelon les fonctionnalités attendus cela suffitSolutions HybridesApache CordovaDérivés :Adobe PhoneGapIntel XDKIceniumBridge :Accès aux fonctions native du téléphoneDéléguer des tâches complexes au code natif
  • Spécifiques par plateformeRemplace les fichiers de votre code pour une plateforme spécifiqueStylesScriptsPreprocessingcompilation conditionnellePermet d’exécuter du code sur une plateforme spécifique ou dans un état spécifiqueUtiliser des fonctions systèmes uniquement accessible sur une plateforme
  • Tags :0.4.0  Initialisation du projectCordova0.4.1  Ajout du préprocessing pour Cordova0.4.2  Ajout du préprocessing pour Window80.4.3  Intégration poussée0.4.4  Intégration poussée Windows8
  • Transcript of "Développer une Single Page Application HTML 5 pour tous les devices "

    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. Caractéristiques • Application web = HTML / CSS / Javascript • Gestion des états / de l’historique • Utilisation intensive Ajax #mstechdays Développeurs
    5. 5. PRODUCTIVITÉ Ne pas réinventer la roue Choisir les bonnes librairies Automation #mstechdays Développeurs
    6. 6. Librairies • All in One • Angular • Backbone • Spécialisées • Underscore • KnockoutJS • Framework • Durandal • SPA Tools #mstechdays Développeurs
    7. 7. Automation • Gestion des dépendances • Génération / Test • Scaffolding #mstechdays Développeurs
    8. 8. YEOMAN Créer un projet prêt à démarrer Créer des composants du projet #mstechdays Développeurs
    9. 9. ARCHITECTURE Choisir une architecture adaptée au Javascript et aux SPA Utiliser des bonnes pratiques / Design Patterns #mstechdays Développeurs
    10. 10. Architecture - base • Separation of Concern • MV* • Convention First #mstechdays Développeurs
    11. 11. 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
    12. 12. DESIGN PATTERNS Démonstration des différents design patterns avec leur utilité respective #mstechdays Développeurs
    13. 13. LIMITES (À CONTOURNER) Les limites actuelles et comment les contourner #mstechdays Développeurs
    14. 14. Limites actuelles • Taille et Manipulation DOM • Traitement de grandes listes • Empreinte mémoire #mstechdays Développeurs
    15. 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 #mstechdays Développeurs
    16. 16. Gestion des états (pages) • Cycle de vie • Etats principaux / secondaire #mstechdays Développeurs
    17. 17. 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
    18. 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 #mstechdays Développeurs
    19. 19. Offline Storage #mstechdays Développeurs
    20. 20. LIMITES ET ASTUCES Cycle de vie Traitement de longues listes Stockage hors-ligne #mstechdays Développeurs
    21. 21. HYBRIDATION Transformer sa SPA en application native #mstechdays Développeurs
    22. 22. Solutions • WebView – Application simple – Aucun besoin de natif • Solutions Hybride – Application complexe – Bridge vers code natif #mstechdays Développeurs
    23. 23. 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
    24. 24. Apache Cordova Merges • Styles (indispensable) – Personnaliser le rendu / plateforme – Look’n’Feel Natif • Scripts – Preprocessing (compilation conditionnelle) – Personnaliser les fonctionnalités #mstechdays Développeurs
    25. 25. APACHE CORDOVA Intégrer une SPA dans Cordova Personnaliser le rendu #mstechdays Développeurs
    26. 26. MERCI ! #mstechdays Développeurs
    27. 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 #mstechdays Développeurs
    28. 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 #mstechdays Développeurs
    29. 29. Digital is business
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×