Sam Goldman's intro to Ember, which helps developers build the same product, with less code.

1. Introduction to
EmberJS
SmartLogic Conf
August 30, 2012

2. Ember Components
• Router
• Controllers
• Views
• Templates
• Bindings

3. Ember Router
• State machine for your application
• URLs are states
• Actions are transitions

4. Router Example
Todo.Router = Ember.Router.extend
location: "none"
root: Ember.Route.extend
index: Ember.Route.extend
route: "/"
connectOutlets: (router) ->
items = Todo.Item.find()
router.get("applicationController").
connectOutlet("list", items)
view: (router, event) ->
router.transitionTo("show", event.context)
show: Ember.Route.extend
route: "/:item"
connectOutlets: (router, item) ->
router.get("applicationController").connectOutlet("item", item)
back: (router, event) ->
router.transitionTo("index")

5. Controllers
• Three stock flavors:
• Controller
• ObjectController
• ArrayController
• Wrap model data for views
• Provide context-specific behaviors

6. Controller Example
Z.RecentActivityController = Ember.ArrayController.extend
content: (->
billPayments = @get("billPayments") or []
payments = @get("payments") or []
billPayments.toArray().slice(0, 10).
concat(payments.toArray().slice(0,10))
).property("billPayments.@each", "payments.@each")
sortProperties: ["createdAt"]

7. Views
• Handles events seamlessly
• No need to manage event listeners!
• Comes with a few baked-in patterns:
• CollectionView
• ContainerView
• Cool 3rd party libs, like ember-bootstrap

8. View Example
Ember.Checkbox = Ember.View.extend({
classNames: ['ember-checkbox'],
tagName: 'input',
attributeBindings: [
'type',
'checked',
'disabled',
'tabindex'
],
type: "checkbox",
checked: false,
disabled: false
});

9. Templates
• Handlebars with Ember additions
• #view
• #outlet
• #action
• Quick and familiar way to compose views

10. Template Example
<script type="text/x-handlebars" data-template-name="list">
<ul>
{{#each controller}}
<li>
<label>
{{view Ember.Checkbox checkedBinding="done"}}
{{name}}
</label>
</li>
{{/each}}
</ul>
<button {{action add}}>Add Item</button>
</script>

11. DEMO

12. Thanks!