advertisement

Développer une Single Page Application HTML 5 pour tous les devices

29 %
71 %
advertisement
Information about Développer une Single Page Application HTML 5 pour tous les devices
Technology

Published on March 4, 2014

Author: Developpeurs

Source: slideshare.net

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)
advertisement

Développer une SPA pour tous les devices Maxime LUCE Fondateur Touch it maxime@touchit.fr http://touchit.fr @Touchit_App Développeurs

Donnez votre avis ! 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 ! #mstechdays Développeurs

INTRODUCTION Définition Caractéristiques Pourquoi ? #mstechdays Développeurs

Caractéristiques • Application web = HTML / CSS / Javascript • Gestion des états / de l’historique • Utilisation intensive Ajax #mstechdays Développeurs

PRODUCTIVITÉ Ne pas réinventer la roue Choisir les bonnes librairies Automation #mstechdays Développeurs

Librairies • All in One • Angular • Backbone • Spécialisées • Underscore • KnockoutJS • Framework • Durandal • SPA Tools #mstechdays Développeurs

Automation • Gestion des dépendances • Génération / Test • Scaffolding #mstechdays Développeurs

YEOMAN Créer un projet prêt à démarrer Créer des composants du projet #mstechdays Développeurs

ARCHITECTURE Choisir une architecture adaptée au Javascript et aux SPA Utiliser des bonnes pratiques / Design Patterns #mstechdays Développeurs

Architecture - base • Separation of Concern • MV* • Convention First #mstechdays Développeurs

Architecture – Design Patterns • Performances / Maintenance • Patterns Javascript recommandés – – – – – – – #mstechdays AMD Promise Singleton Memoization Factory Observer Reuse http://shichuan.github.io/javascript-patterns/ Développeurs

DESIGN PATTERNS Démonstration des différents design patterns avec leur utilité respective #mstechdays Développeurs

LIMITES (À CONTOURNER) Les limites actuelles et comment les contourner #mstechdays Développeurs

Limites actuelles • Taille et Manipulation DOM • Traitement de grandes listes • Empreinte mémoire #mstechdays Développeurs

Manipulation DOM • 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 #mstechdays Développeurs

Gestion des états (pages) • Cycle de vie • Etats principaux / secondaire #mstechdays Développeurs

Traitement de grande quantité de données • Attention aux fuites mémoire • Ne pas bloquer le thread principal • Décharger la donnée #mstechdays Développeurs

Offline Storage • Garder la donnée importante pour un accès rapide • Evite la surcharge mémoire • Utiliser des librairies adaptées • Multiple technologies / Failback #mstechdays Développeurs

Offline Storage #mstechdays Développeurs

LIMITES ET ASTUCES Cycle de vie Traitement de longues listes Stockage hors-ligne #mstechdays Développeurs

HYBRIDATION Transformer sa SPA en application native #mstechdays Développeurs

Solutions • WebView – Application simple – Aucun besoin de natif • Solutions Hybride – Application complexe – Bridge vers code natif #mstechdays Développeurs

Apache Cordova CLI • • • • Prepare Preview Build Deploy • Toutes les plateformes avec un même outil • Toutes les plateformes dans un seul dossier #mstechdays Développeurs

Apache Cordova Merges • Styles (indispensable) – Personnaliser le rendu / plateforme – Look’n’Feel Natif • Scripts – Preprocessing (compilation conditionnelle) – Personnaliser les fonctionnalités #mstechdays Développeurs

APACHE CORDOVA Intégrer une SPA dans Cordova Personnaliser le rendu #mstechdays Développeurs

MERCI ! #mstechdays Développeurs

Annexe 1 • White Sheets – http://addyosmani.com/resources/essentialjsdesignpatt erns/book/ – http://developer.yahoo.com/performance/rules.html • Find info and source – http://www.html5rocks.com/fr/ – http://microjs.com/ – https://github.com/spatools #mstechdays Développeurs

Annexe 2 • Démo – http://github.com/spatools/techdays2014 • Slides (version courte) – http://fr.slideshare.net/Touchify/techdays-dvelopper-unesingle-page-application-html5-version-courte • Slides (version longue) – http://fr.slideshare.net/Touchify/techdays-dvelopper-unesingle-page-application-html5 #mstechdays Développeurs

Digital is business

#mstechdays presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Développer une Single Page Application HTML 5 pour tous ...

... vous verrez comment développer une application HTML 5 ... Single Page Application HTML 5 pour tous les ... pour créer une application ...
Read more

Développer une Single Page Application HTML 5 pour tous ...

... vous verrez comment développer une application HTML 5 ... Quels sont les pièges à éviter ... Développer une Single Page Application HTML 5 pour ...
Read more

Développer une Single Page Application HTML 5 pour tous ...

Home; Technology; Développer une Single Page Application HTML 5 pour tous les devices
Read more

Retour sur les Microsoft Techdays 2014 : développer une ...

... Développer une Single Page Application pour tous les devices. ... vous verrez comment développer une application HTML 5 complexe à destination ...
Read more

Techdays 2014: toutes les vidéos des 2 parcours Web ...

... Développer une Single Page Application HTML 5 pour tous les ... Développer un jeu multi ... A bientôt et merci à tous les orateurs pour ...
Read more

TechDays - Développer une single page application HTML5 ...

Développer une SPA pour tous les devices Maxime LUCE Fondateur Touch it maxime@touchit.fr http ... Développer une single page application HTML5 ...
Read more