14
Single Page Application: Enrichissez l'expérience utilisateur

Single Page Application: Enrichissez l'expérience utilisateur

Embed Size (px)

DESCRIPTION

Support présentation sur "Single Page Application: Enrichissez l'expérience utilisateur" pour les HumanTalk du mardi 11 juin 2013

Citation preview

Page 1: Single Page Application: Enrichissez l'expérience utilisateur

Single Page Application: Enrichissez l'expérience utilisateur

Page 2: Single Page Application: Enrichissez l'expérience utilisateur

Florent PELLET

Développeur Freelance .Net / JavaScript

@florentpellet

wittycoding.com

florentpellet.fr

Twitter :

Blog :

Site :

Page 3: Single Page Application: Enrichissez l'expérience utilisateur

Pourquoi le SPA ?

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

Page 4: Single Page Application: Enrichissez l'expérience utilisateur

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

Page 5: Single Page Application: Enrichissez l'expérience utilisateur

Ergonomie

Feedback

Le Contenu

Minimisez les interactions

Animation◦ > 100ms

◦ < 300ms

◦ Naturelle

Page 6: Single Page Application: Enrichissez l'expérience utilisateur

Réactivité et immersion

Recherche du traitement instantané◦ Feedback

◦ Animation

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

Page 7: Single Page Application: Enrichissez l'expérience utilisateur

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

Page 8: Single Page Application: Enrichissez l'expérience utilisateur

MV* framework

Répartition des rôles ◦ Vues : Templates

◦ Modèles & serveurs : Json

Faible couplage◦ Testable

… Une architecture en somme.

Page 9: Single Page Application: Enrichissez l'expérience utilisateur

Faites votre marché !

KnockoutJs

AngularJS

Backbone

Ember.js

Page 10: Single Page Application: Enrichissez l'expérience utilisateur

Temps réel

Dashboards / monitoring

Outils Collaboratifs

Etat d’un long traitement

Formulaires et notifications en temps réel

Jeux

Suivi des résultats

Page 11: Single Page Application: Enrichissez l'expérience utilisateur

Comment ?

Protocoles◦ Periodic polling

◦ Long polling

◦ Comet / Forever-frame

◦ Server Sent Events / EventSource

◦ WebSockets

Framework◦ SignalR

◦ Socket.io

Page 12: Single Page Application: Enrichissez l'expérience utilisateur

Des problèmes ?

Historique & Workflow des urls◦ Html 5

◦ History.js

◦ Sammyjs

SEO◦ PhantomJS

◦ {{Mustache}}

Page 13: Single Page Application: Enrichissez l'expérience utilisateur

Des questions ?

Page 14: Single Page Application: Enrichissez l'expérience utilisateur

KnockoutJs