développer une single page application html 5 pour tous les devices
DESCRIPTION
Durant cette session, vous verrez comment développer une application HTML 5 complexe à destination des navigateurs, tablettes et autres téléphones. Quels sont les pièges à éviter ? quelle architecture, design pattern ? Quels outils utiliser ? Bonnes pratiques ? Toutes ces questions seront abordées dans cette session. Une démonstration sera le fil rouge. Speakers : Maxime LUCE (Touch it)TRANSCRIPT
Développeurs
Développer une SPA pour tous les devices
Maxime LUCEFondateur
Touch it
[email protected]://touchit.fr
@Touchit_App
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 !
Développeurs#mstechdays
INTRODUCTION
DéfinitionCaractéristiquesPourquoi ?
Développeurs#mstechdays
• Application web = HTML / CSS / Javascript
• Gestion des états / de l’historique
• Utilisation intensive Ajax
Caractéristiques
Développeurs#mstechdays
PRODUCTIVITÉ
Ne pas réinventer la roueChoisir les bonnes librairiesAutomation
Développeurs#mstechdays
• All in One• Angular• Backbone
• Spécialisées• Underscore• KnockoutJS
• Framework • Durandal• SPA Tools
Librairies
Développeurs#mstechdays
• Gestion des dépendances
• Génération / Test
• Scaffolding
Automation
démo
Développeurs#mstechdays
YEOMAN
Créer un projet prêt à démarrerCréer des composants du projet
Développeurs#mstechdays
ARCHITECTURE
Choisir une architecture adaptée au Javascript et aux SPAUtiliser des bonnes pratiques / Design Patterns
Développeurs#mstechdays
• Separation of Concern
• MV*
• Convention First
Architecture - base
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/
démo
Développeurs#mstechdays
DESIGN PATTERNS
Démonstration des différents design patterns avec leur utilité respective
Développeurs#mstechdays
LIMITES (À CONTOURNER)
Les limites actuelles et comment les contourner
Développeurs#mstechdays
• Taille et Manipulation DOM
• Traitement de grandes listes
• Empreinte mémoire
Limites actuelles
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
Développeurs#mstechdays
• Cycle de vie
• Etats principaux / secondaire
Gestion des états (pages)
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
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
Développeurs#mstechdays
Offline Storage
démo
Développeurs#mstechdays
LIMITES ET ASTUCES
Cycle de vieTraitement de longues listesStockage hors-ligne
Développeurs#mstechdays
HYBRIDATION
Transformer sa SPA en application native
Développeurs#mstechdays
• WebView– Application simple– Aucun besoin de natif
• Solutions Hybride– Application complexe– Bridge vers code natif
Solutions
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
Développeurs#mstechdays
• Styles (indispensable)– Personnaliser le rendu / plateforme– Look’n’Feel Natif
• Scripts– Preprocessing (compilation conditionnelle)– Personnaliser les fonctionnalités
Apache Cordova Merges
démo
Développeurs#mstechdays
APACHE CORDOVA
Intégrer une SPA dans CordovaPersonnaliser le rendu
Développeurs#mstechdays
MERCI !
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
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
© 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