The Return

— of the —

Progressive Web

HTTP 0.9

— circ. 1991 —

graph TD;
  web[http://example.com];
  html[HTML Content];
  web-->html;
  html-- Link -->web;
  
<html>
<head><title>My Site</title></head>
<body>
  <h1>Welcome!</h1>
  <p>etc...</p>
</body>
</html>

Rise

— of the —

Googlebot

graph TD;
  a[Super Important Page];
  b[Page];
  c[Page];
  d[Page];
  e[Page];
  f[Page];
  g[Page];
  a-- Link -->b;
  b-- Link -->a;
  c-- Link -->a;
  d-- Link -->c;
  d-- Link -->a;
  e-- Link -->a;
  f-- Link -->a;
  g-- Link -->a;

Good SEO

— starts with —

Crawlable content

JavaScript

— circ. 1995 —

graph TD;
  web[http://example.com];
  html[HTML Content];
  js[JavaScript];
  web-->html;
  html-- Link/Form -->web;
  html-->js;
  js-- "DHTML" -->html;

10% Front-End UI Code

jQuery

jQuery

Progressive

Enhancement

— circ. 2003 —

“…all the way up from “baseline”, to “legacy”, to “midrange”, to “modern” and beyond.”

Steve Champeon

“Build in layers, from HTML to CSS to Javascript. This creates a less fragile and more foolproof Web page”

Luke Wroblewski

“Progressive enhancement becomes an important strategy in order to deal with today and tomorrow’s diverse landscape.”

Brad Frost

“Fundamentally, progressive
enhancement is about accessibility”

Aaron Gustafson

Building with

— the web’s —

Foundational elements

 Accessible,

Curlable

— & —

Crawlable

Until…

The Ajax Revolution

— circ. 2005 —

graph TD;
  web[http://example.com];
  api[http://api.example.com];
  html[HTML Content];
  js[JavaScript];
  web-->html;
  html-- Link/Form -->web;
  html-->js;
  js-- AJAX -->api;
  api-->js;
  js-- "DHTML" -->html;

Rise

— of the —

Single Page App

graph TD;
  web[http://example.com];
  api[http://api.example.com];
  js[JavaScript];
  web-- HTML Transport -->js;
  js-- AJAX -->api;
  api-->js;

100% Front-End UI Code

AngularJS

AngularJS

The tradeoff?

<html>
<head><title>My Site</title></head>
<body>
  <script src="my-awesome-app.js"></script>
</body>

Your single page app without JavaScript

“Make sure your web design adheres to the principles of progressive enhancement as this helps our systems (and a wider range of browsers) see usable content and basic functionality”

Google Webmaster Central

“We don’t have any non-JavaScript users”?

“All your users are non-JS
while they’re downloading your JS”

Jake Archibald, Google

Designed

— for the —

real world

If you haven’t tested your design
on a spotty 3G connection,
you haven’t tested your design

— When should we use —

progressive

enhancement?

— Why should we —

Create single

page apps?

Make a choice…

Progressive enhancement or rich, app-like experience?

Meanwhile…

Node.js

Node.js

Browserify

— The promise of —

Isomorphic JavaScript

Rendr

&

Backbone

100% Isomorphic UI Code

React

React

// Server
React.renderToString(<Component />);

<div id="app"
  data-reactid=".23qqlyvw6io"
  data-react-checksum="509597258">
  
  <h1 data-reactid=".23qqlyvw6io.0" >Welcome!</h1>
  <p data-reactid=".23qqlyvw6io.1" >etc...</p>
  
</div>
<script src="my-awesome-app.js"></script>

// Client
React.render(<Component />, element);

// Your server rendered code
// is now a single page app!

graph TB;
  web[http://example.com];
  api[http://api.example.com];
  html[HTML Content];
  js[React Code];
  web-- I. Runs -->js;
  js-- II. Request -->api;
  api-- III. Response -->js;
  js-- IV. Renders --> html;
  html-- V. Runs --> js;

Fig. I — With Client JavaScript

graph TB;
  web[http://example.com];
  html[HTML Content];
  web-- I. Runs React code -->html;
  html-- II. Link/Form --> web;

Fig. II — Without Client JavaScript

Ryan Florence’s

react-router-mega-demo

Holy grail

Beyond React…

virtual-dom

Ember’s

Glimmer

&

FastBoot

In closing…

Making a choice…

Between progressive enhancement or a rich, app-like experience?

Why don't we have both?

— “UX specialist”? —


Progressive

Enhancement is all

about the user

— “Front end developer”? —


You should be

looking at this

right now

The future

— belongs to —

Rich, progressive apps

@markdalgleish

Looking to get started with progressive React?