tout sur les spa

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 LeborgneArchitecte .Net

MCNEXT

gleborgne@mcnext.comhttp://www.mcnext.com

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