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
   

   View Slide

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
   

   View Slide

3. The Situation
   Websites are kind of out-of-date:
   ●
   Very little human interaction
   ●
   Clunky transitions between content
   ●
   Designers are very constrained
   

   View Slide

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?
   

   View Slide

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
   

   View Slide

6. Is there a better way?
   

   View Slide

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
   

   View Slide

8. UCLA School of the arts and architecture
   www.arts.ucla.edu
   

   View Slide

9. Ustwo
   ustwo.com
   

   View Slide

10. Quartz
    qz.com
    

    View Slide

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

    View Slide

12. Technology!
    HTML5:
    ●
    Application cache API
    ●
    History API
    ●
    CSS3
    

    View Slide

13. Moar Technology!
    New stuff:
    ●
    Service worker
    ●
    Http/2
    ●
    JS frameworks
    – React/Redux
    – Ember
    – Angular
    – Backbone
    

    View Slide

14. “excuse me, what does any of this have to
    do with WordPress or the REST API?”
    –Y'all
    

    View Slide

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
    

    View Slide

16. User Expectations
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

20. The hurdles
    ●
    Browser history
    ●
    Analytics
    ●
    SEO
    ●
    Server-side rendering
    – (SEO)
    – Client/server code partitioning
    – Speed of initial load
    

    View Slide

21. leaping the hurdles
    Browser History? History API
    

    View Slide

22. leaping the hurdles
    Analytics? Virtual page load
    

    View Slide

23. leaping the hurdles
    SEO? Well...
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. leaping the hurdles
    Speed of Initial Load? Server Side rendering?
    Come to crazy town!
    

    View Slide

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
    

    View Slide

29. Thank You
    Any questions?
    @jacklenox
    > Automattic.com/work-with-us/
    

    View Slide