Restoring Sanity to JavaScript Development with Ember 2

Are you overwhelmed by JavaScript framework fatigue? Do you wish for the benefits of the newest front-end advancements without continually rewriting your application? Let's take a look at the latest version of Ember. We'll review the tooling, debugging, and addons that have made Ember a growing choice for innovative companies like Heroku, Travis CI, Square, and Nest. See how Ember adopts the best from other frameworks while bringing us the future of JavaScript today. You'll leave this session with a clear understanding of how Ember fits into your front-end toolbox and why it might be the ideal choice for your next project.

Transcript

1. Restoring Sanity to Javascript Development with Ember 2
 CodeMash 2016
5. View Batterii product demos at 
 http://batterii.com/tour.html
7. HTTP
8. HTTP HTML
9. HTTP HTML
10. HTTP HTML HTTP
11. HTTP HTML HTTP HTML
12. HTTP HTML HTTP HTML
14. HTTP
15. HTTP HTML
16. HTTP HTML
17. HTTP HTML HTTP
18. HTTP HTML HTTP JSON
19. HTTP HTML HTTP JSON
20. DOWNLOAD APP HTTP JSON
22. Markup
23. Markup Interaction
24. Markup Interaction
25. <p>Super Rentals Representatives would love to help you choose a destination or answer any questions you may have.</p> <p>Contact us today:</p> <p> Super Rentals HQ<br> 1212 Test Address Avenue<br> Testington, OR 97233 </p> <p>(503)555-1212</p> <p>superrentalsrep@superrentals.com</p> {{#link-to "about"}}About{{/link-to}}
26. <p>Super Rentals Representatives would love to help you choose a destination or answer any questions you may have.</p> <p>Contact us today:</p> <p> Super Rentals HQ<br> 1212 Test Address Avenue<br> Testington, OR 97233 </p> <p>(503)555-1212</p> <p>superrentalsrep@superrentals.com</p> {{#link-to "about"}}About{{/link-to}}
27. Markup Interaction
28. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p>
29. // app/templates/index.hbs … {{#each model as |rentalUnit|}} {{rental-listing rental=rentalUnit}} {{/each}} …
30. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} alt={{rental.type}} width="500px"></p> {{else}} <button>Show image</button> {{/if}}
31. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} 
 alt={{rental.type}} width="500px"></p> {{else}} <button>Show image</button> {{/if}}
32. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} 
 alt={{rental.type}} width="500px"></p> {{else}} <button>Show image</button> {{/if}}
33. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} 
 alt={{rental.type}} width="500px"></p> {{else}} <button>Show image</button> {{/if}}
34. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} 
 alt={{rental.type}} width="500px"></p> {{else}} <button>Show image</button> {{/if}}
35. // app/components/rental-listing.js import Ember from 'ember'; export default Ember.Component.extend({ isImageShowing: false });
36. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} 
 alt={{rental.type}} width="500px"></p> {{else}} <button {{action "imageShow"}}>Show image</button> {{/if}}
37. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} 
 alt={{rental.type}} width="500px"></p> {{else}} <button {{action "imageShow"}}>Show image</button> {{/if}}
38. // app/components/rental-listing.js import Ember from 'ember'; export default Ember.Component.extend({ isImageShowing: false, actions: { imageShow() { this.set('isImageShowing', true); } } });
39. // app/components/rental-listing.js import Ember from 'ember'; export default Ember.Component.extend({ isImageShowing: false, actions: { imageShow() { this.set('isImageShowing', true); } } });
40. // app/components/rental-listing.js import Ember from 'ember'; export default Ember.Component.extend({ isImageShowing: false, actions: { imageShow() { this.set('isImageShowing', true); } } });
41. // app/components/rental-listing.js import Ember from 'ember'; export default Ember.Component.extend({ isImageShowing: false, actions: { imageShow() { this.set('isImageShowing', true); } } });
42. // app/templates/components/rental-listing.hbs <h2>{{rental.title}}</h2> <p>Owner: {{rental.owner}}</p> <p>Type: {{rental.type}}</p> <p>Location: {{rental.city}}</p> <p>Number of bedrooms: {{rental.bedrooms}}</p> {{#if isImageShowing }} <p><img src={{rental.image}} 
 alt={{rental.type}} width="500px"></p> {{else}} <button {{action "imageShow"}}>Show image</button> {{/if}}
43. Markup Interaction
44. Markup Interaction Build
45. Markup Interaction Build Testing
46. Markup Interaction Build Testing Router
47. Markup Interaction Build Testing Router Data
48. Markup Interaction Build Testing Router Data Code Sharing
49. Markup Interaction Build Testing Router Data Code Sharing Deployment
50. Markup Interaction Build Testing Router Data Code Sharing Deployment
51. ember-cli
52. npm install -g ember-cli
53. View this coding demo at 
 https://youtu.be/xSsaxR3mNso
56. Markup Interaction Build Testing Router Data Code Sharing Deployment
57. View this coding demo at 
 https://youtu.be/gUFebn8yEIo
58. Markup Interaction Build Testing Router Data Code Sharing Deployment
59. view model controller /rentals/ /photos/3 /photos/?sort=rating /photos/3/comments/42 Credit: Tom Dale
60. view model controller /rentals/ /photos/3 /photos/?sort=rating /photos/3/comments/42 Credit: Tom Dale
61. view model controller /rentals/ /rentals/3 /photos/?sort=rating /photos/3/comments/42 Credit: Tom Dale
62. view model controller /rentals/ /rentals/3 /rentals/?sort=rating /rentals/3/comments/42 Credit: Tom Dale
63. view model controller /rentals/ /rentals/3 /rentals/?sort=rating /rentals/3/comments/42 Credit: Tom Dale
64. view model controller /rentals/ /rentals/3 /rentals/?sort=rating /rentals/3/comments/42 Credit: Tom Dale
65. view model controller /rentals/ /rentals/3 /rentals/?sort=rating /rentals/3/comments/42 Credit: Tom Dale
66. #
67. #!
68. #! ⦸
69. View this coding demo at 
 https://youtu.be/yB9V1VQ2ADs
70. Markup Interaction Build Testing Router Data Code Sharing Deployment
71. ember-data
72. // app/routes/index.js import Ember from 'ember'; export default Ember.Route.extend({ model() { return this.store.findAll('rental'); // => GET /posts }, });
73. // app/routes/index.js import Ember from 'ember'; export default Ember.Route.extend({ model() { return this.store.findAll('rental'); // => GET /posts }, });
74. // app/routes/index.js import Ember from 'ember'; export default Ember.Route.extend({ model() { return this.store.findAll('rental'); // => GET /posts }, });
75. // app/routes/index.js import Ember from 'ember'; export default Ember.Route.extend({ model() { return this.store.findAll('rental'); // => GET /rentals }, });
76. Markup Interaction Build Testing Router Data Code Sharing Deployment
77. ember addons
82. ember install ember-cli-octicons
83. Markup Interaction Build Testing Router Data Code Sharing Deployment
84. ember-cli-deploy
85. ember deploy production
86. configure (all plugins) setup willDeploy willBuild build ember-cli-deploy-build didBuild willPrepare prepare didPrepare willUpload ember-cli-deploy-gzip, ember-cli-deploy-manifest upload ember-cli-deploy-s3 didUpload willActivate activate didActivate ember-cli-deploy-cloudfront didDeploy teardown
87. configure (all plugins) setup willDeploy willBuild build ember-cli-deploy-build didBuild willPrepare prepare didPrepare willUpload ember-cli-deploy-gzip, ember-cli-deploy-manifest upload ember-cli-deploy-s3 didUpload willActivate activate didActivate ember-cli-deploy-cloudfront didDeploy teardown
88. configure (all plugins) setup willDeploy willBuild build ember-cli-deploy-build didBuild willPrepare prepare didPrepare willUpload ember-cli-deploy-gzip, ember-cli-deploy-manifest upload ember-cli-deploy-s3 didUpload willActivate activate didActivate ember-cli-deploy-cloudfront didDeploy teardown
89. configure (all plugins) setup willDeploy willBuild build ember-cli-deploy-build didBuild willPrepare prepare didPrepare willUpload ember-cli-deploy-gzip, ember-cli-deploy-manifest upload ember-cli-deploy-s3 didUpload willActivate activate didActivate ember-cli-deploy-cloudfront didDeploy teardown
90. configure (all plugins) setup willDeploy willBuild build ember-cli-deploy-build didBuild willPrepare prepare didPrepare willUpload ember-cli-deploy-gzip, ember-cli-deploy-manifest upload ember-cli-deploy-s3 didUpload willActivate activate didActivate ember-cli-deploy-cloudfront didDeploy teardown
91. configure (all plugins) setup willDeploy willBuild build ember-cli-deploy-build didBuild willPrepare prepare didPrepare willUpload ember-cli-deploy-gzip, ember-cli-deploy-manifest upload ember-cli-deploy-s3 didUpload willActivate activate didActivate ember-cli-deploy-cloudfront didDeploy teardown
92. configure (all plugins) setup willDeploy willBuild build ember-cli-deploy-build didBuild willPrepare prepare didPrepare willUpload ember-cli-deploy-gzip, ember-cli-deploy-manifest upload ember-cli-deploy-s3 didUpload willActivate activate didActivate ember-cli-deploy-cloudfront didDeploy teardown
93. ember install ember-cli-deploy ember install ember-cli-deploy-aws-pack
94. Markup Interaction Build Testing Router Data Code Sharing Deployment
95. BONUS CONTENT!
96. Ember Inspector
97. View this demo at 
 https://youtu.be/zUCxE418bpk
98. ember-cli-mirage
99. ember install ember-cli-mirage
100. // app/mirage/config.js export default function() { this.get('/api/users', function() { return { users: [ {id: 1, name: 'Zelda'}, {id: 2, name: 'Link'}, {id: 3, name: 'Epona'}, ] } }); }
101. // app/mirage/config.js export default function() { this.get('/api/users', function() { return { users: [ {id: 1, name: 'Zelda'}, {id: 2, name: 'Link'}, {id: 3, name: 'Epona'}, ] } }); }
102. // app/mirage/config.js export default function() { this.get('/api/users', function() { return { users: db.users {id: 1, name: 'Zelda'}, {id: 2, name: 'Link'}, {id: 3, name: 'Epona'}, ] } }); }
103. // app/mirage/config.js export default function() { this.get('/api/users', function() { return { users: db.users } }); } ] } }); }
104. // app/mirage/factories/user.js import Mirage, {faker} from 'ember-cli-mirage'; export default Mirage.Factory.extend({ name(i) { return `Person ${i}`; }, age: 28, admin: false, avatar(i) { return faker.internet.avatar(); } });
105. // app/mirage/factories/user.js import Mirage, {faker} from 'ember-cli-mirage'; export default Mirage.Factory.extend({ name(i) { return `Person ${i}`; }, age: 28, admin: false, avatar(i) { return faker.internet.avatar(); } });
106. // app/mirage/factories/user.js import Mirage, {faker} from 'ember-cli-mirage'; export default Mirage.Factory.extend({ name(i) { return `Person ${i}`; }, age: 28, admin: false, avatar(i) { return faker.internet.avatar(); } });
107. // app/mirage/factories/user.js import Mirage, {faker} from 'ember-cli-mirage'; export default Mirage.Factory.extend({ name(i) { return `Person ${i}`; }, age: 28, admin: false, avatar(i) { return faker.internet.avatar(); } });
108. // app/mirage/scenarios/default.js // Create 10 non-admin and 1 admin users for development export default function(server) { server.createList('user', 10); server.create('user', {admin: true}); };
109. // app/mirage/scenarios/default.js // Create 10 non-admin and 1 admin users for development export default function(server) { server.createList('user', 10); server.create('user', {admin: true}); };
110. // app/mirage/scenarios/default.js // Create 10 non-admin and 1 admin users for development export default function(server) { server.createList('user', 10); server.create('user', {admin: true}); };
111. // tests/acceptance/users-test.js test("I can view the users", function() { var users = server.createList('user', 3); visit('/users'); andThen(function() { equal(find('li').length, 3); equal(find('li:first').text(),users[0].name); }); });
112. // tests/acceptance/users-test.js test("I can view the users", function() { var users = server.createList('user', 3); visit('/users'); andThen(function() { equal(find('li').length, 3); equal(find('li:first').text(),users[0].name); }); });
113. // app/mirage/config.js export default function() { this.get('/api/users', function() { return { users: db.users } }); } return { users: db.users } }); }
114. // app/mirage/config.js export default function() { this.passthrough('/api/users'); } // Config that is only loaded during tests export function testConfig() { } return { users: db.users } }); }
115. // app/mirage/config.js export default function() { this.passthrough('/api/users'); } // Config that is only loaded during tests export function testConfig() { this.get('/api/users', function() { return { users: db.users } }); }
116. // app/mirage/config.js export default function() { this.passthrough('/api/users'); } // Config that is only loaded during tests export function testConfig() { this.get('/api/users', function() { return { users: db.users } }); }
117. liquid-fire
118. View the original liquid-fire talk at 
 https://youtu.be/p8aF-7-_cE8
119. "Stability without stagnation"
120. Ember 2.0 New Features:
121. Ember 2.0 New Features: [this space intentionally left blank]
122. "Eventually, all the good ideas
 will end up in Ember"
 - Yehuda Katz
123. View the original segment at 
 https://youtu.be/z5e7kWSHWTg
124. View the original talk segment at 
 https://youtu.be/o12-90Dm-Qs
125. The Future of Ember
126. One-way Binding
127. Routable Components
128. Fast Boot
129. Community
132. emberjs.com
133. github.com/emberjs
134. ember-community-slackin.herokuapp.com
135. ember-cli-101.com
136. Hire @testdouble
 if you need some help!
137. Join @testdouble
 if you want to help others!
138. Thank YOU!
 Kevin Pfefferle @kpfefferle
139. Credits: - Product Demo courtesy of Batterii - Browser by useiconic.com from the Noun Project - Server by Dmitry Mamaev from the Noun Project - reload by Daniel Llamas Soto from the Noun Project - iPhone by Edward Boatman from the Noun Project - application by Marie Van den Broeck from the Noun Project - Borrowers by Adolfo Builes (https://github.com/abuiles/borrowers) - EmberConf 2015 - Physical Design (https://youtu.be/p8aF-7-_cE8) - React.js Conf 2015 - Hype! (https://youtu.be/z5e7kWSHWTg) - EmberConf 2015 - Opening Keynote (https://youtu.be/o12-90Dm-Qs)