Nous ne parlerons pas ici d'animaux mais de "Single Page Application", ou en Français, applications à page unique. Ce pattern d'application web, issu des concepts web 2.0, est de plus en plus prisé dans la réalisation d'applications web, notamment à destination des terminaux mobiles. Il permet de proposer une expérience et des temps de réponse proche des applications natives (c'est d'ailleurs le pattern utilisé dans les applications Modern UI en HTML/javascript). Dans cette session, nous présenterons les concepts fondamentaux des applications SPA, et comment les mettre en œuvre avec ASP.NET MVC4, en utilisant les outils proposés par MVC (knockout, upshot, ...), ou avec d'autres frameworks comme Backbone.js.

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

6. C’est quoi une SPA ?

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

12. QUELQUES EXEMPLES DE SPA

13. Comment c’est fait
?

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

18. SPAAVEC ASP.NET MVC

19. APPLICATION WINDOWS
STORE

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

24. Questions /
Réponses

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