Ember.js: building better apps in less time

Slide 1

Slide 1 text

Front in Floripa - 2016

Slide 2

Slide 2 text

romulomachado github.com/ romulomachado_ twitter.com/

Slide 3

Slide 3 text

Hello, World!

Slide 4

Slide 4 text

Scenario

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

yummmy old codebase Rails 3.x jQuery UI coffeescript ~700 commits

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Re{design, write}

Slide 12

Slide 12 text

redesign to provide a better experience

Slide 13

Slide 13 text

rewrite to improve code quality and maintainability

Slide 14

Slide 14 text

rewrite API approach monolith testable JS

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

What makes it great?

Slide 17

Slide 17 text

Convention over configuration

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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”

Slide 20

Slide 20 text

Opinionated

Slide 21

Slide 21 text

make less decisions

Slide 22

Slide 22 text

focus on what matters

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

$ npm install -g ember-cli

Slide 25

Slide 25 text

Handles every step of your build

Slide 26

Slide 26 text

Transpiling code

Slide 27

Slide 27 text

Resolving modules

Slide 28

Slide 28 text

app !"" controllers # $"" post.js !"" routes # $"" post.js $"" templates $"" post.hbs

Slide 29

Slide 29 text

Productionizing code

Slide 30

Slide 30 text

Demo

Slide 31

Slide 31 text

$ ember new super-rentals

Slide 32

Slide 32 text

$ 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.

Slide 33

Slide 33 text

super-rentals !"" app !"" bower_components !"" config !"" dist !"" node_modules !"" public !"" tests !"" vendor !"" README.md !"" bower.json !"" ember-cli-build.js !"" package.json $"" testem.js

Slide 34

Slide 34 text

$ ember server

Slide 35

Slide 35 text

$ 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)

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

$ ember generate

Slide 38

Slide 38 text

$ 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.

Slide 39

Slide 39 text

// app/models/rental.js import DS from 'ember-data'; export default DS.Model.extend({ title: DS.attr('string'), image: DS.attr('string') });

Slide 40

Slide 40 text

$ 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

Slide 41

Slide 41 text

$ 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

Slide 42

Slide 42 text

adapter component controller helper initializer mixin model resource route serializer service template ember generate ...

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

$ ember test

Slide 45

Slide 45 text

// 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'); }); });

Slide 46

Slide 46 text

// 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'); });

Slide 47

Slide 47 text

$ ember generate acceptance-test list-rentals installing acceptance-test create tests/acceptance/list-rentals-test.js

Slide 48

Slide 48 text

// 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'); }); });

Slide 49

Slide 49 text

$ 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

Slide 50

Slide 50 text

$ ember install

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Stability without stagnation

Slide 54

Slide 54 text

Release channels

Slide 55

Slide 55 text

Rapid Release 6-week cycle

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

painless upgrades

Slide 58

Slide 58 text

1.2.3 major minor patch

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

hype train escaping the

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

You don't have to worry about the next hype technology, we're gonna eventually catch up. “ — Erik Bryn