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

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

2. Florent PELLET
Développeur Freelance .Net / JavaScript
@florentpellet
wittycoding.com
florentpellet.fr
Twitter :
Blog :
Site :

3. Pourquoi le SPA ?
Parce qu’Internet ce n’est plus que ça

4. 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

5. Ergonomie
 Feedback
 Le Contenu
 Minimisez les interactions
 Animation
◦ > 100ms
◦ < 300ms
◦ Naturelle

6. Réactivité et immersion
 Recherche du traitement instantané
◦ Feedback
◦ Animation
 Ne pas bloquer l’utilisateur
◦ Ergonomie pour les traitements longs

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

8. MV* framework
 Répartition des rôles
◦ Vues : Templates
◦ Modèles & serveurs : Json
 Faible couplage
◦ Testable
 … Une architecture en somme.

9. Faites votre marché !
 KnockoutJs
 AngularJS
 Backbone
 Ember.js
 …

10. Temps réel
 Dashboards / monitoring
 Outils Collaboratifs
 Etat d’un long traitement
 Formulaires et notifications en temps réel
 Jeux
 Suivi des résultats

11. Comment ?
 Protocoles
◦ Periodic polling
◦ Long polling
◦ Comet / Forever-frame
◦ Server Sent Events / EventSource
◦ WebSockets
 Framework
◦ SignalR
◦ Socket.io

12. Des problèmes ?
 Historique & Workflow des urls
◦ Html 5
◦ History.js
◦ Sammyjs
 SEO
◦ PhantomJS
◦ {{Mustache}}

13. Des questions ?

14. KnockoutJs