Using Ember to Make a Bazillion Dollars
•
1 like•1,071 views
This talk outlines why I believe that Ember solves many of the problems that we face as browser developers today. We aim to build rich dynamic applications, and some of the time we fail. Ember helps reduce friction by providing the right features at the right time. In particular, the router.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Using Ember to Make a Bazillion Dollars
Similar to Using Ember to Make a Bazillion Dollars (20)
Recently uploaded
Recently uploaded (20)
Using Ember to Make a Bazillion Dollars
- 2. Programming is hard really fucking^
- 6. Everyone runs their own show we must use Javascript
- 11. Using to Make a Bazillion Dollars
- 15. a little history
- 16. Simple Document rendering turned into dynamic applications
- 20. so we built higher abstractions
- 21. $('#id')
- 22. $('.yo')
- 23. but higher abstractions didn’t help us organize code speak a common language manage datA
- 24. so what did we do?
- 26. event/dom management Data organization basic routing
- 27. but higher abstractions didn’t help us understand architecture scale teams wrangle dependencies
- 28. so what did we do?
- 30. but plugin abstractions didn’t help with consistency stability community momentum
- 31. so what did we do?
- 35. my favorite features ! ! object model computed properties two-way data binding router
- 36. object model
- 37. we started with basic objects
- 39. but basic objects didn’t give us events shared behavior taxonomy
- 41. Person = Ember.Object.extend! firstName: 'Mike'! lastName: 'Pack'! fullName: ->! [! @get('firstName')! @get('lastName')! ].join(' ')
- 42. person = Person.create()! ! person.fullName() #=> Mike Pack
- 43. You can be notified when things change
- 44. Person = Ember.Object.extend! firstName: 'Mike'! lastName: 'Pack'! firstNameChanged: (->! alert('OK, got it!')! ).observes('firstName')
- 45. You can be notified of object lifecycle events
- 46. Ember.Object.extend! doSomethingSpecial: (->! alert('Object is ready!')! ).on('init')
- 48. You can monkey patch
- 49. You can use mixins
- 50. turtles all the way down
- 51. @bcardarella
- 57. person = Person.create()! ! person.get('fullName') #=> Mike Pack! person.set('lastName', ‘Katz')! ! person.get('fullName') #=> Mike Katz
- 58. You could write computed properties like…
- 59. Person = Ember.Object.extend! ...! fullName: -> ...! setLastName: (value) ->! @set('lastName', value)! @set('fullName', @fullName())
- 60. person = Person.create()! ! person.get('fullName') #=> Mike Pack! person.setLastName('Katz')! ! person.get('fullName') #=> Mike Katz
- 61. but this doesn’t scale. Consider thousands of these properties
- 63. Person = Ember.Object.extend! ...! fullName: (->! [! @get('firstName')! @get('lastName')! ].join(' ')! ).property('firstName', 'lastName')
- 64. You can create a dependency tree
- 65. Person = Ember.Object.extend! fullName: (->! ...! ).property('firstName', 'lastName')! ! address: (->! ...! ).property('fullName') depends on fullName^
- 66. You can do this as many times as you’d like
- 67. will sync all your changes using the run loop
- 68. savings ! data manipulation dependency management run loop ! 200 hours/year
- 71. we started by rendering server side
- 72. SERVER browser screen state as HTML render html action eg: click post/put/patch/delete stateless HTTP state
- 76. you must present state to the user respond to user input manage internal events update urls sync with the server
- 79. SERVER browser screen state as JSON render html action eg: click post/put/patch/delete statefulness ember ember data persistencehydration into memory state state state
- 80. person = Person.create() in the route
- 81. person = Person.create() in the route in the template <h1>Wassup, {{fullName}}?</h1>
- 82. person = Person.create() in the route in the template <h1>Wassup, {{fullName}}?</h1> rendered to the browser <h1>Wassup, Mike Pack?</h1>
- 83. the view stays in sync with whatever’s in memory
- 84. inversely, objects in memory stay in sync with the view
- 85. {{input value=lastName}} in the template
- 86. {{input value=lastName}} in the template rendered to the browser Pack Katz last name last name
- 87. {{input value=lastName}} in the template in memory person.get('fullName') #=> Mike Katz rendered to the browser Pack Katz last name last name
- 88. think about user interactions, not wiring things up
- 89. savings ! view updates in-memory updates handlebars ! 100 hours/year
- 91. router
- 92. the web is just rectangles nested inside rectangles
- 93. the web is just rectangles nested inside rectangles
- 94. the web is just rectangles nested inside rectangles
- 95. html is tags nested inside tags <article>! <header>! <h1>Ember!</h1>! </header>! <p>! Sweet Embers!! </p>! </article>
- 96. CSS is styles nesting inside styles article {! header {! h1 {! font-size: 18px;! }! }! p {! padding: 10px;! }! }
- 100. scoping DOM manipulations is hard so we rerender at a lower fidelity, causing flicker
- 101. wrangling events attached to Dom nodes is hard
- 102. wrangling events attached to Dom nodes is hard so we delegate to higher nodes, slowing interactions
- 103. persisting page state to the url is hard so we settled for poor urls, degrading user experience
- 104. what if you could have amazing view management and awesome urls…
- 105. just use this one weird trick
- 107. url nesting often corresponds to view nesting
- 108. /
- 109. /people
- 110. /people/mike
- 111. /people/mike/posts
- 112. examples
- 113. /mikepack/nerdbox
- 116. /mikepack/nerdbox
- 119. /home
- 120. /../appid
- 121. /../appid
- 122. /../appid/date…date
- 124. /../
- 125. /../appid
- 126. /../appid/date…date
- 128. the key is to think like a nested… url rectangle node style
- 129. nesting has context
- 131. Router.map ->! @resource 'people', ->! @resource 'person', path: '/:person_id', ->! @route 'posts'! @route 'likes'
- 136. this is extremely powerful think about page structure, not dom manipulations
- 137. this is extremely powerful forget about cleaning up event handlers
- 138. get url support for free this is extremely powerful
- 139. focus on building awesome apps quickly this is extremely powerful
- 140. savings acute dom manipulations event binding/unbinding url management state management ! 250 hours/year
- 142. object model = 100 computed properties = 150 two-way data binding = 100 router = 250 total = 600 hours/year
- 144. Your financial plan ! 600 hours/year savings ! !
- 145. Your financial plan ! 600 hours/year savings 600 x $200/hour = $120k !
- 146. Your financial plan ! 600 hours/year savings 600 x $200/hour = $120k $120k x 2 devs (pair) = $240k
- 147. Your financial plan because your startup is the next big thing… ! ! ! ! !
- 148. Your financial plan because your startup is the next big thing… ! $240k x 50 pairs = $12M ! ! !
- 149. Your financial plan because your startup is the next big thing… ! $240k x 50 pairs = $12M $12M x 3 years = $36M ! !
- 150. Your financial plan because your startup is the next big thing… ! $240k x 50 pairs = $12M $12M x 3 years = $36M ! because you’re first to market, thanks to ember…
- 151. Your financial plan because your startup is the next big thing… ! $240k x 50 pairs = $12M $12M x 3 years = $36M ! because you’re first to market, thanks to ember… You spend your $36M to buy all competition
- 152. BOOM!
- 153. BAZILLION DOLLARS