En client-serveur traditionnel, chaque action de l'utilisateur induit un recalcul de toute la page côté serveur, puis le transport du HTML vers le navigateur. PHP et ses frameworks MVC sont conçus pour gérer cette architecture. Mais quand AJAX et HTML5 viennent bouleverser la répartition de ce qui se fait côté client et côté serveur, il est temps de repenser nos outils. Quelle part de nos frameworks reste pertinente dans une architecture API-centric? PHP est-il condamné à ne servir que des APIs REST? Et quelles architectures côté client peuvent prendre le relais sans faire exploser la complexité de développement ? Paradoxalement, c'est du monde du jeu vidéo que viendra peut-être la clé des applications de demain. Une conférence sans code, mais avec des dessins. Et des idées pour demain.

1. Level-up
Your Interactive
Web Development
PHP Tour Clermont-Ferrand 2016
François Zaninotto - @francoisz - marmelab

3. web devs vs. video games devs

4. The Perfect Web Experience

6. Super Web Interactivity
Maturity Model (SWIMM)
Glory of Interactivity
Level 0: Static web page
Level 1: Dynamic web page
Level 2: Interactive site
Level 3: Web application
Level 4: Real time application

7. HTML
Pages

8. Level 0
Static Web Page

10. CHALLENGE
Update site in 5 seconds

11. Client/Server
No peer-to-peer lockstep
Accelerate collaboration
Supports Latency

12. Server-side
scripting
Read & Write
Forms management
Per-user customization

13. Database
Persistent storage
Transactions
Powerful query system
ACID

15. Level 1
Dynamic web page

17. CHALLENGE
Update one zone
without reloading the entire page

18. Sprites
Update part of the screen
Faster redraw
Not only pages

20. AJAX
Rapid Feedback
Speed up browsing
Not only pages
Breaks back button
Same-origin policy

21. Transitions
Animations
Pleasure
Hides waiting

22. JS Framework
Browser compatibility
Replacement logic
Asynchronous Handling

23. Backend
Framework
Simplify server-side
Offload common web logic
Implement MVC separation
Provides common structure
Security best practices
Increases complexity
Slow

25. Level 2
Interactive site

27. CHALLENGE
One action updates several screen parts,
without breaking the Back button

28. Fat Client
Move display logic
to the client

29. Client-side
Framework
MV*
Routing
Data binding
Templates / Views
Models
Data Access
Slower initial load
Magic engine

31. ES5/6
Advanced syntax
No bad surprises
Object & Functional

36. Build Phase
Pass browser limits
Combine for perf
Divide for maintainability
Slow down test and
deployment
Make debug harder

39. API-centric
architecture
HTML => JSON
REST
Multiplatform
Standard
Simple

41. CORS
Cross-Domain AJAX

44. Level 3
Web Application

47. CHALLENGE
60fps animations, real time notifications, quick load,
even on mobile

48. Pub/Sub
Real Time updates
Multi-user collaboration

52. CQRS
Event Sourcing
Time Travel
Unidirectional data flow
Immutability
Fast redraw

53. Command Query Responsibility Segregation

56. Game Loop
Simple rendering
Even for complex models

58. Virtual DOM
High FPS

61. Client-side
prediction
a.k.a.
Optimistic UI
Zero Latency

64. Isomorphic
Apps
Quick Start
Better SEO

68. Level 4
Real time application

71. Super Web Interactivity
Maturity Model (SWIMM)
Glory of Interactivity
Level 0: Static web page
Level 1: Dynamic web page
Level 2: Interactive site
Level 3: Web application
Level 4: Real time application

72. What’s next?

73. Thanks!
Questions?
François Zaninotto
@francoisz
marmelab
https://joind.in/talk/6717d