Api's and ember js

API’s and EmberJS
Edwin Cruz
MagmaConf 2013, Manzanillo, Colima

Plan
• API best practices
• Better API’s
• EmberJS
• Lessons learned

GET /api/products #List
{"products" :
[
{"product" : { "id" : 1, "name" : "Product 1", "status" : "archived"} },
{"product" : { "id" : 2, "name" : "Product 2", "status" : "active" } }
]
}
REST + CRUD

REST + CRUD
GET /api/products/2 #Show

REST + CRUD
POST /api/products #Create
{
"name" : "Product 2"
}

REST + CRUD
PUT /api/products/2 #Update
{
"name" : "Product dos"
}

REST + CRUD
DELETE /api/products/2 #Delete

API VERSIONING
• API Internal (internal apps)
• API External (mobile app ? )
• API Public (general public)

API VERSIONING
/int/api/products
/ext/api/products
/pub/api/products

API VERSIONING
/int/api/products?version=2
/ext/api/products?version=2
/pub/api/products?version=2

API VERSIONING
/v2/int/api/products
/v2/ext/api/products
/v2/pub/api/products

API VERSIONING
http://int.myapp.com/products
http://api.myapp.com/products

IDEAL WORLD
Correct usage of: Accept Header

IDEAL WORLD
Accept: application/vnd.mycompany.com;

IDEAL WORLD
Accept: application/vnd.mycompany.com;
version=2,application/json

HTTP CODES
200 OK
201 Created
202 Accepted
400 Bad Request
401 Unauthorized
402 Payment Required
404 Not Found
409 Conﬂict
422 Unprocessable Entity
500 Internal Server Error
503 Service Unavailable

HTTP CODES
HTTP/1.1 200 ok
GET /v1/products
{"products" :
[
{"product" : { "id" : 1, "name" : "Product 1", "status" : "archived"} },
]
}

HTTP CODES
HTTP/1.1 201 Created
POST /v1/products
{
“product”: [
“name” : “name”
]
}

HTTP CODES
HTTP/1.1 400 Bad Request
{
“errors”: [
“Invalid JSON structure”,
“unexpected TSTRING, expected ‘}’ at
line 2”
]
}

HTTP CODES
HTTP/1.1 401 Unauthorized
{
“errors”: [
“access denied”
]
}

HTTP CODES
{
“errors”: [
“api_key not valid”,
“api_key can’t contain spaces”
]
}

HTTP CODES
{
“errors”: [
“api_key not found, please visit
http://account.myapp.com/api and register”
]
}

HTTP CODES
HTTP/1.1 422 Unprocessable Entity
{
“errors”: [
“vendor_code: can’t be blank”
],
“doc”: [
“vendor_code”: [
“description” : “Vendor code”,
“format” : “Three letters followed by 4 digits”,
“example” : “SOL1234”
]
]
}

HTTP CODES
HTTP/1.1 500 Internal Server Error
{
“exception”: [
“Database not available”
]
}

CODIGOS HTTP
HTTP/1.1 503 Service Unavailable
{
“messages”: [
“Under maintenance”
]
}

Better API’s
• Reduce number of requests
• DRY
• Cacheable
• Scalable

Better API’s
{ products: [
{product: {
id: 1,
name: 'Product 1',
status: 'active',
code: 'PRO3455',
vendor: {
id: 3,
name: 'SuperVendor'
},
variants: [
variant: { sku: 'AAAA1', size: 'S', units_on_hand: 1, product_id: 1},
variant: { sku: 'AAAA2', size: 'M', units_on_hand: 3, product_id: 1},
]
}}
]}

Better API’s
{ products: [
{product: {
id: 1,
name: 'Product 1',
status: 'active',
code: 'PRO3455',
vendor: {
id: 3,
name: 'Super Vendor'
},
variants: [
]
}}
]}

Better API’s
{ products: [
{product: {
id: 1,
name: 'Product 1',
vendor: {
id: 3,
},
variants: []
}},
{product: {
id: 99,
name: 'Product 99',
vendor: {
id: 3,
},
variants: []
}}
]}

Better API’s
{ products: [
{product: {
id: 1,
name: 'Product 1',
vendor: {
id: 3,
},
variants: []
}},
{ product: {
id: 99,
name: 'Product 99',
vendor: {
id: 3,
},
variants: []
}}
]}

Better API’s
{ products: [
{product: {
id: 1,
name: 'Product 1',
vendor_id: 3,
variants: []
}},
{product: {
id: 99,
name: 'Product 99',
vendor_id: 3,
variants: []
}}
],
vendors: [{
id: 3,
}]
}

Better API’s
{ products: [
{product: {
id: 1,
name: 'Product 1',
vendor_id: 3,
variants: []
}},
{product: {
id: 99,
name: 'Product 99',
vendor_id: 3,
variants: []
}}
],
vendors: [{
id: 3,
name: 'SuperVendor'
}]
}

Better API’s
{ products: [
{ id: 1,
name: 'Product 1',
vendor_id: 3,
variants: []
},
{ id: 99,
name: 'Product 99',
vendor_id: 3,
variants: []
}
],
vendors: [{
id: 3,
name: 'SuperVendor'
}]
}

Better API’s
{ products: [
{ id: 1,
variants: [ {id : 3, size:‘S’, property_ids: [3, 4, 5] },
{id : 4, size:‘M’, property_ids: [5, 6, 7] }
},
{ id: 99,
variants: [ {id : 5, size:‘S’, property_ids: [6] },
{id : 6, size:‘M’, property_ids: [7] }
}
],
properties: [{id: 3, name: 'Cotton'},
{id: 4, name: 'Water Resistant'},
{id: 5, name: 'Imported'},
{id: 6, name: 'Special'},
{id: 7, name: 'Super Property'},
]
}

Better API’s
{ products: [
{ id: 1,
version: 1369972820,
},
{ id: 99,
version: 1369886447,
}
],
]
}

Better API’s
{ products: [
{ id: 1,
version: 1369972820,
},
{ id: 99,
version: 1369886447,
}
],
]
}
Russian Doll Caching!!!

Better API’s
def index
if stale?(SizeRun.count)
respond_with SizeRun.all
end
end
Automatic Etag/last_modiﬁed generation!!!
Rails to the rescue!

Better API’s
Rails to the rescue!
First load Following loads
304 Not Modiﬁed

Better API’s
Counter Caches
{ products: [
{ id: 1,
version: 1369972820,
variants: [ {id : 3, size:‘S’, property_ids: [3, 4, 5], inventory_units_on_hand_count: 5 },
{id : 4, size:‘M’, property_ids: [5, 6, 7], inventory_units_on_hand_count: 0 }
},
{ id: 99,
version: 1369886447,
variants: [ {id : 5, size:‘S’, property_ids: [6], inventory_units_on_hand_count: 15 },
{id : 6, size:‘M’, property_ids: [7], inventory_units_on_hand_count: 500 }
}
]}

Better API’s
Counter Caches
class InventoryUnit < ActiveRecord::Base
belongs_to :variant,
:counter_cache => :inventory_units_on_hand_count,
:conditions => "status = ‘on_hand’"
end

Solr:
SolrTM is the popular, blazing fast open
source enterprise search platform from
the Apache LuceneTMproject. Its major
features include powerful full-text
search, hit highlighting, faceted
search, near real-time indexing,
dynamic clustering, database
integration, rich document (e.g., Word,
PDF) handling, and geospatial search.

Sunspot - Solr
• Solr powerful interface
• Expressive DSL
• Easily pluggable in to any ORM

Sunspot - Solr
class Post < ActiveRecord::Base
searchable do
text :title, :body
text :comments do
comments.map { |comment| comment.body }
end
boolean :featured
integer :blog_id
integer :expensive_operation
integer :category_ids, :multiple => true
double :average_rating
time :published_at
time :expired_at
string :sort_title do
title.downcase.gsub(/^(an?|the)/, '')
end
end
end

Sunspot - Solr
class Post < ActiveRecord::Base
searchable(auto_index: false) do
text :title, :body
text :comments do
comments.map { |comment| comment.body }
end
boolean :featured
integer :blog_id
integer :expensive_operation
integer :category_ids, :multiple => true
double :average_rating
time :published_at
time :expired_at
string :sort_title do
title.downcase.gsub(/^(an?|the)/, '')
end
end
end

Sunspot - Solr
Post.search do
fulltext 'best pizza'
with :blog_id, 1
with(:published_at).less_than Time.now
order_by :published_at, :desc
paginate :page => 2, :per_page => 15
facet :category_ids, :author_id
end

Sunspot - Solr
• Results
• Contains AR instances
• ‘Lazy’ loading
• Hits
• Solr indexed data
• super fast access
results vs hits

Sunspot - Solr
results vs hits
class ResultProxy < ResultHit
def method_missing(method, *args, &block)
begin
hit.instance.send(method)
rescue
hit.stored(method)
end
end
end

Sunspot - Solr
results vs hits
def method_missing(method, *args, &block)
begin
if setup.stored_ﬁelds(method).empty?
hit.instance.send(method)
else
hit.stored(method)
end
rescue
hit.instance.send(sym, *args)
end
end
end

Sunspot - Solr
results vs hits
def value(of)
hit.stored(of)
end
def has_property? name
!setup.stored_ﬁelds(name).empty?
end
end

Sunspot - Solr
Associations?
def method_missing method, *args
@solr_instance ||= Search::Collection.new(Program.search { with(:id, id)}).ﬁrst
if @solr_instance && @solr_instance.has_property?(method)
@solr_instance.value(method)
else
super method, *args
end
end
$ model_active_record = Model.ﬁnd(id)
$ model_active_record.association.value_stored_in_solr

Serializers
• ActiveModel::Serializer
• Rabl
• JSON Builder
• render json: hash

Serializers
• ActiveModel::Serializer <= no yet,WIP
• Rabl
• JSON Builder

Serializers
• Rabl
• JSON Builder <= Good enough

Serializers
• Rabl
• JSON Builder
• render json: hash <= Hipster

Serializers
•Rabl <= Good enough with cache
• JSON Builder

Serializers
{ products: [
{product: {
id: 1,
name: 'Product 1',
status: 'active',
code: 'PRO3455',
vendor: {
id: 3,
name: 'SuperVendor'
},
variants: [
]
}}
]}

Serializers
{ products: [
{product: {
id: 1,
name: 'Product 1',
status: 'active',
code: 'PRO3455',
vendor: {
id: 3,
name: 'SuperVendor'
},
variants: [
]
}}
]}
No ideal for real world

Serializers
{meta: [{
"page": 1,
"per_page": 100,
"pages": 708,
"total": 70772
}],
"products": [
{.},{.},{.},{.}
],
"suppliers": [
{.},{.},{.},{.}
],
"properties": [
{.},{.},{.},{.}
],
}
Ideal for real world

Serializers
#index.rabl
object false
node(:style_search) do
[{
page: @search_results.results.current_page,
total_pages: @search_results.results.total_pages,
per_page: @search_results.results.per_page,
}]
end
node :products do
@search_results.results
end
node :suppliers do
@suppliers
end
node :properties do
@properties
end
Ideal for real world

EmberJS
A javascript framework for creating ambitious web
applications.

Modern Web 2.0
Problems
• Data binding
• Real time updates
• Performance
• Patterns
• Scalability

Modern Web 2.0
Problems
Logo Login Info
Proﬁle Info
Login Info
Menu
List of items with edit options
FooterFooterFooter

Modern Web 2.0
Problems
Logo Currently selected Login Info
Proﬁle Info
Login Info
Menu
List of items with edit options TopViewed
FooterFooterFooter

EmberJS
• Model
• Router
• Controller
• View
• Template

EmberJS - Models
• Handled by Ember Data
• Library to manage remote data
• Acts as ‘ORM’
• Transactional

EmberJS - Models
MyApp.Variant = DS.Model.extend({
sku: DS.attr('string'),
size: DS.attr('string'),
unitsOnHand: DS.attr('string'),
product: DS.belongsTo('MyApp.Product')
})
variants: [
{ sku: 'AAAA1', size: 'S', units_on_hand: 1, product_id: 1},
{ sku: 'AAAA2', size: 'M', units_on_hand: 3, product_id: 1},
]

EmberJS - Observers
• .property
• computed properties
• .observes
• reacts when something happens
• bindings
• ensure objects in multiple places are in

EmberJS - Observes
MyApp.SavingMessage = Ember.Mixin.create({
observeSaving: function() {
if(this.get('isSaving') && !this.get('queueSavingMessage')) {
this.set('queueSavingMessage', Ember.ﬂashQueue.pushFlash('spindicator', 'Saving', true, true));
} else {
if(this.get('queueSavingMessage')) {
this.set('queueSavingMessage.specialFlag', false);
this.set('queueSavingMessage', null);
}
}
}.observes('isSaving')
});
MyApp.Program = DS.Model.extend(MyApp.SavingMessage, {
....
....
}

EmberJS - Models/
bindings
• isLoaded
• isReloading
• isDirty
• isSaving
• isDeleted
• isError
• isNew
• isValid

EmberJS - Models/
callbacks
• didLoad
• didReload
• didUpdate
• didCreate
• didDelete
• becameInvalid
• becameError

EmberJS - Models/
callbacks
var product = MyApp.Product.createRecord();
product.on('didCreate', this, function() {
console.log(‘Product created’);
});

EmberJS - Models
var MyAppAdapter = DS.RESTAdapter.extend();
MyAppAdapter.configure('MyApp.ProductSearch', {sideloadAs: 'products'});
MyAppAdapter.configure('MyApp.Properties', {sideloadAs: 'properties'});
MyAppAdapter.configure('MyApp.Supplier', {sideloadAs: 'suppliers'});

EmberJS - Models
MyApp.ProductsSearch = DS.Model.extend({
perPage: DS.attr('number'),
totalPages: DS.attr('number'),
totalEntries: DS.attr('number'),
page: DS.attr('number'),
products: DS.hasMany('MyApp.Product')
})

EmberJS - Models/
transactions
var transaction = this.get(‘store’).transaction();
var product = transaction.createRecord(MyApp.Product, {});
product.on('didCreate', this, function() {
console.log(‘program created’);
});
transaction.commit();

EmberJS - Router
• EmberJS way to manage states
• Each state is represented by a URL
• User interaction causes URL to change
• redirected to a new URL
• Updates controller
• Change template screen

EmberJS - Router
App.Router.map(function() {
this.route('index', { path: '/'});
this.resource('program', {path: '/programs/:program_id'}, function(){
this.resource('programStyle', {path: '/styles/:style_id'}, function(){
this.route('newImage', { path: '/image/new'});
this.route('purchaseInfoTab', { path: '/purchase_info'});
});
this.resource('programSku', {path: '/skus/:sku_id'});
});
});

EmberJS - Controllers
• Designed to decorate models
• display logic
• Properties frontend speciﬁc
• they don’t need to be saved
• Decorates data
• Bridge between your data and your

EmberJS - Controllers
App.ApplicationController = Ember.Controller.extend({
// the initial value of the `search` property
search: '',
query: function() {
// the current value of the text ﬁeld
var query = this.get('search');
this.transitionToRoute('search', { query: query });
}
});

EmberJS - Route
App.Router.map(function() {
this.resource('post', { path: '/posts/:id' });
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return App.Post.ﬁnd(params.id);
},
setupController: function(controller, model) {
this.controllerFor(‘myPosts’, model);
},
renderTemplate: function() {
this.render(‘betterPost’);
}
});

EmberJS -Views
• Barely used, because of handlebars
• Sophisticated user events
• Create re-usable components

EmberJS -Views
var view = Ember.View.create({
templateName: 'say-hello',
name: "Bob"
});
view.appendTo('#container');

EmberJS -Views/Events
MyApp.UpVoteView = Ember.View.extend({
tagName: 'span',
title: 'Upvote',
templateName: 'common/upvote',
click: function(evt) {
this.get('controller').send('upVote');
}
});

EmberJS - Templates
• Handlebars is used as template engine
• regular HTML with embedded handlebar
expressions
• Minimal Templating on Steroids
• Emblem.js if you are haml lover

Handlebars
<div class="entry">
<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>
<div class="body">
{{body}}
</div>
</div>

EmberJS
Request
Router
View
Template
Model
Controller
HTML
Route

EmberJS
MyApp = Ember.Application.create();
var MyAppAdapter = DS.RESTAdapter.extend();
MyApp.Store = DS.Store.extend({
revision: 12,
adapter: 'MyAppAdapter'
});

EmberJS
$ application.handlebars
<header>
<h1>MagmaConf Talk!</h1>
</header>
<div>
{{outlet}}
</div>
{{ outlet modal }}
<footer>
©2013 Crowd Interactive.
</footer>

EmberJS
$products/index.handlebars
{{#if content.isLoaded}}
<div class="row">
<table class="table table-striped table-bordered" id="programs-table">
<thead>
<tr><th>Product Image</th><th>Product Name</th><th>Vendor</th></tr>
</thead>
<tbody>
{{#each product in controller.currentPage.products}}
{{ view MyApp.ProductRowView productBinding="product"}}
{{else}}
<td colspan="3">Your search returned no results.</td>
{{/each}}
</tbody>
</table>
</div>
{{else}}
<div class="row">
Loading...
</div>
{{/if}}

EmberJS
MyApp.ProductRowView = Ember.View.extend({
templateName:'products/row',
tagName:'tr',
click:function(evt) {
router = this.get('controller.target.router');
router.transitionTo('product.index', this.product);
}
});

EmberJS
$ products/row.handlebars
{{#with product}}
<td><img {{bindAttr src="primaryImageUrl"}} {{ bindAttr alt="name" }}></td>
<td>{{name}}</td>
<td>{{supplierNames}}</td>
{{/with}}

EmberJS
{{#with product}}
<td>
<img {{bindAttr src="primaryImageUrl"}} {{ bindAttr alt="name" }}>
</td>
<td>{{name}}</td>
{{/with}}

EmberJS
{{#with product}}
<td>
<img {{bindAttr src="primaryImageUrl"}} {{ bindAttr alt="name" }}>
</td>
<td>{{name}}</td>
{{/with}}
They will always be in sync!

EmberJS
<ul>
<li {{bindAttr class="hasPrevious::disabled"}}>
<a href="#" {{action "previousPage"}}>← previous</a>
</li>
{{#each page in currentPage.listOfPages}}
{{#with page}}
<li {{bindAttr class="active"}}>
<a href="#" {{action changePage number}}>{{number}}</a>
</li>
{{/with}}
{{/each}}
<li {{bindAttr class="hasNext::disabled"}}>
<a href="#" {{action "nextPage"}}> next →</a>
</li>
</ul>

EmberJS
<h2>Editing User: {{content.name}}</h2>
<div class="row">
<div class="span4">
<label>First name</label>
{{view Ember.TextField valueBinding="content.ﬁrstName"}}
<label>Last name</label>
{{view Ember.TextField valueBinding="content.lastName"}}
<label>Email</label>
{{view Ember.TextField valueBinding="content.email"}}

EmberJS
MyApp.ProductRoute = Ember.Route.extend({
exit: function() {
var controller = this.controllerFor('product');
var content = controller.get('content');
if (content && content.get('isDirty')) {
content.get('transaction').rollback();
}
this._super();
}
});

EmberJS
• Enumerables
• forEach, map, mapProperty, ﬁlter,
• ContainerView
• String functions
• camelize, capitalize, classify, dasherize, underscore, etc!
• View Components
• TextArea,TextField, CheckBox
• etc

EmberJS
Hopefully I didn’t confuse you... more

Thanks!
Questions?
Edwin Cruz
edwin@crowdint.com
@softr8

Api's and ember js

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Api's and ember js

Similar to Api's and ember js (20)

More from Edwin Cruz

More from Edwin Cruz (11)

Api's and ember js