Stop Ember Time

1,334 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,334
On SlideShare
0
From Embeds
0
Number of Embeds
527
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Stop Ember Time

  1. 1. Stop! Ember Time! Wednesday, 9 October 13
  2. 2. Carl Woodward Wednesday, 9 October 13
  3. 3. @cjwoodward Wednesday, 9 October 13
  4. 4. Wednesday, 9 October 13
  5. 5. Wednesday, 9 October 13
  6. 6. Why Ember? Wednesday, 9 October 13
  7. 7. Wednesday, 9 October 13
  8. 8. Well structured Wednesday, 9 October 13
  9. 9. Data bound Wednesday, 9 October 13
  10. 10. Fast Wednesday, 9 October 13
  11. 11. Javascript MVC framework Wednesday, 9 October 13
  12. 12. Wednesday, 9 October 13
  13. 13. Route Model ControllerView Template User Wednesday, 9 October 13
  14. 14. Route Router Find a model Before model Wednesday, 9 October 13
  15. 15. WeightsProgram.ExerciseRoute  =  Ember.Route.extend    model:  (params)  -­‐>        WeightsProgram.Exercise.find  params["exercise_id"] * Using Ember Model Wednesday, 9 October 13
  16. 16. Controller Route Actions from UI Wednesday, 9 October 13
  17. 17. 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
  18. 18. View Controller Element events didInsertElement Wednesday, 9 October 13
  19. 19. WeightsProgram.AuthenticatedWeekView  =   Ember.View.extend() Wednesday, 9 October 13
  20. 20. Template View {{#link-to “week” week}}Week Link{{/link-to}} <form {{action "saveReps" on="submit"}}> <h3>{{movement.name}}</h3> Wednesday, 9 October 13
  21. 21. Templating Wednesday, 9 October 13
  22. 22. Handlebars or Emblem Wednesday, 9 October 13
  23. 23. if  isEditing    form.post-­‐form  role="form"  submit="create"        .form-­‐group            button.btn.btn-­‐primary  click="stopEditing"  View Emblem Wednesday, 9 October 13
  24. 24. <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
  25. 25. Application layout Wednesday, 9 October 13
  26. 26. <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
  27. 27. outlet is like yield in rails views {{outlet}} Wednesday, 9 October 13
  28. 28. Persistence Wednesday, 9 October 13
  29. 29. Ember Data or Ember Model Wednesday, 9 October 13
  30. 30. Ember Model = customisable Wednesday, 9 October 13
  31. 31. Wednesday, 9 October 13
  32. 32. 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
  33. 33. EmberBlog.Post  =  DS.Model.extend    title:  DS.attr("string")    publishedOn:  DS.attr("string")    body:  DS.attr("string") Ember Data Wednesday, 9 October 13
  34. 34. JJ Abrams Wednesday, 9 October 13
  35. 35. Tips Wednesday, 9 October 13
  36. 36. Don’t try and preload associations Wednesday, 9 October 13
  37. 37. didInsertView Wednesday, 9 October 13
  38. 38. model.on(“didCreateRecord”) Wednesday, 9 October 13
  39. 39. 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
  40. 40. Computed Properties Wednesday, 9 October 13
  41. 41. Wednesday, 9 October 13
  42. 42. increase_percentage:  (-­‐>    @get("current_max")  /  @get("previous_max"))  -­‐  1 ).property("current_max",  "previous_max") Wednesday, 9 October 13
  43. 43. Include any attribute you need to create the model. E.g. program_id Wednesday, 9 October 13
  44. 44. Nested routes require nested names Wednesday, 9 October 13
  45. 45. 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
  46. 46. Only use nested resources with nested outlets Wednesday, 9 October 13
  47. 47. Wednesday, 9 October 13
  48. 48. ember-rails works really well Wednesday, 9 October 13
  49. 49. jsbin Wednesday, 9 October 13
  50. 50. discuss.emberjs.com Read  discourse  source  code #emberjs-­‐dev Wednesday, 9 October 13
  51. 51. Demo Wednesday, 9 October 13

×