35

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

Embed Size (px)

Citation preview

Page 1: TechDays - Développer une single page application HTML5 - Version longue
Page 2: TechDays - Développer une single page application HTML5 - Version longue

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 longue

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 longue

Développeurs#mstechdays

INTRODUCTION

DéfinitionCaractéristiquesPourquoi ?

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

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 longue

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 longue

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 longue

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 longue

Développeurs#mstechdays

PRODUCTIVITÉ

Ne pas réinventer la roueChoisir les bonnes librairiesAutomation

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

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 longue

Développeurs#mstechdays

• Gestion des dépendances

• Génération

• Test

• Scaffolding

Automation

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

Développeurs#mstechdays

• Bower

• Grunt

• Generators / Sub Generators

Yeoman

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

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 longue

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 longue

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 longue

Développeurs#mstechdays

• Modularité

• Separation of Concern

• MV*

• Convention First

Architecture - base

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

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 longue

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 longue

Développeurs#mstechdays

LIMITES (À CONTOURNER)

Les limites actuelles et comment les contourner

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

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 longue

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 longue

Développeurs#mstechdays

• HTML / Style / Javascript

• RequireJS– Modularité– Build– Preprocessing

Gestion des ressources

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

Développeurs#mstechdays

• Cycle de vie

• Etats principaux / secondaire

Gestion des états (pages)

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

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 longue

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 longue

Développeurs#mstechdays

Offline Storage

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

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 longue

Développeurs#mstechdays

HYBRIDATION

Transformer sa SPA en application native

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

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 longue

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 longue

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 longue

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 longue

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 longue

Développeurs#mstechdays

Merci !!• Quelques liens– http://www.html5rocks.com/fr/– http

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

– https://github.com/spatools

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

© 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