développer une single page application html 5 pour tous les devices

Développeurs

Développer une SPA pour tous les devices

Maxime LUCEFondateur

Touch it

maxime@touchit.frhttp://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