Building Websites with the REST API

Slide 1

Slide 1 text

Building Websites with the REST API WordCamp Asheville 2016

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

“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

Slide 6

Slide 6 text

Is there a better way?

Slide 7

Slide 7 text

“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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Ustwo ustwo.com

Slide 10

Slide 10 text

Quartz qz.com

Slide 11

Slide 11 text

Google I/o events.google.com/io2016

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

User Expectations

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

leaping the hurdles Browser History? History API

Slide 22

Slide 22 text

leaping the hurdles Analytics? Virtual page load

Slide 23

Slide 23 text

leaping the hurdles SEO? Well...

Slide 24

Slide 24 text

leaping the hurdles Server Side Rendering? Ah...

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

leaping the hurdles Client/server Code Partitioning? Mustache

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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