Delightful user experiences with Ember and WordPress

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No flicker Smooth Less waiting Flicker Janky More waiting

Slide 6

Slide 6 text

What’s the difference?

Slide 7

Slide 7 text

How they follow links

Slide 8

Slide 8 text

Click 1. Teardown page 2. Download new HTML 3. Show new HTML 4. Change entire page 5. Re-execute JavaScript

Slide 9

Slide 9 text

Click 1.Download new content 2.Change portion of page 3.Show content

Slide 10

Slide 10 text

Payload HTML Bigger

Slide 11

Slide 11 text

Payload JSON Smaller

Slide 12

Slide 12 text

JavaScript Re-initialized Interaction lost

Slide 13

Slide 13 text

JavaScript Loaded once Initialized once Interaction preserved

Slide 14

Slide 14 text

Content Management System

Slide 15

Slide 15 text

Frontend Technology not a Content Management System

Slide 16

Slide 16 text

Best of both world? Small Payloads Fast renders Interactions preserved WordPress Admin

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Delightful user experiences

Slide 19

Slide 19 text

A framework for creating ambitious web applications

Slide 20

Slide 20 text

Single* Page App Framework * most Ember apps have many pages

Slide 21

Slide 21 text

MVC* Framework * has not views and controllers being removed

Slide 22

Slide 22 text

URL Driven

Slide 23

Slide 23 text

Template Rendering

Slide 24

Slide 24 text

Component First

Slide 25

Slide 25 text

SDK for the web

Slide 26

Slide 26 text

URL-Template-Component SDK for web apps

Slide 27

Slide 27 text

Software Development Toolkit

Slide 28

Slide 28 text

EmberCLI

Slide 29

Slide 29 text

Addons 1000+

Slide 30

Slide 30 text

Ember Fastboot Express.js server Renders Ember app Outputs HTML Super fast loads Search Engine Friendly

Slide 31

Slide 31 text

Excellent Guides

Slide 32

Slide 32 text

Not an introduction to Ember talk

Slide 33

Slide 33 text

Platform* native app Platform is browser

Slide 34

Slide 34 text

App Talks to API Shows content Allows interactions API wp-api wp-content wp-admin

Slide 35

Slide 35 text

Ajax Ember app asks WordPress REST API for content.

Slide 36

Slide 36 text

Ember Data 1.Calls WordPress API 2.Convert response to objects 3.Connects relationships JSONAPI Specification Standard URL patterns Structure of JSON http://jsonapi.org

Slide 37

Slide 37 text

Relationships

Slide 38

Slide 38 text

WordPress REST API Specific No Relationships Embedding Embedding 1._embedded for each post 2.Difficult to generalize 3.Duplicates data

Slide 39

Slide 39 text

Sideloading 1.included array 2.Easy to generalize 3.Requires object cache wp-rest-jsonapi-serializer • WordPress Plugin • JSONAPI compatibility • Supports relationships via Pods framework

Slide 40

Slide 40 text

Models Custom model classes Attributes hasMany, belongsTo Pods Custom post types Custom fields Relationship fields

Slide 41

Slide 41 text

Pods + JSONAPI Spec Dasherize field names (ie. featured-speakers) Pluralize hasMany (ie. Conference has `talks` property) Singularize belongsTo (ie. Talk has `presenter` property) In Pods, Use IDs for relationships

Slide 42

Slide 42 text

wp-rest-jsonapi-serailizer Supports posts Supports categories and tags Supports featured image Supports pagination Supports image fields via Pods * - open source, contributions welcome Read only*

Slide 43

Slide 43 text

EWP Stack Ember.js Ember Fastboot Ember Data JSONAPI Spec WordPress WordPress REST API wp-rest-jsonapi-serializer Pods Framework

Slide 44

Slide 44 text

Delightful user experiences

Slide 45

Slide 45 text

Taras Mankovski EmberSherpa Ember apprenticeship and mentoring for teams @embersherpa

Slide 46

Slide 46 text

Links • emberjs.com  Official website of Ember.js framework • ember-cli.com  Documentation for Ember’s command line interface • ember-fastboot.com  Documentation for Ember’s Progressive Enhancement App server • wp-rest-jsonapi-serializer  WordPress plugin that makes WP REST speak JSONAPI • bustle.com  Modern publishing site built with Ember.js • embermeetup.com  Modern content site built with Ember + WordPress + JSONAPI + Pods + wp-jsonapi-serializer • https://github.com/EmberMeetup/website  Source code for embermeetup.com

Slide 47

Slide 47 text

Thank you