SlideShare une entreprise Scribd logo
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

Contenu connexe

Tendances

Introduction au développement Windows 8.1
Introduction au développement Windows 8.1Introduction au développement Windows 8.1
Introduction au développement Windows 8.1
Microsoft
 
L'envers du décor : le Modern-ALM dans - et par - les équipes produits Microsoft
L'envers du décor : le Modern-ALM dans - et par - les équipes produits MicrosoftL'envers du décor : le Modern-ALM dans - et par - les équipes produits Microsoft
L'envers du décor : le Modern-ALM dans - et par - les équipes produits Microsoft
Microsoft
 
Préparer et distribuer une application moderne d'entreprise
Préparer et distribuer une application moderne d'entreprisePréparer et distribuer une application moderne d'entreprise
Préparer et distribuer une application moderne d'entreprise
Microsoft
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJS
Microsoft
 
TechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longueTechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longueTouchify
 
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Microsoft
 
TechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courteTechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courteTouchify
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en action
Microsoft
 
Vers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérienceVers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérience
Microsoft
 
Le Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery MobileLe Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery Mobile
Microsoft
 
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPadCoder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
David MEKERSA
 
"J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi...
"J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi..."J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi...
"J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi...
Microsoft
 
Retour d'expérience développement jeux android
Retour d'expérience développement jeux androidRetour d'expérience développement jeux android
Retour d'expérience développement jeux android
jodem
 
Développement des jeux vidéo Mobile
Développement des jeux vidéo MobileDéveloppement des jeux vidéo Mobile
Développement des jeux vidéo Mobile
ODC Orange Developer Center
 
Jeux vidéo sur mobile - Unity3d
Jeux vidéo sur mobile - Unity3dJeux vidéo sur mobile - Unity3d
Jeux vidéo sur mobile - Unity3d
Xavier MARIN
 
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Microsoft
 
Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014Etienne Margraff
 
SharePoint & Azure, le couple gagnant
SharePoint & Azure, le couple gagnantSharePoint & Azure, le couple gagnant
SharePoint & Azure, le couple gagnant
Microsoft
 
Tap publisher par Frédéric Aloé
Tap publisher par Frédéric AloéTap publisher par Frédéric Aloé
Tap publisher par Frédéric Aloé
CocoaHeads France
 
Mise en œuvre d’une démarche DevOps dans Windows Azure
Mise en œuvre d’une démarche DevOps dans Windows AzureMise en œuvre d’une démarche DevOps dans Windows Azure
Mise en œuvre d’une démarche DevOps dans Windows Azure
Microsoft Technet France
 

Tendances (20)

Introduction au développement Windows 8.1
Introduction au développement Windows 8.1Introduction au développement Windows 8.1
Introduction au développement Windows 8.1
 
L'envers du décor : le Modern-ALM dans - et par - les équipes produits Microsoft
L'envers du décor : le Modern-ALM dans - et par - les équipes produits MicrosoftL'envers du décor : le Modern-ALM dans - et par - les équipes produits Microsoft
L'envers du décor : le Modern-ALM dans - et par - les équipes produits Microsoft
 
Préparer et distribuer une application moderne d'entreprise
Préparer et distribuer une application moderne d'entreprisePréparer et distribuer une application moderne d'entreprise
Préparer et distribuer une application moderne d'entreprise
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJS
 
TechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longueTechDays - Développer une single page application HTML5 - Version longue
TechDays - Développer une single page application HTML5 - Version longue
 
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
Créer des jeux 3D pour le web et pour le Windows Store avec BabylonJS/WebGL
 
TechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courteTechDays - Développer une single page application HTML5 - Version courte
TechDays - Développer une single page application HTML5 - Version courte
 
Les nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en actionLes nouveautés d’HTML5 et IE11 en action
Les nouveautés d’HTML5 et IE11 en action
 
Vers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérienceVers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérience
 
Le Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery MobileLe Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery Mobile
 
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPadCoder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
 
"J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi...
"J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi..."J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi...
"J'ai migré mon SI intégralement en Java dans Windows Azure et je me porte bi...
 
Retour d'expérience développement jeux android
Retour d'expérience développement jeux androidRetour d'expérience développement jeux android
Retour d'expérience développement jeux android
 
Développement des jeux vidéo Mobile
Développement des jeux vidéo MobileDéveloppement des jeux vidéo Mobile
Développement des jeux vidéo Mobile
 
Jeux vidéo sur mobile - Unity3d
Jeux vidéo sur mobile - Unity3dJeux vidéo sur mobile - Unity3d
Jeux vidéo sur mobile - Unity3d
 
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
 
Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014Visual studio 2013 - Techdays 2014
Visual studio 2013 - Techdays 2014
 
SharePoint & Azure, le couple gagnant
SharePoint & Azure, le couple gagnantSharePoint & Azure, le couple gagnant
SharePoint & Azure, le couple gagnant
 
Tap publisher par Frédéric Aloé
Tap publisher par Frédéric AloéTap publisher par Frédéric Aloé
Tap publisher par Frédéric Aloé
 
Mise en œuvre d’une démarche DevOps dans Windows Azure
Mise en œuvre d’une démarche DevOps dans Windows AzureMise en œuvre d’une démarche DevOps dans Windows Azure
Mise en œuvre d’une démarche DevOps dans Windows Azure
 

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

Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Microsoft
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Cellenza
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
Microsoft
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Microsoft
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
Microsoft
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
Stéphane Liétard
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
Vincent Biret
 
Tout sur les SPA
Tout sur les SPATout sur les SPA
Tout sur les SPA
Microsoft
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
ekino
 
Introduction à meteor
Introduction à meteorIntroduction à meteor
Introduction à meteor
Fabian Vilers
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
davrous
 
Les métiers du web
Les métiers du webLes métiers du web
Les métiers du web
Théo Chamley
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Aspectize mdday2010
Aspectize mdday2010Aspectize mdday2010
Aspectize mdday2010MD DAY
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
Boubker ABERWAG
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
Drupal Factory kézako ?
Drupal Factory kézako ?Drupal Factory kézako ?
Drupal Factory kézako ?
slybud
 
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Microsoft Technet France
 

Similaire à Développer une Single Page Application HTML 5 pour tous les devices (20)

Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
 
Tout sur les SPA
Tout sur les SPATout sur les SPA
Tout sur les SPA
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Introduction à meteor
Introduction à meteorIntroduction à meteor
Introduction à meteor
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Les métiers du web
Les métiers du webLes métiers du web
Les métiers du web
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Aspectize mdday2010
Aspectize mdday2010Aspectize mdday2010
Aspectize mdday2010
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Drupal Factory kézako ?
Drupal Factory kézako ?Drupal Factory kézako ?
Drupal Factory kézako ?
 
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
 

Plus de Microsoft

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
Microsoft
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
Microsoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
Microsoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
Microsoft
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
Microsoft
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Microsoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
Microsoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
Microsoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
Microsoft
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 

Plus de Microsoft (20)

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 

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

Notes de l'éditeur

  1. Qui dans la salle a déjà développé des SPA ?Oui  On passe vite jusqu’au slide 9Non  Vitesse normale
  2. Application web dans une seule pageAucun rechargementExpérience utilisateur plus fluideSensation d’utiliser un application pour l’utilisateurHTML / CSS / JavascriptUniquement des technologies web pour le frontLiberté technologique pour le backRester RESTfulGestion des états :Etats fondamentauxNavigation principaleChangement du contenu principalEtats secondairesAJAHAJAXGestion de l’historique :Autoriser la navigation en utilisant le javascriptCycle de vie des pagesGestion du hash de l’urlPrécédent / Suivant_escaped_fragment_AJAX :RESTCORSStockage Offline
  3. Ne pas réinventer la roueChoisir des librairies adaptées à ses besoins.Peu de documentation != Peu de solutionsEviter les usines à gazAll in OneSimplifie le démarrage de l’applicationEnfermé dans la logique de la librairieLibrairies spécialiséesUne librairie pour un besoin précisDes librairies plus petitesAttention ! Multiplier les librairies qui accomplissent des tâches similairesExemple : jQuery + PrototypeAugmente l’empreinte mémoire pour rienRisque d’utiliser les deux dans le code (très difficile à maintenir)Attention ! Ne pas maîtriser le résultat des librairies utiliséesExemple : jQuery MobileConcept bloquantUn problème de librairie est quasiment incorrigibleHybrideRéutilise plusieurs librairiesOrganise le code
  4. Ne pas tout faire manuellement.Utiliser des outils pour augmenter la productivitéGestion des dépendancesNe jamais gérer ses dépendances manuellementSimplifie la maintenance des dépendancesNuGetVisual StudioWindowsBowerNode.jsSpécialisé webGruntGestionnaire de tâches d’automationServer avec livereloadingBuild / TestPreprocessingÉquivalent de la précompilationExemple YeomanGénérateur de projetGénérateur de composant de projetSimplifier le démarrage et la maintenance d'une application Permet de partir en utilisant de bonnes pratiques et les assurer dans le temps
  5. Tags: 0.1.0 Initialization par le générateur Durandal de Yeoman0.1.1  Ajout d’un ViewModel en utilisant un sous-générateur Yeoman0.1.2  Démo LiveReview
  6. Langage dynamique non typéFacile de faire n’importe quoiFacilement modulableSeparation of Concern / Modularité Code Spaghetti vs Code RavioliUn module = Une fonction préciseModule principalSous-moduleMV*MVVMMVWMVPConventions vs ConfigurationJavascript love conventionsConfigurations est une étape supplémentaire à interprété
  7. Très important pour garder une application maintenable dans le tempsPermet d’adopter un schéma stricte et performant
  8. Tags:0.2.0  Préparation de la démo0.2.1  Ajout des exemples0.2.2  Correction erreurs page Promise
  9. Taille et Manipulation du DOMN°1 de la cause de mauvaise performance selon jsperf.comImpose une réelle gestion du DOMTraitementEviter de bloquer le thread principalPrivilégier la délégationEmpreinte mémoireDécharger la données inutileDécharger le DOM
  10. Le DOM est la manipulation la moins performante du HTML5 et Javascript.Minimiser sa charge en traitant des petites quantités d’informations.N°1 de la cause de mauvaise performance selon jsperf.comManipulation de grande quantitéNe jamais manipuler ni laisser de grande quantité d’élément dans le DOMEnormément de DOM généré en même temps = CRRRRRRRRChainer le chargement (10 puis 10 puis 10…)Infinite List LoadingChargement de la suite de la liste lorsque le scroll arrive à la fin.Selon la taille, décharger le début de la listeDéchargerConcepts des jeux vidéosMettre en cache le DOM qui est souvent réutiliséCharger le DOM à la demandeNe jamaisprécharger tout le DOM de votre application (non scalable)ExternalTemplatingRequire.JS Text Plugin
  11. Cycle de vie :Activation => ChargementDésactivation => Déchargement (si possible)Etats principaux / secondairePrincipal = page / navigationSecondaire = bloc / sous-partie / réaction (affichage d’erreur, message de confirmation…)Principal gère secondaireSecondaire peut être un module à part entière avec son cycle de vie
  12. Le javascript n’aime pas les grosses listes d’objetsFuites mémoireDécharger les objets de tous les SingletonDétacher les objets non-Singleton pouvant contenir des entitésTraitementsetTimeout + chainingWebWorkersDécharger la donnéeEviter de conserver la données en mémoireStocker en cache la données inutile à l’instant T
  13. Pourquoi stocker les données de manière hors-ligne ?Quelle solution utilisée ?Donnée importanteAu démarrage de l’applicationEviter des chargementSurchargeEmpreinte mémoireStocke grande liste puis traite par blocEvite de charger vos tableaux / dictionnaires d’objet.Stocke les données non utiles à l’instant T.Librairies de traitement de donnéesAmplifyJSBreezeSPA ToolsMultiple technologiesDans l’ordre de traitementIndexedDBWebSQLLocalStorageCookie (Wow !! Optionel)Cet ordre d’exécution est établi en fonction des :Spécifications du W3CPerformancesMaintenabilitéIndexedDB => LocalStorage (shim pour WebSQL)
  14. Tags :0.3.0  Préparation de la démo0.3.1  Présentations des exemples
  15. WebViewUniquement HTML / Javascript / CSSSelon les fonctionnalités attendus cela suffitSolutions HybridesApache CordovaDérivés :Adobe PhoneGapIntel XDKIceniumBridge :Accès aux fonctions native du téléphoneDéléguer des tâches complexes au code natif
  16. Spécifiques par plateformeRemplace les fichiers de votre code pour une plateforme spécifiqueStylesScriptsPreprocessingcompilation conditionnellePermet d’exécuter du code sur une plateforme spécifique ou dans un état spécifiqueUtiliser des fonctions systèmes uniquement accessible sur une plateforme
  17. Tags :0.4.0  Initialisation du projectCordova0.4.1  Ajout du préprocessing pour Cordova0.4.2  Ajout du préprocessing pour Window80.4.3  Intégration poussée0.4.4  Intégration poussée Windows8