Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Delightful user experiences with Ember and Word...

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.

Taras Mankovski

August 06, 2016
Tweet

More Decks by Taras Mankovski

Other Decks in Technology

Transcript

  1. Click <a> 1. Teardown page 2. Download new HTML 3.

    Show new HTML 4. Change entire page 5. Re-execute JavaScript
  2. 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
  3. WordPress REST API Specific No Relationships Embedding Embedding 1._embedded for

    each post 2.Difficult to generalize 3.Duplicates data
  4. 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
  5. 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
  6. 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*
  7. EWP Stack Ember.js Ember Fastboot Ember Data JSONAPI Spec WordPress

    WordPress REST API wp-rest-jsonapi-serializer Pods Framework
  8. 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