Tweet
Tweet

Slide 1

Slide 1 text

Stop! Ember Time! Wednesday, 9 October 13

Slide 2

Slide 2 text

Carl Woodward Wednesday, 9 October 13

Slide 3

Slide 3 text

@cjwoodward Wednesday, 9 October 13

Slide 4

Slide 4 text

Wednesday, 9 October 13

Slide 5

Slide 5 text

Wednesday, 9 October 13

Slide 6

Slide 6 text

Why Ember? Wednesday, 9 October 13

Slide 7

Slide 7 text

Wednesday, 9 October 13

Slide 8

Slide 8 text

Well structured Wednesday, 9 October 13

Slide 9

Slide 9 text

Data bound Wednesday, 9 October 13

Slide 10

Slide 10 text

Fast Wednesday, 9 October 13

Slide 11

Slide 11 text

Javascript MVC framework Wednesday, 9 October 13

Slide 12

Slide 12 text

Wednesday, 9 October 13

Slide 13

Slide 13 text

Route Model Controller View Template User Wednesday, 9 October 13

Slide 14

Slide 14 text

Route Router Find a model Before model Wednesday, 9 October 13

Slide 15

Slide 15 text

WeightsProgram.ExerciseRoute  =  Ember.Route.extend    model:  (params)  -­‐>        WeightsProgram.Exercise.find  params["exercise_id"] * Using Ember Model Wednesday, 9 October 13

Slide 16

Slide 16 text

Controller Route Actions from UI Wednesday, 9 October 13

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

View Controller Element events didInsertElement Wednesday, 9 October 13

Slide 19

Slide 19 text

WeightsProgram.AuthenticatedWeekView  =   Ember.View.extend() Wednesday, 9 October 13

Slide 20

Slide 20 text

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

{{movement.name}}

Wednesday, 9 October 13

Slide 21

Slide 21 text

Templating Wednesday, 9 October 13

Slide 22

Slide 22 text

Handlebars or Emblem Wednesday, 9 October 13

Slide 23

Slide 23 text

if  isEditing    form.post-­‐form  role="form"  submit="create"        .form-­‐group            button.btn.btn-­‐primary  click="stopEditing"  View Emblem Wednesday, 9 October 13

Slide 24

Slide 24 text

Week  {{number}}

   {{#each  exercise  in  exercises}}        

           {{#link-­‐to  "authenticated.exercise"  exercise}}                {{exercise.movement.name}}            {{/link-­‐to}}        

   {{/each}}
Handlebars Wednesday, 9 October 13

Slide 25

Slide 25 text

Application layout Wednesday, 9 October 13

Slide 26

Slide 26 text

   
       
           

Strength  Program

       
   
   
       
           {{  outlet  }}        
   
Handlebars Wednesday, 9 October 13

Slide 27

Slide 27 text

outlet is like yield in rails views {{outlet}} Wednesday, 9 October 13

Slide 28

Slide 28 text

Persistence Wednesday, 9 October 13

Slide 29

Slide 29 text

Ember Data or Ember Model Wednesday, 9 October 13

Slide 30

Slide 30 text

Ember Model = customisable Wednesday, 9 October 13

Slide 31

Slide 31 text

Wednesday, 9 October 13

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

EmberBlog.Post  =  DS.Model.extend    title:  DS.attr("string")    publishedOn:  DS.attr("string")    body:  DS.attr("string") Ember Data Wednesday, 9 October 13

Slide 34

Slide 34 text

JJ Abrams Wednesday, 9 October 13

Slide 35

Slide 35 text

Tips Wednesday, 9 October 13

Slide 36

Slide 36 text

Don’t try and preload associations Wednesday, 9 October 13

Slide 37

Slide 37 text

didInsertView Wednesday, 9 October 13

Slide 38

Slide 38 text

model.on(“didCreateRecord”) Wednesday, 9 October 13

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Computed Properties Wednesday, 9 October 13

Slide 41

Slide 41 text

Wednesday, 9 October 13

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Include any attribute you need to create the model. E.g. program_id Wednesday, 9 October 13

Slide 44

Slide 44 text

Nested routes require nested names Wednesday, 9 October 13

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Only use nested resources with nested outlets Wednesday, 9 October 13

Slide 47

Slide 47 text

Wednesday, 9 October 13

Slide 48

Slide 48 text

ember-rails works really well Wednesday, 9 October 13

Slide 49

Slide 49 text

jsbin Wednesday, 9 October 13

Slide 50

Slide 50 text

discuss.emberjs.com Read  discourse  source  code #emberjs-­‐dev Wednesday, 9 October 13

Slide 51

Slide 51 text

Demo Wednesday, 9 October 13