Riding the Edge with Ember.js

Riding the Edge with Ember.js
Houston.js
June 2013

Who am I?
• Aaron Ortbals
• Full-stack developer at Chaione
• @aaronortbals
• me@aaronortbals.com

What is Ember.js?
A client-side javascript framework used for building complex web
applications

The Creators
• Tom Dale @tomdale
• worked on Sproutcore framework at Apple and the MobileMe/iCloud
applications
• Yehuda Katz @wykats
• rails core contributor
• heavily involved in open source
• Ember core team is 8 strong

Tilde
• Tom andYehuda co-founded Tilde, a product & consultancy company
with Carl Lerche, and Leah Silber
• Heavily focused on open source
• Team members contributing to jQuery, Rails, Ember, Bundler...
• Tom andYehuda met through Sproutcore and a startup called Strobe

Picking a Framework
(and some history)

Circa 2005...
What was the web was like in 2005?
• IE 6
• jQuery was coming next year
• And along came server-side web application frameworks like Ruby on
Rails and Django

“No one wants a megabyte of
sprinkles.”

Provide a better experience with JS
• Many studies have shown that latency can signiﬁcantly impact usage
• You can cache but page reloads require re-parsing, executing CSS & JS,
etc...
• To improve latencies, many sites have moved to Single Page Applications

Give us a backbone
• In late 2010, when Backbone.js was released, a lightbulb
went off in a lot of people’s heads
• It’s fast, light-weight, and very easy to jump into
• But what if you want (need?) more?

The Ember Philosophy
• Ember favors convention over conﬁguration
• Ember forces you to do things correctly from the start
• When you use it you might notice similarities to Cocoa and Rails

Conventions
• Strong conventions are really meant to help when you are a team of
more than one
• When a team member adds a new feature, it shouldn’t break old
features

Designing the Ember API
• The team was very focused on getting the API correct pre-1.0
• Led to breaking API changes which pissed people off
• It is all about taking use cases and constraints and designing an API
that will work the best given those constraints

Why did I pick it?
• I really like the structure (especially for large apps)
• The core team is very good and I like the roadmap
• I’ve been highly productive after I crossed the chasm
• While deﬁnitely not required, Ember works very well with Rails

Beneﬁts
• Fully featured
• They really care about URLs
• Good community, vastly improving docs
• Once you grok, developer productivity can be very high

Disadvantages
• Still young, but we are close to a 1.0 release (1.0-RC6)
• Backbone,Angular, and others are more mature, less risk
• Development of Ember-testing is trailing the API
• Ember-data is not 1.0 (what is Ember-data?)

What’s Coming for Ember?
• Focused on documentation and the 1.0 release
• Continued work on Ember-testing and Ember-data
• Working with the standard’s bodies to plan for and incorporate the
next generation of JS

• Traditional SPAs do all their rendering on the client
• What about indexing?
• Hybrid rendering is the future
• Both the client and the server can render the page
• Ember has an up-and-coming solution to this with Handlebars
The Problem

So how do I use it already?
{{}}

Fundamentals
• Templates
• Views
• Models
• Router
• Controllers

Templates
• Ember uses Handlebars which wraps {{things}} in curly braces
• You can do things like
{{#linkTo post}}Welcome to Ember!{{/linkTo}}
• or
<ul>
      {{#each model}}
      <li>
        {{partial 'posts/show'}}
      </li>
      {{/each}}
    </ul>

Template Helpers
Build a helper when you want to present data in a speciﬁc way.
Handlebars.registerHelper 'fullName', ->
person.firstName + " " + person.lastName
<span class="name">{{fullName aaron}}</span>
Use it like:

Views
• A view translates events in your template to events that have meaning
to your application
• Typically only written in cases where you want to handle complex user
events or create reusable components
click Delete Controller Router
deleteItem
is deleteItem here?

ChildViews
album_view.js.coffee
App.AlbumView = Ember.View.extend
templateName: 'album'

title: "Animals"
artist: "Pink Floyd"

detailsView: Ember.View.extend
    templateName: 'details'

    year:   1977
    genre: "Progressive Rock"
<h1>
{{view.title}} by {{view.artist}}
</h1>
{{view view.detailsView}}
<div class="year">
From {{view.year}}
</div>
<div class="genre">
In {{view.genre}}
</div>
album.handlebars
details.handlebars

Ember Data
• Ember Data is a library that is designed to:
• make it easy to retrieve records from a server
• make changes in the browser
• save those changes back to the server
• Think of it as providing facilities similar to what an ORM does on the
server
• Works with Rails out of the box if it follows the
active_model_serializers gem’s conventions

Getting Setup with Ember Data
• store.js.coffee
• Remember, Ember Data is pre-1.0, so watch for breaking changes
App.Store = DS.Store.extend
revision: 12

Models
• Models work well with Ember Data, but can use any persistence layer
• A model looks like this:
• Find a user:
App.User = DS.Model.extend
firstName: DS.attr('string')
lastName:   DS.attr('string')
email:      DS.attr('string')
username:   DS.attr('string')
user = App.User.find({ name: "Aaron" })

Relationships
• A model can have relationships. Look familiar?
App.Request = DS.Model.extend
name:       DS.attr('string')
user:       DS.belongsTo('App.User')
filled:     DS.attr('boolean')
createdAt: DS.attr('date')
updatedAt: DS.attr('date')

Ember Data Alternatives
• Ember-Model - extracted from a live application by core-team
member Erik Bryn
• Ember-Resource - from Zendesk
• Others: Ember-RESTless, Emu, Ember-REST, JQuery directly

Router
• Ember.js represents each of the possible states in your application as a
URL
• Or the user hits the back button
• Avoid losing state when the user uses traditional navigation
View
interacts event

Wiring up some routes
• Static routes
• Resource routes
• Nested resources
• Use the browser history
API (no hash bangs!)
App.Router.map (match) ->
@route 'app', { path: '/'}
@route 'login'
@route 'signup'

@resource 'users', ->
    @route 'new'
    @resource 'user',
      path: ':user_id'

@resource 'requests', ->
    @route 'new'
    @resource 'request',
      path: ':request_id'

# Use the browser history API
App.Router.reopen
   location: 'history'

A Route
• Each route has a route handler
• It ﬁnds the model, hands it to the controller, then renders a bound
template
App.UsersRoute = Ember.Route.extend
model: ->
App.User.find()

App.UsersNewRoute = Ember.Route.extend
model: ->
App.User.createRecord()

App.SignupRoute = App.UsersNewRoute

Controllers
• Models have properties that are saved to the server, while controllers
have properties that don’t need to be saved to the server
• In other words, anything that is speciﬁc to the current session
App.UserController = Ember.ObjectController.extend
delete: ->
    if (window.confirm "Are you sure you want to delete this user?")
      @get('content').deleteRecord()
      @get('store').commit()
      @transitionToRoute('users')
An Example User Controller:

Coupling
Template
Controller
Model
Templates know about controllers, controllers know about models...
But not the reverse

Ember Inspector
Yehuda is working on an extension for Chrome that exposes what is
happening in Ember. Check it out!

Who is using Ember?
Open Source!

Credits & Resources
• Emberjs.com
• Tilde.io
• Thoughbot Episode #53
• Herding Code #169
• Ember Weekly
• Embrace Javascript
• Emberwatch

So what does a structured app
look like?

Riding the Edge with Ember.js

More Related Content

What's hot

Viewers also liked

Similar to Riding the Edge with Ember.js

Recently uploaded

Riding the Edge with Ember.js