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

Le jeu vidéo à la rescousse du web

Embed Size (px)

Citation preview

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

HTMLPages

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

What’s next?

Thanks! Questions?François Zaninotto

@francoisz marmelab

https://joind.in/talk/6717d