Ember.js: building better apps in less time

Transcript

1. Front in Floripa - 2016
2. romulomachado github.com/ romulomachado_ twitter.com/
3. Hello, World!
4. Scenario
6. yummmy old codebase Rails 3.x jQuery UI coffeescript ~700 commits
11. Re{design, write}
12. redesign to provide a better experience
13. rewrite to improve code quality and maintainability
14. rewrite API approach monolith testable JS
16. What makes it great?
17. Convention over configuration
19. It was fun to get to pick and choose, but every step of the way we doubted our choices: were we making the wrong decision with a given library choice? “ Jesse Pollak, “Choosing Ember over React in 2016”
20. Opinionated
21. make less decisions
22. focus on what matters
24. $ npm install -g ember-cli
25. Handles every step of your build
26. Transpiling code
27. Resolving modules
28. app !"" controllers # $"" post.js !"" routes # $"" post.js $"" templates $"" post.hbs
29. Productionizing code
30. Demo
31. $ ember new super-rentals
32. $ ember new super-rentals installing app create .bowerrc create .ember-cli create .jshintrc create .travis.yml create .watchmanconfig create README.md create app/app.js create app/router.js create bower.json create package.json create tests/index.html create tests/test-helper.js ... Successfully initialized git. Installed packages for tooling via npm. Installed browser packages via Bower.
33. super-rentals !"" app !"" bower_components !"" config !"" dist !"" node_modules !"" public !"" tests !"" vendor !"" README.md !"" bower.json !"" ember-cli-build.js !"" package.json $"" testem.js
34. $ ember server
35. $ ember server Livereload server on http://localhost:49152 Serving on http://localhost:4200/ Build successful - 4247ms. Slowest Nodes (totalTime => 5% ) | Total (avg) ----------------------------------------------+--------------------- Babel (12) | 1868ms (155 ms) Concat (8) | 394ms (49 ms) ConfigReplace (3) | 389ms (129 ms)
37. $ ember generate <blueprint>
38. $ ember generate model rental title:string image:string installing model create app/models/rental.js installing model-test create tests/unit/models/rental-test.js.
39. // app/models/rental.js import DS from 'ember-data'; export default DS.Model.extend({ title: DS.attr('string'), image: DS.attr('string') });
40. $ ember generate route about installing route create app/routes/about.js create app/templates/about.hbs updating router add route about installing route-test create tests/unit/routes/about-test.js
41. $ ember generate component rental-listing installing component create app/components/rental-listing.js create app/templates/components/rental-listing.hbs installing component-test create tests/integration/components/rental-listing-test.js
42. adapter component controller helper initializer mixin model resource route serializer service template ember generate ...
43. adapter-test component-test controller-test helper-test initializer-test mixin-test model-test route-test serializer-test service-test acceptance-test* ember generate ... * only one that is not generated automatically
44. $ ember test
45. // tests/unit/models/rental-test.js test('slug', function (assert) { let model = this.subject({ title: 'Quarto no Centro de Floripa' }); assert.equal(model.get('slug'), 'quarto-no-centro-de-floripa', 'should generate slug'); }); });
46. // tests/integration/components/rental-listing-test.js test('should toggle wide class on click', function (assert) { let rentalObj = Ember.Object.create({ image: 'quarto-no-centro.jpg', title: 'Quarto no Centro de Floripa' }); this.render(hbs`{{rental-listing rental=rentalObj}}`); assert.equal(this.$('.image.wide').length, 0, 'initially rendered small’); this.$('.image').click(); assert.equal(this.$('.image.wide').length, 1, 'rendered wide after click'); this.$('.image').click(); assert.equal(this.$('.image.wide').length, 0, 'rendered small after second click'); });
47. $ ember generate acceptance-test list-rentals installing acceptance-test create tests/acceptance/list-rentals-test.js
48. // tests/acceptance/list-rentals-test.js test('should link to about page', function (assert) { visit('/'); click('a:contains("About")'); andThen(function () { assert.equal(currentURL(), '/about', 'should navigate to about'); }); });
49. $ ember test ok 1 PhantomJS 2.1 - Acceptance | list rentals: should link to about page ok 2 PhantomJS 2.1 - JSHint | acceptance/list-rentals-test.js: should pass jshint ... ok 9 PhantomJS 2.1 - Integration | Component | rental listing: should toggle wide class on click ... 1..19 # tests 19 # pass 19 # skip 0 # fail 0 # ok
50. $ ember install <addon>
53. Stability without stagnation
54. Release channels
55. Rapid Release 6-week cycle
57. painless upgrades
58. 1.2.3 major minor patch
61. hype train escaping the
63. You don't have to worry about the next hype technology, we're gonna eventually catch up. “ — Erik Bryn
64. Eventually, all good ideas will end up in Ember “ — Yehuda Katz
66. In the end...
69. Thank you, Floripa!