TechDays - Développer une single page application HTML5 - Version longue
1.
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
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
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
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
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
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
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 ?
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
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é 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
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
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 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é
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 exemples
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
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)
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
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ée