Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Websites with the REST API

Building Websites with the REST API

Slides from my talk at WordCamp Asheville 2016. Warning: I'm sharing these mostly for the benefit of those in attendance. Several parts involved live demonstrations. The talk was recorded and will be on WordPress.tv in due course.

Some other links I mentioned:
- Google's documentation for tracking Single Page Applications: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications#overview
- Jake Archibalds' excellent talk about Service Worker at Google IO 2016: https://www.youtube.com/watch?v=cmGr0RszHc8


Jack Lenox

June 05, 2016


  1. Building Websites with the REST API WordCamp Asheville 2016

  2. The Situation Websites are kind of out-of-date: • If you

    have no connection, you get nothing • If you have a sporadic connection You often get nothing • If you have a slow connection You often get nothing
  3. The Situation Websites are kind of out-of-date: • Very little

    human interaction • Clunky transitions between content • Designers are very constrained
  4. The Situation A lot of waste in the current paradigm:

    • Why do we go to the server by default? • Why do we keep going back to the server? • Why aren't we using the technologies that help us mitigate this?
  5. “Good design is environmentally-friendly. Design makes an important contribution to

    the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.” –Dieter Rams. 10 principles of good design
  6. Is there a better way?

  7. “Since the start of the web, for every interaction, there

    have been two supercomputers involved. The supercomputer sitting in front of you, and the supercomputer in a data centre somewhere. We have barely begun to take advantage of that supercomputer sitting in front of you.” –Trek Glowacki, Ember core team
  8. UCLA School of the arts and architecture www.arts.ucla.edu

  9. Ustwo ustwo.com

  10. Quartz qz.com

  11. Google I/o events.google.com/io2016

  12. Technology! HTML5: • Application cache API • History API •

  13. Moar Technology! New stuff: • Service worker • Http/2 •

    JS frameworks – React/Redux – Ember – Angular – Backbone
  14. “excuse me, what does any of this have to do

    with WordPress or the REST API?” –Y'all
  15. In a nutshell, the REST API makes it easier than

    ever to get pure data from our WordPress websites, and thus it allows us to separate our presentation layer from our data layer
  16. User Expectations

  17. 2010 – Ethan Marcotte coins the term, Responsive web design

    2014 – My dad knows what responsive web design is, and judges websites that aren't responsive as inferior
  18. 2013 – Alex Feyerke coins the term Offline first 2017

    – My dad Will know what Offline First is, and will judge websites that aren't offline first as inferior
  19. The hurdles • Browser history • Analytics • SEO •

    Client/server Code Partitioning • Speed of Initial Load
  20. The hurdles • Browser history • Analytics • SEO •

    Server-side rendering – (SEO) – Client/server code partitioning – Speed of initial load
  21. leaping the hurdles Browser History? History API

  22. leaping the hurdles Analytics? Virtual page load

  23. leaping the hurdles SEO? Well...

  24. leaping the hurdles Server Side Rendering? Ah...

  25. leaping the hurdles Another way to speed up page load?

  26. leaping the hurdles Client/server Code Partitioning? Mustache

  27. leaping the hurdles Speed of Initial Load? Server Side rendering?

    Come to crazy town!
  28. Further Reading • egghead.io/courses/react-fundamentals • egghead.io/courses/getting-started- with-redux • github.com/ustwo/ustwo.com-frontend •

    github.com/automattic/picard • themeshaper.com/2015/11/23/javascript -theme-tutorial
  29. Thank You Any questions? @jacklenox > Automattic.com/work-with-us/