Riding the Edge with Ember.jsHouston.jsJune 2013
Who am I?
• Aaron Ortbals
• Full-stack developer at Chaione
• @aaronortbals
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 and Yehuda 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 and Yehuda 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 significantly 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 Rise of the SPA
So Why Ember?
The Ember Philosophy
• Ember favors convention over configuration
• 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 definitely not required, Ember works very well with Rails
Benefits
• 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 HelpersBuild a helper when you want to present data in a specific 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 RouterdeleteItem
is deleteItem here?
Child Viewsalbum_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
Viewinteracts 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 APIApp.Router.reopen location: 'history'
A Route
• Each route has a route handler
• It finds 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 specific 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
Other stuff to check out
Ember InspectorYehuda 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?
