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

Transcript

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 • CSS3
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? Bootstrap
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/