Progressive Enhancement Strategies

London Node User Group (LNUG)

@simonmcmanus

Separation

JS - Interaction

CSS - Presentation

HTML - Information

Old Twitter

Download markup
Download 2mb of JS
Render 140 characters

Google

Suggests degrading gracefully
Google Mobilizer
Cares about load times

Sharing

Share js-required app on:

Slack
Facebook

Hold up..

Why are you trying to work round something that works really well?

Start on the server

Routes
Templates
Data


       .--.
      /    \
     ## a  a
     (   '._)
      |'-- |
    _.\___/_   ___pjax___
  ."\> \Y/|<'.  '._.-'
 /  \ \_\/ /  '-' /
 | --'\_/|/ |   _/
 |___.-' |  |`'`
   |     |  |
   |    / './
  /__./` | |
     \   | |
      \  | |
      ;  | |
      /  | |
jgs  |___\_.\_
     `-"--'---'

REST

Resources
Representations

Mustard Test

Basic
Enhanced


        if(history.pushState) {
            ..
        }

Routes
Templates
Data?

Browserify/

Duo.js

Share templates

Components


        - components
            - station
                - station.js
                - station.scss
                - station.jade
            - search
                - search.js
                - search.scss
                - search.jade

Pages


        - pages
            - home
                - home.js
                - home.scss
                - home.jade
            - station
                - station.js
                - station.scss
                - station.jade



    
        Page.JS
        http://visionmedia.github.io/page.js
    

    
        Pageify
        http://github.com/simonmcmanus/pageify
    

    
        ChangePath
        http://github.com/simonmcmanus/changepath

    

    
        The web is a work in progress.
        It will continue to grow in weird and wonderful ways.
    

    
       EnhanceConf.com
       @EnhanceConf