Embed Size (px)
DESCRIPTION
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.
Citation preview
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
180 collaborateurs Depuis 2007 à Paris - Lyon - Genève
Stand 97 – Zone bleu foncé
BusinessIntelligence Talk
Biz
NETDot 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
demoQUELQUES 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
demoSPA AVEC ASP.NET MVC
demoAPPLICATION 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.com
http://aka.ms/generation-app
http://aka.ms/evenements-developpeurs
http://aka.ms/itcamps-france
Les accélérateursWindows Azure, Windows Phone,
Windows 8
http://aka.ms/telechargements
La Dev’Team sur MSDNhttp://aka.ms/devteam
L’IT Team sur TechNethttp://aka.ms/itteam
