SlideShare une entreprise Scribd logo
Développer une SPA pour
tous les devices
Maxime LUCE
Fondateur
Touch it
maxime@touchit.fr
http://touchit.fr
@Touchit_App
Développeurs
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
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 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
Caractéristiques
• Application web = HTML / CSS / Javascript
• Gestion des états / de l’historique
• Utilisation intensive Ajax
#mstechdays

Développeurs
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
Cross-Platform SPA
Avantages

Inconvénients

• « Un seul code »

• Performances

• Réutilisation des compétences

• Navigateurs

• Adaptabilité

• Debugging

#mstechdays

Développeurs
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 Tools

#mstechdays

Développeurs
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
– Dart

Attention ! Avoir une bonne vision du code généré
est indispensable.
#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

#mstechdays

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

Développeurs
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
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

Développeurs
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
Gestion des ressources
• HTML / Style / Javascript
• RequireJS
– Modularité
– Build
– Preprocessing

#mstechdays

Développeurs
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 la donnée
#mstechdays

Développeurs
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
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 Hybride
– Apache Cordova
• Adobe PhoneGap
• Intel XDK
• Icenium
#mstechdays

Développeurs
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
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
Apache Cordova Merges
• Styles (indispensable)
– Personnaliser le rendu / plateforme
– Look’n’Feel Natif

• Scripts
– Preprocessing (compilation conditionnelle)
– Personnaliser les fonctionnalités
#mstechdays

Développeurs
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/book/
– https://github.com/spatools

#mstechdays

Développeurs
Digital is
business

Contenu connexe

En vedette

Gazette 1er juin
Gazette 1er juinGazette 1er juin
Gazette 1er juin
uralys
 
Note de position inter-associative pour la COP20
Note de position inter-associative pour la COP20Note de position inter-associative pour la COP20
Note de position inter-associative pour la COP20
RAC-F
 
Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...
Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...
Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...
Bertille Laudoux
 
Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...
Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...
Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...
MyScienceWork
 
La Fiscalité des Sociétés de personnes Raphael Barchichat Tax
La Fiscalité des Sociétés de personnes Raphael Barchichat TaxLa Fiscalité des Sociétés de personnes Raphael Barchichat Tax
La Fiscalité des Sociétés de personnes Raphael Barchichat TaxRaphael Barchichat LLM, JD, LLM Tax
 
La gaité lyrique
La gaité lyriqueLa gaité lyrique
La gaité lyrique
cyriellebulle
 
Trabajo de tecnología: noticia en Francés
Trabajo de tecnología: noticia en FrancésTrabajo de tecnología: noticia en Francés
Trabajo de tecnología: noticia en FrancésMariateresssa
 
Colònies
ColòniesColònies
Colònies
Catalinaribas
 
Carta als reis 2013 (1r)
Carta als reis 2013 (1r)Carta als reis 2013 (1r)
Carta als reis 2013 (1r)
escolamariamanent
 
Vibrations au poste de travail - approche expérimentale des incertitudes de m...
Vibrations au poste de travail - approche expérimentale des incertitudes de m...Vibrations au poste de travail - approche expérimentale des incertitudes de m...
Vibrations au poste de travail - approche expérimentale des incertitudes de m...
Gamba Acoustique, une équipe pluridisciplinaire spécialiste de l'environnement sonore
 
obsolescence programée
obsolescence programéeobsolescence programée
obsolescence programée
Abderrafie EL Hilali
 
Afrique de l’ouest:eau douce
Afrique de l’ouest:eau douceAfrique de l’ouest:eau douce
Afrique de l’ouest:eau doucesylvestm08
 
Comment rédiger son rapport de stage
Comment rédiger son rapport de stageComment rédiger son rapport de stage
Comment rédiger son rapport de stage
Papa Madiop Ndiaye
 
Facebook administrateur
Facebook administrateurFacebook administrateur
Facebook administrateurDoublet-fr
 
Journée ASIT VD 2014 - session 1
Journée ASIT VD 2014 - session 1Journée ASIT VD 2014 - session 1
Conf femmessciences ajaccio_k_allegraud
Conf femmessciences ajaccio_k_allegraudConf femmessciences ajaccio_k_allegraud
Conf femmessciences ajaccio_k_allegraudkat1981
 

En vedette (20)

Gazette 1er juin
Gazette 1er juinGazette 1er juin
Gazette 1er juin
 
Note de position inter-associative pour la COP20
Note de position inter-associative pour la COP20Note de position inter-associative pour la COP20
Note de position inter-associative pour la COP20
 
Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...
Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...
Cio insight-article-2015-l'informatique cherche à se simplifier pour mieux ré...
 
Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...
Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...
Introduction à l’OPEN ACCESS Tout ce que vous avez toujours voulu savoir à pr...
 
La Fiscalité des Sociétés de personnes Raphael Barchichat Tax
La Fiscalité des Sociétés de personnes Raphael Barchichat TaxLa Fiscalité des Sociétés de personnes Raphael Barchichat Tax
La Fiscalité des Sociétés de personnes Raphael Barchichat Tax
 
Pr rooms
Pr roomsPr rooms
Pr rooms
 
La gaité lyrique
La gaité lyriqueLa gaité lyrique
La gaité lyrique
 
01
0101
01
 
Trabajo de tecnología: noticia en Francés
Trabajo de tecnología: noticia en FrancésTrabajo de tecnología: noticia en Francés
Trabajo de tecnología: noticia en Francés
 
Colònies
ColòniesColònies
Colònies
 
Triqui
TriquiTriqui
Triqui
 
Carta als reis 2013 (1r)
Carta als reis 2013 (1r)Carta als reis 2013 (1r)
Carta als reis 2013 (1r)
 
Vibrations au poste de travail - approche expérimentale des incertitudes de m...
Vibrations au poste de travail - approche expérimentale des incertitudes de m...Vibrations au poste de travail - approche expérimentale des incertitudes de m...
Vibrations au poste de travail - approche expérimentale des incertitudes de m...
 
obsolescence programée
obsolescence programéeobsolescence programée
obsolescence programée
 
Afrique de l’ouest:eau douce
Afrique de l’ouest:eau douceAfrique de l’ouest:eau douce
Afrique de l’ouest:eau douce
 
Comment rédiger son rapport de stage
Comment rédiger son rapport de stageComment rédiger son rapport de stage
Comment rédiger son rapport de stage
 
Les faux prophetes
Les faux prophetesLes faux prophetes
Les faux prophetes
 
Facebook administrateur
Facebook administrateurFacebook administrateur
Facebook administrateur
 
Journée ASIT VD 2014 - session 1
Journée ASIT VD 2014 - session 1Journée ASIT VD 2014 - session 1
Journée ASIT VD 2014 - session 1
 
Conf femmessciences ajaccio_k_allegraud
Conf femmessciences ajaccio_k_allegraudConf femmessciences ajaccio_k_allegraud
Conf femmessciences ajaccio_k_allegraud
 

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

10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJS
Microsoft
 
Tout sur les SPA
Tout sur les SPATout sur les SPA
Tout sur les SPA
Microsoft
 
Introduction au développement Windows 8.1
Introduction au développement Windows 8.1Introduction au développement Windows 8.1
Introduction au développement Windows 8.1
Microsoft
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Microsoft
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en action
Microsoft
 
Deep Dive WinJS – Profitez à 100% de son potentiel
Deep Dive WinJS – Profitez à 100% de son potentielDeep Dive WinJS – Profitez à 100% de son potentiel
Deep Dive WinJS – Profitez à 100% de son potentiel
Microsoft
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Cellenza
 
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...
Microsoft
 
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Microsoft
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Stéphanie Hertrich
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
Ippon
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
davrous
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
ekino
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
michael_bailly
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
Microsoft
 
Panel de solutions javascript
Panel de solutions javascriptPanel de solutions javascript
Panel de solutions javascript
jp_mouton
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdf
ghiz-
 

Similaire à TechDays - Développer une single page application HTML5 - Version longue (20)

10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJS
 
Tout sur les SPA
Tout sur les SPATout sur les SPA
Tout sur les SPA
 
Introduction au développement Windows 8.1
Introduction au développement Windows 8.1Introduction au développement Windows 8.1
Introduction au développement Windows 8.1
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en action
 
Deep Dive WinJS – Profitez à 100% de son potentiel
Deep Dive WinJS – Profitez à 100% de son potentielDeep Dive WinJS – Profitez à 100% de son potentiel
Deep Dive WinJS – Profitez à 100% de son potentiel
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...
HTML5, JavaScript et CSS3: Concevoir des interfaces tactiles à destination de...
 
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
 
Panel de solutions javascript
Panel de solutions javascriptPanel de solutions javascript
Panel de solutions javascript
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdf
 

Dernier

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 

Dernier (6)

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 

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

Notes de l'éditeur

  1. Qui dans la salle a déjà développé des SPA ?Oui  On passe vite jusqu’au slide 9Non  Vitesse normale
  2. 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
  3. 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 ?
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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é
  10. Très important pour garder une application maintenable dans le tempsPermet d’adopter un schéma stricte et performant
  11. Tags:0.2.0  Préparation de la démo0.2.1  Ajout des exemples
  12. 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
  13. 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
  14. 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)
  15. 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
  16. 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
  17. 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)
  18. Tags :0.3.0  Préparation de la démo0.3.1  Présentations des exemples
  19. 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
  20. 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