Téléchargé 47 fois
Téléchargé parTouchify
TechDays - Développer une single page application HTML5 - Version courte
Le document traite du développement d'applications web monopage (SPA) pour différents appareils, en décrivant leurs caractéristiques, avantages et inconvénients. Il aborde également des sujets tels que la gestion de ressources, les bibliothèques utiles, les modèles de conception, et l'hybridation avec des technologies comme Apache Cordova. Des limites de performance et des astuces pour les contourner sont également discutées.
TechDays - Développer une single page application HTML5 - Version courte
- 2. Développer une SPApour 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.
- 5. Définition « Une applicationweb 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éinventerla roue Choisir les bonnes librairies Automation #mstechdays Développeurs
- 10. Librairies • All inOne • Angular • Backbone • Spécialisées • Underscore • KnockoutJS • Framework • Durandal • SPA Tools #mstechdays Développeurs
- 11. Automation • Gestion desdépendances • Génération • Test • Scaffolding #mstechdays Développeurs
- 12. Yeoman • Bower • Grunt •Generators / Sub Generators #mstechdays Développeurs
- 13. Language Overlay • Simplifierle 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 projetprêt à démarrer Créer des composants du projet #mstechdays Développeurs
- 15. ARCHITECTURE Choisir une architectureadapté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 – DesignPatterns • 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 desdifférents design patterns avec leur utilité respective #mstechdays Développeurs
- 19. LIMITES (À CONTOURNER) Leslimites actuelles et comment les contourner #mstechdays Développeurs
- 20. Limites actuelles • Tailleet Manipulation DOM • Traitement de grandes quantité de données • Empreinte mémoire #mstechdays Développeurs
- 21. Manipulation DOM • N1 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 grandequantité 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 • Garderla 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.
- 27. LIMITES ET ASTUCES Cyclede vie Traitement de longues listes Stockage hors-ligne #mstechdays Développeurs
- 28. HYBRIDATION Transformer sa SPAen application native #mstechdays Développeurs
- 29. Solutions • WebView – UniquementHTML / 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 uneSPA dans Cordova Personnaliser le rendu #mstechdays Développeurs
- 34.
- 35. Annexe 1 • WhiteSheets – 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.
Notes de l'éditeur
- #5 Qui dans la salle a déjà développé des SPA ?Oui On passe vite jusqu’au slide 9Non Vitesse normale
- #7 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
- #8 Performances Code compiléAdaptée à la plateformeLook’n’FeelStyle automatiqueContrôles spécifiquesRapidité du développementOutils spécialisésLibrairies adaptéesMaintenance / Gestion des compétencesUn code par plateformeTechnologies propriétairesPeu de contrôle sur le renduQue se passe-t-il quand ça ne marche pas ?
- #9 Un seul codeMarche dans le navigateurS’intègre dans la WebViewFacilite la maintenanceAttention ! Cross-Platform = Cross-BrowserNe pas tester sur un seul navigateur (surprises à l’arrivé)Réutilisation des compétencesMême compétences pour toutes les plateformesJavascript / HTML / CSS connu de tousAttention ! Pas pareil non plus !AdaptabilitéLejavascript est extrêmement modulablePossibilité d’adapter l’application à la plateforme cibléePerformancesJavascriptOne ThreadArchitectureNavigateursChaque navigateurs est différentCross Platform is Cross BrowserSEO / AdsDebuggingRemotedebuggingParfois complexe à mettre en place
- #11 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
- #12 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é webGénérationRequire.jsUglify2ClosureTestPhantomJSqUnitPhantomJSScaffoldingSimplifier le démarrage et la maintenance d'une application Automatiser la création de composant d'applicationYeomanGrunt JSGestionnaire de tâches d’automationServer avec livereloadingTestPhantomJSqUnitPhantomJSBuildPreprocessingÉquivalent de la précompilationExemple
- #13 GruntGestionnaire de tâches d’automationServer avec livereloadingBuild / TestYeomanGénérateur de projetGénérateur de composant de projetPermet de partir en utilisant de bonnes pratiques et les assurer dans le temps
- #15 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
- #17 Langage dynamique non typéFacile de faire n’importe quoiFacilement modulableModularité Code Spaghetti vs Code RavioliUn module = Une fonction préciseModule principalSous-moduleMV*MVVMMVWMVPConventions vs ConfigurationJavascript love conventionsConfigurations est une étape supplémentaire à interprété
- #18 Très important pour garder une application maintenable dans le tempsPermet d’adopter un schéma stricte et performant
- #19 Tags:0.2.0 Préparation de la démo0.2.1 Ajout des exemples
- #21 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
- #22 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
- #23 2 choixPré-charger toutes les ressources au démarrage (Full-Load)Charger les ressources dynamiquement (DynamicLoad)Si vous souhaitez une SPA scalable, éviter le full loading.RequireJSGère les dépendances modulairePlugin Text pour HTMLPlugin CSS pour CSS (https://github.com/guybedford/require-css)Plugin Preloader pour Image (https://github.com/millermedeiros/requirejs-plugins)
- #24 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
- #25 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
- #26 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)
- #28 Tags :0.3.0 Préparation de la démo0.3.1 Présentations des exemples
- #33 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
- #34 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ée