0
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....
Controller
Route
Actions from UI
Wednesday, 9 October 13
WeightsProgram.AuthenticatedExerciseController	
  =	
  
Ember.ObjectController.extend
	
  	
  actions:
	
  	
  	
  	
  sav...
View
Controller
Element events
didInsertElement
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}}...
Templating
Wednesday, 9 October 13
Handlebars
or
Emblem
Wednesday, 9 October 13
if	
  isEditing
	
  	
  form.post-­‐form	
  role="form"	
  submit="create"
	
  	
  	
  	
  .form-­‐group
	
  	
  	
  	
  	...
<h2>Week	
  {{number}}</h2>
<div	
  class="menu">
	
  	
  {{#each	
  exercise	
  in	
  exercises}}
	
  	
  	
  	
  <h3>
	
...
Application layout
Wednesday, 9 October 13
<div	
  class="container	
  work">
	
  	
  <div	
  class="row">
	
  	
  	
  	
  <div	
  class="col-­‐sm-­‐12">
	
  	
  	
 ...
outlet is like yield in
rails views
{{outlet}}
Wednesday, 9 October 13
Persistence
Wednesday, 9 October 13
Ember Data
or
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()
	
  	
  initi...
EmberBlog.Post	
  =	
  DS.Model.extend
	
  	
  title:	
  DS.attr("string")
	
  	
  publishedOn:	
  DS.attr("string")
	
  	...
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:
	
  	
  	
  	
  crea...
Computed Properties
Wednesday, 9 October 13
Wednesday, 9 October 13
increase_percentage:	
  (-­‐>
	
  	
  @get("current_max")	
  /	
  @get("previous_max"))	
  -­‐	
  1
).property("current_ma...
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",	
  p...
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
Upcoming SlideShare
Loading in...5
×

Stop Ember Time

1,014

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,014
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×