![Page 1: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/1.jpg)
![Page 2: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/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: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/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: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/4.jpg)
Développeurs#mstechdays
INTRODUCTION
DéfinitionCaractéristiquesPourquoi ?
![Page 5: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/5.jpg)
Développeurs#mstechdays
• Application web = HTML / CSS / Javascript
• Gestion des états / de l’historique
• Utilisation intensive Ajax
Caractéristiques
![Page 6: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/6.jpg)
Développeurs#mstechdays
PRODUCTIVITÉ
Ne pas réinventer la roueChoisir les bonnes librairiesAutomation
![Page 7: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/7.jpg)
Développeurs#mstechdays
• All in One• Angular• Backbone
• Spécialisées• Underscore• KnockoutJS
• Framework • Durandal• SPA Tools
Librairies
![Page 8: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/8.jpg)
Développeurs#mstechdays
• Gestion des dépendances
• Génération / Test
• Scaffolding
Automation
![Page 9: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/9.jpg)
démo
Développeurs#mstechdays
YEOMAN
Créer un projet prêt à démarrerCréer des composants du projet
![Page 10: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/10.jpg)
Développeurs#mstechdays
ARCHITECTURE
Choisir une architecture adaptée au Javascript et aux SPAUtiliser des bonnes pratiques / Design Patterns
![Page 11: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/11.jpg)
Développeurs#mstechdays
• Separation of Concern
• MV*
• Convention First
Architecture - base
![Page 12: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/12.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 13: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/13.jpg)
démo
Développeurs#mstechdays
DESIGN PATTERNS
Démonstration des différents design patterns avec leur utilité respective
![Page 14: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/14.jpg)
Développeurs#mstechdays
LIMITES (À CONTOURNER)
Les limites actuelles et comment les contourner
![Page 15: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/15.jpg)
Développeurs#mstechdays
• Taille et Manipulation DOM
• Traitement de grandes listes
• Empreinte mémoire
Limites actuelles
![Page 16: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/16.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 17: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/17.jpg)
Développeurs#mstechdays
• Cycle de vie
• Etats principaux / secondaire
Gestion des états (pages)
![Page 18: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/18.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 19: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/19.jpg)
Développeurs#mstechdays
• Garder la donnée importante pour un accès rapide
• Evite la surcharge mémoire
• Utiliser des librairies adaptées
• Multiple technologies / Failback
Offline Storage
![Page 20: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/20.jpg)
Développeurs#mstechdays
Offline Storage
![Page 21: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/21.jpg)
démo
Développeurs#mstechdays
LIMITES ET ASTUCES
Cycle de vieTraitement de longues listesStockage hors-ligne
![Page 22: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/22.jpg)
Développeurs#mstechdays
HYBRIDATION
Transformer sa SPA en application native
![Page 23: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/23.jpg)
Développeurs#mstechdays
• WebView– Application simple– Aucun besoin de natif
• Solutions Hybride– Application complexe– Bridge vers code natif
Solutions
![Page 24: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/24.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 25: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/25.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 26: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/26.jpg)
démo
Développeurs#mstechdays
APACHE CORDOVA
Intégrer une SPA dans CordovaPersonnaliser le rendu
![Page 27: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/27.jpg)
Développeurs#mstechdays
MERCI !
![Page 28: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/28.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 29: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/29.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 30: Développer une Single Page Application HTML 5 pour tous les devices](https://reader036.vdocuments.site/reader036/viewer/2022070302/547cb41eb4af9f4b6e8b4593/html5/thumbnails/30.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