SlideShare une entreprise Scribd logo
Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr
Tout sur les SPA
Guillaume Leborgne
Architecte .Net
MCNEXT
gleborgne@mcnext.com
http://www.mcnext.com
180 collaborateurs
Depuis 2007 à Paris - Lyon - Genève
Stand 97 – Zone bleu
foncé
Business
Intelligence
Talk
Biz
NET
Dot Share
Point
Microsoft
100 %
Aucun animal n’a
été maltraité pour
la préparation de
cette session
• C’est quoi une SPA ?
– Définition
– A quoi ca sert ?
– Exemples d’applications SPA
• Comment c’est fait ?
– Structure
– Librairies
• Un peu de code
– ASP.Net MVC
– Applications Windows Store
• Pour aller plus loin…
– HTML5 power
– Optimiser son application
Agenda
C’est quoi une SPA ?
Une application à page unique est un site ou une
application web entièrement contenu dans une seule
et unique page.
Les éléments d’IHM et la navigation sont
intégralement gérés côté client, au sein de cette
page.
Le terme « Single Page Application » est apparu vers 2005 mais le pattern
d’application existe depuis au moins 2002
Définition
Améliorer les performances
• Échange de données brutes
(XML ou JSON) plutôt que des
pages ou fragments HTML
• Chargement de templates mis
en cache pour l’affichage des
données
• Asynchrone
• Réduit la charge serveur
Améliorer l’expérience utilisateur
• Meilleurs temps de réponse (pas
de latence entre pages)
• Permet la persistance d’état
côté client
• Comportement identique ou
proche de celui des applications
natives
A quoi ca sert ?
A quoi ca sert ?
Applications mobiles
• Les gains d’ergonomie et de
performances sont
particulièrement sensibles sur
plateformes mobiles
• Certaines plateformes comme
iOS permettent de considérer
une SPA comme une application
native
• Des plateformes comme
PhoneGAP permettent de
packager une SPA en application
Native
A quoi ca sert ?
Applications mobiles
• Windows 8 permet de
développer des applications
SPA natives !
• Référencement dans les moteurs de recherche
• Gestion de l’historique de navigation et du bookmarking
• Gestion de la publicité et des statistiques d’utilisation
• Nécessite des compétences javascript plus pointues, et une
philosophie différente d’une application web traditionnelle
Inconvénients
QUELQUES EXEMPLES DE SPA
Comment c’est fait
?
clientserveur
Structure d’une application SPA
HTML / CSS / JS
SERVICES
(XML, JSON)
IHM
LOGIQUE
APPLICATIVE
ACCES
DONNEES
NAVIGATION
PERSISTANCE
Il est souvent nécessaire de
structurer une SPA pour pouvoir
coordonner les différentes
briques, tout en gardant une base
de code maintenable
• Backbone
• Ember
• Knockout
• Angular
• Meteor
• Batman
• Spine
• CanJS
Les frameworks MVC / MVP / MVVM
• Gestion des données
– amplify.js
– Breeze.js
– JayData
• Templates
– underscore
– mustache
– Handlebar
• Historique de navigation
– history.js
– Sammy.js
– Backbone
• Gestionnaire de modules
– require.js
Librairies utiles
Un peu de code
SPAAVEC ASP.NET MVC
APPLICATION WINDOWS
STORE
Pour aller plus loin…
• temps réel  web socket
• Stockage local de données  IndexedDB, localStorage
• applications offline  App Cache
• multithreading  web workers
Tirer parti de HTML 5
• Avec ASP.Net
– Cache
– Bundles et minification
• Avec Visual Studio + plugin Web essentials
– Optimisation des images
– Utilisation de .less
– Minification css et javascript
Optimiser son application
• Prendre le temps d’apprendre (vraiment) javascript
• Utiliser une librairie AMD (asynchronous module definition) comme
require.js
• Se documenter (par ex : http://boilerplatejs.org/)
Structurer son application
Questions /
Réponses
Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr
Formez-vous en ligne
Retrouvez nos évènements
Faites-vous accompagner
gratuitement
Essayer gratuitement nos
solutions IT
Retrouver nos experts
Microsoft
Pros de l’ITDéveloppeurs
www.microsoftvirtualacademy.comhttp://aka.ms/generation-app
http://aka.ms/evenements-
developpeurs
http://aka.ms/itcamps-france
Les accélérateurs
Windows Azure, Windows Phone,
Windows 8
http://aka.ms/telechargements
La Dev’Team sur MSDN
http://aka.ms/devteam
L’IT Team sur TechNet
http://aka.ms/itteam

Contenu connexe

Similaire à Tout sur les SPA

Smile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerceSmile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerce
Swissgento eCom Genève
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
Oxalide
 
Votre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud AzureVotre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud Azure
Anne-Sophie Picot
 
Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices
Microsoft
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
Brigitte Marandon
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Fasterize
 
ITIS Commerce - Migration PrestaShop - 20150205
ITIS Commerce  - Migration PrestaShop - 20150205ITIS Commerce  - Migration PrestaShop - 20150205
ITIS Commerce - Migration PrestaShop - 20150205
Paul Guillemin
 
REX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerceREX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerce
Web Performance Paris
 
API Management
API ManagementAPI Management
API Management
Micropole Group
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 
Digital : Web & Mobilité
Digital : Web & MobilitéDigital : Web & Mobilité
Digital : Web & Mobilité
Catalyse IT
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
Synerg'hetic
 
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
Touchify
 
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
Touchify
 
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
Smile I.T is open
 
Dossier de competences mk beezen
Dossier de competences mk beezenDossier de competences mk beezen
Dossier de competences mk beezen
Clementine D.
 
Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...
Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...
Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...
AT Internet
 
2016 Création Refonte Site
2016 Création Refonte Site2016 Création Refonte Site
2016 Création Refonte Site
Office de tourisme Aunis Marais Poitevin
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Stéphanie Hertrich
 
Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...
Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...
Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...
Hervé Bourdon
 

Similaire à Tout sur les SPA (20)

Smile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerceSmile Suisse : Comment faire de Magento sa plateforme ecommerce
Smile Suisse : Comment faire de Magento sa plateforme ecommerce
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
 
Votre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud AzureVotre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud Azure
 
Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices Développer une Single Page Application HTML 5 pour tous les devices
Développer une Single Page Application HTML 5 pour tous les devices
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
ITIS Commerce - Migration PrestaShop - 20150205
ITIS Commerce  - Migration PrestaShop - 20150205ITIS Commerce  - Migration PrestaShop - 20150205
ITIS Commerce - Migration PrestaShop - 20150205
 
REX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerceREX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerce
 
API Management
API ManagementAPI Management
API Management
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Digital : Web & Mobilité
Digital : Web & MobilitéDigital : Web & Mobilité
Digital : Web & Mobilité
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
 
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
 
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
 
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
CMSday 2013 - Usines à sites : Quelles sont les approches possibles ?
 
Dossier de competences mk beezen
Dossier de competences mk beezenDossier de competences mk beezen
Dossier de competences mk beezen
 
Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...
Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...
Cas client Credit Agricole - Approche data-driven : de la stratégie au déploi...
 
2016 Création Refonte Site
2016 Création Refonte Site2016 Création Refonte Site
2016 Création Refonte Site
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...
Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...
Atelier Pratiques Sites De E Commerce Pour Des Tpe Et Des Pme, Hervé Bourdon,...
 

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
 

Tout sur les SPA

  • 1. Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr
  • 2. Tout sur les SPA Guillaume Leborgne Architecte .Net MCNEXT gleborgne@mcnext.com http://www.mcnext.com
  • 3. 180 collaborateurs Depuis 2007 à Paris - Lyon - Genève Stand 97 – Zone bleu foncé Business Intelligence Talk Biz NET Dot Share Point Microsoft 100 %
  • 4. Aucun animal n’a été maltraité pour la préparation de cette session
  • 5. • C’est quoi une SPA ? – Définition – A quoi ca sert ? – Exemples d’applications SPA • Comment c’est fait ? – Structure – Librairies • Un peu de code – ASP.Net MVC – Applications Windows Store • Pour aller plus loin… – HTML5 power – Optimiser son application Agenda
  • 7. Une application à page unique est un site ou une application web entièrement contenu dans une seule et unique page. Les éléments d’IHM et la navigation sont intégralement gérés côté client, au sein de cette page. Le terme « Single Page Application » est apparu vers 2005 mais le pattern d’application existe depuis au moins 2002 Définition
  • 8. Améliorer les performances • Échange de données brutes (XML ou JSON) plutôt que des pages ou fragments HTML • Chargement de templates mis en cache pour l’affichage des données • Asynchrone • Réduit la charge serveur Améliorer l’expérience utilisateur • Meilleurs temps de réponse (pas de latence entre pages) • Permet la persistance d’état côté client • Comportement identique ou proche de celui des applications natives A quoi ca sert ?
  • 9. A quoi ca sert ? Applications mobiles • Les gains d’ergonomie et de performances sont particulièrement sensibles sur plateformes mobiles • Certaines plateformes comme iOS permettent de considérer une SPA comme une application native • Des plateformes comme PhoneGAP permettent de packager une SPA en application Native
  • 10. A quoi ca sert ? Applications mobiles • Windows 8 permet de développer des applications SPA natives !
  • 11. • Référencement dans les moteurs de recherche • Gestion de l’historique de navigation et du bookmarking • Gestion de la publicité et des statistiques d’utilisation • Nécessite des compétences javascript plus pointues, et une philosophie différente d’une application web traditionnelle Inconvénients
  • 14. clientserveur Structure d’une application SPA HTML / CSS / JS SERVICES (XML, JSON) IHM LOGIQUE APPLICATIVE ACCES DONNEES NAVIGATION PERSISTANCE
  • 15. Il est souvent nécessaire de structurer une SPA pour pouvoir coordonner les différentes briques, tout en gardant une base de code maintenable • Backbone • Ember • Knockout • Angular • Meteor • Batman • Spine • CanJS Les frameworks MVC / MVP / MVVM
  • 16. • Gestion des données – amplify.js – Breeze.js – JayData • Templates – underscore – mustache – Handlebar • Historique de navigation – history.js – Sammy.js – Backbone • Gestionnaire de modules – require.js Librairies utiles
  • 17. Un peu de code
  • 20. Pour aller plus loin…
  • 21. • temps réel  web socket • Stockage local de données  IndexedDB, localStorage • applications offline  App Cache • multithreading  web workers Tirer parti de HTML 5
  • 22. • Avec ASP.Net – Cache – Bundles et minification • Avec Visual Studio + plugin Web essentials – Optimisation des images – Utilisation de .less – Minification css et javascript Optimiser son application
  • 23. • Prendre le temps d’apprendre (vraiment) javascript • Utiliser une librairie AMD (asynchronous module definition) comme require.js • Se documenter (par ex : http://boilerplatejs.org/) Structurer son application
  • 25. Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr
  • 26. Formez-vous en ligne Retrouvez nos évènements Faites-vous accompagner gratuitement Essayer gratuitement nos solutions IT Retrouver nos experts Microsoft Pros de l’ITDéveloppeurs www.microsoftvirtualacademy.comhttp://aka.ms/generation-app http://aka.ms/evenements- developpeurs http://aka.ms/itcamps-france Les accélérateurs Windows Azure, Windows Phone, Windows 8 http://aka.ms/telechargements La Dev’Team sur MSDN http://aka.ms/devteam L’IT Team sur TechNet http://aka.ms/itteam

Notes de l'éditeur

  1. Notation
  2. Intro code / dev
  3. http://happyworm.com/jPlayerLab/single-page-apphttp://www.mah-jongg.ch/mahjongg/mahjongg.htmlhttps://soundcloud.comhttp://www.nytimes.com/skimmerhttps://manage.windowsazure.com
  4. Notation
  5. Exemple de page de code pour le secteur dev
  6. Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.