Delightful user experiences with Ember and WordPress

In this presentation I show the building blocks of a WordPress + Ember.js stack. Together they can be used to create delightful user experiences for the web.

Transcript

5. No flicker Smooth Less waiting Flicker Janky More waiting
6. What’s the difference?
7. How they follow links
8. Click <a> 1. Teardown page 2. Download new HTML 3. Show new HTML 4. Change entire page 5. Re-execute JavaScript
9. Click <a> 1.Download new content 2.Change portion of page 3.Show content
10. Payload HTML Bigger
11. Payload JSON Smaller
12. JavaScript Re-initialized Interaction lost
13. JavaScript Loaded once Initialized once Interaction preserved
14. Content Management System
15. Frontend Technology not a Content Management System
16. Best of both world? Small Payloads Fast renders Interactions preserved WordPress Admin
18. Delightful user experiences
19. A framework for creating ambitious web applications
20. Single* Page App Framework * most Ember apps have many pages
21. MVC* Framework * has not views and controllers being removed
22. URL Driven
23. Template Rendering
24. Component First
25. SDK for the web
26. URL-Template-Component SDK for web apps
27. Software Development Toolkit
28. EmberCLI
29. Addons 1000+
30. Ember Fastboot Express.js server Renders Ember app Outputs HTML Super fast loads Search Engine Friendly
31. Excellent Guides
32. Not an introduction to Ember talk
33. Platform* native app Platform is browser
34. App Talks to API Shows content Allows interactions API wp-api wp-content wp-admin
35. Ajax Ember app asks WordPress REST API for content.
36. 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
37. Relationships
38. WordPress REST API Specific No Relationships Embedding Embedding 1._embedded for each post 2.Difficult to generalize 3.Duplicates data
39. 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
40. Models Custom model classes Attributes hasMany, belongsTo Pods Custom post types Custom fields Relationship fields
41. 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
42. 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*
43. EWP Stack Ember.js Ember Fastboot Ember Data JSONAPI Spec WordPress WordPress REST API wp-rest-jsonapi-serializer Pods Framework
44. Delightful user experiences
45. Taras Mankovski EmberSherpa Ember apprenticeship and mentoring for teams @embersherpa
46. 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-json- api-serializer • https://github.com/EmberMeetup/website
 Source code for embermeetup.com
47. Thank you