Single Page Application: Enrichissez l'expérience utilisateur

Single Page Application: Enrichissez l'expérience utilisateur

Florent PELLET

Développeur Freelance .Net / JavaScript

@florentpellet

wittycoding.com

florentpellet.fr

Twitter :

Blog :

Site :

Pourquoi le SPA ?

Parce qu’Internet ce n’est plus que ça

L’utilisateur est roi

L’utilisateur ne doit pas subir le site

La fin de la succession de page web◦ Réactivité

◦ Immersion

◦ Ergonomie

◦ Tolérance aux déconnexions

Ergonomie

Feedback

Le Contenu

Minimisez les interactions

Animation◦ > 100ms

◦ < 300ms

◦ Naturelle

Réactivité et immersion

Recherche du traitement instantané◦ Feedback

◦ Animation

Ne pas bloquer l’utilisateur◦ Ergonomie pour les traitements longs

Comment ? JQuery ?

Mélange des données et de la vue

Plat de spaghettis

Génération de la vue coté serveur

Fuite mémoire

JQuery oui… pour les animations◦ Et encore… CSS 3

MV* framework

Répartition des rôles ◦ Vues : Templates

◦ Modèles & serveurs : Json

Faible couplage◦ Testable

… Une architecture en somme.

Faites votre marché !

KnockoutJs

AngularJS

Backbone

Ember.js

…

Temps réel

Dashboards / monitoring

Outils Collaboratifs

Etat d’un long traitement

Formulaires et notifications en temps réel

Jeux

Suivi des résultats

Comment ?

Protocoles◦ Periodic polling

◦ Long polling

◦ Comet / Forever-frame

◦ Server Sent Events / EventSource

◦ WebSockets

Framework◦ SignalR

◦ Socket.io

Des problèmes ?

Historique & Workflow des urls◦ Html 5

◦ History.js

◦ Sammyjs

SEO◦ PhantomJS

◦ {{Mustache}}

Des questions ?

KnockoutJs