Notes on Progressive Webapps with Nolan Lawson

150510-notes.md

Progressive Webapps

Application Shell

• Progressive rendering
  • Don't show a blank screen
• Progressive enhancement

Strategies

• Server-side HTML
  • React

IndexedDB/WebSQL for data storage

• localForage
• capable API
• IDB is fast, but blocks the DOM
• Web Workers mitigate this
• No IDB+WW in Safari, use pseudo-worker

60fps animations

• Only use hardware-accelerated:
  • transform
  • opacity
  • Q: colors?
    • A: 2 layers -> opacity

FLIP animations

• Flexibility of JS
• Paul Luis
• Technique, not a library
• First - Last - Invert - Play
• http://codepen.io/nolanlawson/pen/WwPdOL

Workshop: Web Starter Kit

https://gist.github.com/nolanlawson

Secrets

• chrome://flags
  • enable "Developer Tools experiments"
  • in Experiments tab in DevTools: hit shift-key 6 times! 😎

Tools

• gitk --all
• http://rollupjs.org/