techdays - développer une single page application html5 - version courte
TRANSCRIPT
![Page 1: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/1.jpg)
![Page 2: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/2.jpg)
Développeurs
Développer une SPA pour tous les devices
Maxime LUCEFondateur
Touch it
[email protected]://touchit.fr
@Touchit_App
![Page 3: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/3.jpg)
Développeurs#mstechdays
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 !
Donnez votre avis !
![Page 4: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/4.jpg)
Développeurs#mstechdays
INTRODUCTION
DéfinitionCaractéristiquesPourquoi ?
![Page 5: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/5.jpg)
Développeurs#mstechdays
« 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)
Définition
![Page 6: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/6.jpg)
Développeurs#mstechdays
• Application web = HTML / CSS / Javascript
• Gestion des états / de l’historique
• Utilisation intensive Ajax
Caractéristiques
![Page 7: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/7.jpg)
Développeurs#mstechdays
Avantages
• Performances
• Look’n’Feel
• Rapidité du développement
Inconvénients
• Gestion des compétences
• Maintenance
• Technologies propriétaires
Cross-Platform Natif
![Page 8: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/8.jpg)
Développeurs#mstechdays
Avantages
• « Un seul code »
• Réutilisation des compétences
• Adaptabilité
Inconvénients
• Performances
• Navigateurs
• Debugging
Cross-Platform SPA
![Page 9: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/9.jpg)
Développeurs#mstechdays
PRODUCTIVITÉ
Ne pas réinventer la roueChoisir les bonnes librairiesAutomation
![Page 10: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/10.jpg)
Développeurs#mstechdays
• All in One• Angular• Backbone
• Spécialisées• Underscore• KnockoutJS
• Framework • Durandal• SPA Tools
Librairies
![Page 11: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/11.jpg)
Développeurs#mstechdays
• Gestion des dépendances
• Génération
• Test
• Scaffolding
Automation
![Page 12: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/12.jpg)
Développeurs#mstechdays
• Bower
• Grunt
• Generators / Sub Generators
Yeoman
![Page 13: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/13.jpg)
Développeurs#mstechdays
• 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.
Language Overlay
![Page 14: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/14.jpg)
démo
Développeurs#mstechdays
YEOMAN
Créer un projet prêt à démarrerCréer des composants du projet
![Page 15: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/15.jpg)
Développeurs#mstechdays
ARCHITECTURE
Choisir une architecture adaptée au Javascript et aux SPAUtiliser des bonnes pratiques / Design Patterns
![Page 16: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/16.jpg)
Développeurs#mstechdays
• Modularité
• Separation of Concern
• MV*
• Convention First
Architecture - base
![Page 17: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/17.jpg)
Développeurs#mstechdays
• Performances / Maintenance
• Patterns Javascript recommandés– AMD – Promise – Singleton– Memoization– Factory– Observer– Reuse
Architecture – Design Patterns
http://shichuan.github.io/javascript-patterns/
![Page 18: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/18.jpg)
démo
Développeurs#mstechdays
DESIGN PATTERNS
Démonstration des différents design patterns avec leur utilité respective
![Page 19: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/19.jpg)
Développeurs#mstechdays
LIMITES (À CONTOURNER)
Les limites actuelles et comment les contourner
![Page 20: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/20.jpg)
Développeurs#mstechdays
• Taille et Manipulation DOM
• Traitement de grandes quantité de données
• Empreinte mémoire
Limites actuelles
![Page 21: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/21.jpg)
Développeurs#mstechdays
• 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
Manipulation DOM
![Page 22: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/22.jpg)
Développeurs#mstechdays
• HTML / Style / Javascript
• RequireJS– Modularité– Build– Preprocessing
Gestion des ressources
![Page 23: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/23.jpg)
Développeurs#mstechdays
• Cycle de vie
• Etats principaux / secondaire
Gestion des états (pages)
![Page 24: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/24.jpg)
Développeurs#mstechdays
• Attention aux fuites mémoire
• Ne pas bloquer le thread principal
• Décharger la donnée
Traitement de grande quantité de données
![Page 25: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/25.jpg)
Développeurs#mstechdays
• 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
Offline Storage
![Page 26: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/26.jpg)
Développeurs#mstechdays
Offline Storage
![Page 27: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/27.jpg)
démo
Développeurs#mstechdays
LIMITES ET ASTUCES
Cycle de vieTraitement de longues listesStockage hors-ligne
![Page 28: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/28.jpg)
Développeurs#mstechdays
HYBRIDATION
Transformer sa SPA en application native
![Page 29: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/29.jpg)
Développeurs#mstechdays
• WebView– Uniquement HTML / Javascript / CSS– Selon les fonctionnalités attendus cela suffit
• Solutions Hybride– Apache Cordova• Adobe PhoneGap• Intel XDK• Icenium
Solutions
![Page 30: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/30.jpg)
Développeurs#mstechdays
• 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
Apache Cordova
![Page 31: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/31.jpg)
Développeurs#mstechdays
• Prepare• Preview• Build• Deploy
• Toutes les plateformes avec un même outil• Toutes les plateformes dans un seul dossier
Apache Cordova CLI
![Page 32: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/32.jpg)
Développeurs#mstechdays
• Styles (indispensable)– Personnaliser le rendu / plateforme– Look’n’Feel Natif
• Scripts– Preprocessing (compilation conditionnelle)– Personnaliser les fonctionnalités
Apache Cordova Merges
![Page 33: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/33.jpg)
démo
Développeurs#mstechdays
APACHE CORDOVA
Intégrer une SPA dans CordovaPersonnaliser le rendu
![Page 34: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/34.jpg)
Développeurs#mstechdays
MERCI !
![Page 35: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/35.jpg)
Développeurs#mstechdays
Annexe 1• White Sheets– http
://addyosmani.com/resources/essentialjsdesignpatterns/book/
– http://developer.yahoo.com/performance/rules.html
• Find info and source– http://www.html5rocks.com/fr/– http://microjs.com/– https://github.com/spatools
![Page 36: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/36.jpg)
Développeurs#mstechdays
Annexe 2• Démo
– http://github.com/spatools/techdays2014
• Slides (version courte)– http://
fr.slideshare.net/Touchify/techdays-dvelopper-une-single-page-application-html5-version-courte
• Slides (version longue)– http://
fr.slideshare.net/Touchify/techdays-dvelopper-une-single-page-application-html5
![Page 37: TechDays - Développer une single page application HTML5 - Version courte](https://reader036.vdocuments.pub/reader036/viewer/2022062313/5584c5d7d8b42aeb138b4832/html5/thumbnails/37.jpg)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Digital is business