Level-up Your Interactive
Web DevelopmentPHP Tour Clermont-Ferrand 2016
François Zaninotto - @francoisz - marmelab
web devs vs. video games devs
The Perfect Web Experience
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
Level 0Static Web Page
CHALLENGEUpdate site in 5 seconds
Client/ServerNo peer-to-peer lockstep Accelerate collaboration
Supports Latency
Server-side scripting
Read & Write Forms management
Per-user customization
DatabasePersistent storage
Transactions Powerful query system
ACID
Level 1Dynamic web page
CHALLENGEUpdate one zone
without reloading the entire page
SpritesUpdate part of the screen
Faster redraw Not only pages
AJAXRapid Feedback
Speed up browsing Not only pages
Breaks back button Same-origin policy
Transitions Animations
Pleasure Hides waiting
JS FrameworkBrowser compatibility
Replacement logic Asynchronous Handling
Backend FrameworkSimplify server-side
Offload common web logic Implement MVC separation Provides common structure
Security best practices
Increases complexity Slow
Level 2Interactive site
CHALLENGEOne action updates several screen parts,
without breaking the Back button
Fat ClientMove display logic
to the client
Client-side Framework
MV*Routing
Data binding Templates / Views
Models Data Access
Slower initial load Magic engine
ES5/6Advanced syntax No bad surprises
Object & Functional
Build PhasePass browser limits Combine for perf
Divide for maintainability
Slow down test and deployment
Make debug harder
API-centric architecture
HTML => JSON REST
Multiplatform Standard Simple
CORSCross-Domain AJAX
Level 3Web Application
CHALLENGE60fps animations, real time notifications, quick load,
even on mobile
Pub/SubReal Time updates
Multi-user collaboration
CQRS Event Sourcing
Time Travel Unidirectional data flow
Immutability Fast redraw
Command Query Responsibility Segregation
Game LoopSimple rendering
Even for complex models
Virtual DOMHigh FPS
Client-side prediction
a.k.a. Optimistic UI
Zero Latency
Isomorphic AppsQuick Start Better SEO
Level 4Real time application
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
Thanks! Questions?François Zaninotto
@francoisz marmelab
https://joind.in/talk/6717d