techdays - développer une single page application html5 - version longue
Post on 24-May-2015
569 Views
Preview:
TRANSCRIPT
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
top related