Stop Ember Time

Stop! Ember Time!

Wednesday, 9 October 13

Carl Woodward

Wednesday, 9 October 13

@cjwoodward

Wednesday, 9 October 13

Wednesday, 9 October 13

Wednesday, 9 October 13

Why Ember?

Wednesday, 9 October 13

Wednesday, 9 October 13

Well structured

Wednesday, 9 October 13

Data bound

Wednesday, 9 October 13

Fast

Wednesday, 9 October 13

Javascript MVC framework

Wednesday, 9 October 13

Wednesday, 9 October 13

Route

Model

ControllerView

Template

User

Wednesday, 9 October 13

Route

Router

Find a model

Before model

Wednesday, 9 October 13

WeightsProgram.ExerciseRoute  =  Ember.Route.extend    model:  (params)  -­‐>        WeightsProgram.Exercise.find  params["exercise_id"]

* Using Ember Model

Wednesday, 9 October 13

Controller

Route

Actions from UI

Wednesday, 9 October 13

WeightsProgram.AuthenticatedExerciseController  =  Ember.ObjectController.extend    actions:        saveReps:  -­‐>            @get("content").set("current_max",  @get("content").get("new_max"))            @get("content").save()            @transitionToRoute("authenticated.week",  @get("content.week"))

* Using Ember Model

Wednesday, 9 October 13

View

Controller

Element eventsdidInsertElement

Wednesday, 9 October 13

WeightsProgram.AuthenticatedWeekView  =  Ember.View.extend()

Wednesday, 9 October 13

Template

View

{{#link-to “week” week}}Week Link{{/link-to}}

<form {{action "saveReps" on="submit"}}>

<h3>{{movement.name}}</h3>

Wednesday, 9 October 13

Templating

Wednesday, 9 October 13

Handlebarsor

Emblem

Wednesday, 9 October 13

if  isEditing    form.post-­‐form  role="form"  submit="create"        .form-­‐group            button.btn.btn-­‐primary  click="stopEditing"  View

Emblem

Wednesday, 9 October 13

<h2>Week  {{number}}</h2>

<div  class="menu">    {{#each  exercise  in  exercises}}        <h3>            {{#link-­‐to  "authenticated.exercise"  exercise}}                {{exercise.movement.name}}            {{/link-­‐to}}        </h3>    {{/each}}</div>

Handlebars

Wednesday, 9 October 13

Application layout

Wednesday, 9 October 13

<div  class="container  work">    <div  class="row">        <div  class="col-­‐sm-­‐12">            <h1>Strength  Program</h1>        </div>    </div>    <div  class="row">        <div  class="col-­‐sm-­‐12">            {{  outlet  }}        </div>    </div></div>

Handlebars

Wednesday, 9 October 13

outlet is like yield in rails views

{{outlet}}

Wednesday, 9 October 13

Persistence

Wednesday, 9 October 13

Ember Dataor

Ember Model

Wednesday, 9 October 13

Ember Model = customisable

Wednesday, 9 October 13

Wednesday, 9 October 13

WeightsProgram.Exercise  =  Ember.Model.extend    id:  Ember.attr()    reps:  Ember.attr()    initial_max_value:  Ember.attr()    movement:  Ember.belongsTo("WeightsProgram.Movement",  key:  "movement_id",  embedded:  false)    accessories:  Ember.hasMany("WeightsProgram.Accessory",  key:  "accessory_ids",  embedded:  false)

WeightsProgram.Exercise.url  =  "/exercises"WeightsProgram.Exercise.adapter  =  Ember.RESTAdapter.create()WeightsProgram.Exercise.rootKey  =  "exercise"WeightsProgram.Exercise.collectionKey  =  "exercises"

Ember Model

Wednesday, 9 October 13

EmberBlog.Post  =  DS.Model.extend    title:  DS.attr("string")    publishedOn:  DS.attr("string")    body:  DS.attr("string")

Ember Data

Wednesday, 9 October 13

JJ Abrams

Wednesday, 9 October 13

Tips

Wednesday, 9 October 13

Don’t try and preload associations

Wednesday, 9 October 13

didInsertView

Wednesday, 9 October 13

model.on(“didCreateRecord”)

Wednesday, 9 October 13

WeightsProgram.AuthenticatedProgramController  =  Ember.ObjectController.extend    actions:        createWeek:  -­‐>            number  =  @get("weeks.lastObject.number")  +  1            week  =  WeightsProgram.Week.create  program_id:  @get("id"),  number:  number            week.on  "didCreateRecord",  =>                @get("model").reload()                @transitionToRoute("authenticated.program",  @get("model"))            week.save()

Ember Model

Wednesday, 9 October 13

Computed Properties

Wednesday, 9 October 13

Wednesday, 9 October 13

increase_percentage:  (-­‐>    @get("current_max")  /  @get("previous_max"))  -­‐  1).property("current_max",  "previous_max")

Wednesday, 9 October 13

Include any attribute you need to create the model.

E.g. program_id

Wednesday, 9 October 13

Nested routes require nested names

Wednesday, 9 October 13

WeightsProgram.AuthenticatedProgramController

WeightsProgram.Router.map  -­‐>    @resource  "authenticated",  path:  "/",  -­‐>        @route  "program",  path:  "/programs/:program_id"

WeightsProgram.AuthenticatedProgramView

app/assets/javascripts/views/authenticated/program.hbs

Wednesday, 9 October 13

Only use nested resources with nested outlets

Wednesday, 9 October 13

Wednesday, 9 October 13

ember-rails works really well

Wednesday, 9 October 13

jsbin

Wednesday, 9 October 13

discuss.emberjs.com

Read  discourse  source  code

#emberjs-­‐dev

Wednesday, 9 October 13

Demo

Wednesday, 9 October 13