Single Page Application: Enrichissez l'expérience utilisateur

670 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
670
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Single Page Application: Enrichissez l'expérience utilisateur

  1. 1. Single Page Application:Enrichissez lexpérience utilisateur
  2. 2. Florent PELLETDéveloppeur Freelance .Net / JavaScript@florentpelletwittycoding.comflorentpellet.frTwitter :Blog :Site :
  3. 3. Pourquoi le SPA ?Parce qu’Internet ce n’est plus que ça
  4. 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. 5. Ergonomie Feedback Le Contenu Minimisez les interactions Animation◦ > 100ms◦ < 300ms◦ Naturelle
  6. 6. Réactivité et immersion Recherche du traitement instantané◦ Feedback◦ Animation Ne pas bloquer l’utilisateur◦ Ergonomie pour les traitements longs
  7. 7. Comment ? JQuery ? Mélange des données et de lavue Plat de spaghettis Génération de la vue cotéserveur Fuite mémoire JQuery oui… pour les animations◦ Et encore… CSS 3
  8. 8. MV* framework Répartition des rôles◦ Vues : Templates◦ Modèles & serveurs : Json Faible couplage◦ Testable … Une architecture en somme.
  9. 9. Faites votre marché ! KnockoutJs AngularJS Backbone Ember.js …
  10. 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. 11. Comment ? Protocoles◦ Periodic polling◦ Long polling◦ Comet / Forever-frame◦ Server Sent Events / EventSource◦ WebSockets Framework◦ SignalR◦ Socket.io
  12. 12. Des problèmes ? Historique & Workflow des urls◦ Html 5◦ History.js◦ Sammyjs SEO◦ PhantomJS◦ {{Mustache}}
  13. 13. Des questions ?
  14. 14. KnockoutJs

×