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

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

« 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

Développeurs#mstechdays

• Application web = HTML / CSS / Javascript

• Gestion des états / de l’historique

• Utilisation intensive Ajax

Caractéristiques

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

Développeurs#mstechdays

Avantages

• « Un seul code »

• Réutilisation des compétences

• Adaptabilité

Inconvénients

• Performances

• Navigateurs

• Debugging

Cross-Platform SPA

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éveloppeurs#mstechdays

• Bower

• Grunt

• Generators / Sub Generators

Yeoman

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

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

• Modularité

• 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 quantité de données

• 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

• HTML / Style / Javascript

• RequireJS– Modularité– Build– Preprocessing

Gestion des ressources

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 de traitement de donné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– Uniquement HTML / Javascript / CSS– Selon les fonctionnalités attendus cela suffit

• Solutions Hybride– Apache Cordova• Adobe PhoneGap• Intel XDK• Icenium

Solutions

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

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 !!• Quelques liens– http://www.html5rocks.com/fr/– http

://addyosmani.com/resources/essentialjsdesignpatterns/book/

– https://github.com/spatools

© 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