Tweet
Tweet

Slide 1

Slide 1 text

RAILS + EMBER.JS + EMBER-CLI = ❤

Slide 2

Slide 2 text

Who the heck is this guy? ● DockYarder ● Ember Core Team ● General Open Source Addict twitter: rwjblue github: rwjblue

Slide 3

Slide 3 text

Thank You!!

Slide 4

Slide 4 text

What is Ember.js?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

OK, but what is it? ● “Single Page Application” JS Framework ● MVC Architecture client side ● Opinionated (Convention over Configuration)

Slide 7

Slide 7 text

Production Ready? ● Compatibility ● In use by large and small companies ● Scheduled release process

Slide 8

Slide 8 text

Who uses Ember?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

What is Ember CLI?

Slide 13

Slide 13 text

What is Ember CLI? ● Convention over Configuration ● ES6 Modules ● Blueprints/Generators ● Test Harness ● A Metric Crap-tonne more.

Slide 14

Slide 14 text

CLI == Command Line (duh) ember build ember generate ember new ember serve ember test

Slide 15

Slide 15 text

Creating a Project npm install -g ember-cli ember new my-project cd my-project

Slide 16

Slide 16 text

Creating a Project % tree app -d app ├── components ├── controllers ├── helpers ├── models ├── routes ├── styles ├── templates │ └── components └── views

Slide 17

Slide 17 text

Creating a Project % tree tests -d tests ├── helpers └── unit

Slide 18

Slide 18 text

Creating a Project % ember server version: 0.0.40 Livereload server on port 35729 Serving on http://0.0.0.0:4200 Build successful - 444ms.

Slide 19

Slide 19 text

Generators % ember generate component async-select version: 0.0.40 installing create app/components/async-select.js create app/templates/components/async-select.hbs create tests/unit/components/async-select-test.js

Slide 20

Slide 20 text

Generators % cat app/components/async-select.js import Ember from 'ember'; export default Ember.Component.extend({ });

Slide 21

Slide 21 text

Generators import { test, moduleForComponent } from 'ember-qunit'; moduleForComponent('async-select'); test('it renders', function() { var component = this.subject(); equal(component.state, 'preRender'); this.append(); equal(component.state, 'inDOM'); });

Slide 22

Slide 22 text

Test Harness % ember test

Slide 23

Slide 23 text

Test Harness

Slide 24

Slide 24 text

How can I use it with Rails?

Slide 25

Slide 25 text

Ember CLI + Rails: Structure ● Separate Repos ● Single repo (`backend` and `frontend` dirs). ● Single repo (`client` dir inside rails app). ● Almost any setup you can think of...

Slide 26

Slide 26 text

Ember CLI + Rails: Proxying ● Rails => Ember CLI ● Ember CLI => Rails ● None

Slide 27

Slide 27 text

Ember CLI + Rails: Booting

Slide 28

Slide 28 text

Ember CLI + Rails: Proxying

Slide 29

Slide 29 text

Ember CLI + Rails: Proxying % ember server --proxy http://localhost:3000

Slide 30

Slide 30 text

But, how can I test it?

Slide 31

Slide 31 text

Ember CLI + Rails: Testing Wait, we’re supposed to test our JavaScript?!?! “Test all the f@#&ing time!” - Bryan Liles

Slide 32

Slide 32 text

Ember CLI + Rails: Testing ● Uses ember-qunit ● Does NOT hit the API ● Prefer Function tests

Slide 33

Slide 33 text

Ember CLI + Rails: Testing

Slide 34

Slide 34 text

● Boots Full Application ● Hit Rails API ● Clear Database per Test Ember CLI + Rails: Testing

Slide 35

Slide 35 text

Ember CLI + Rails: Testing

Slide 36

Slide 36 text

Ember CLI + Rails: Testing

Slide 37

Slide 37 text

Ember CLI + Rails: Testing

Slide 38

Slide 38 text

Ember CLI + Rails: Testing

Slide 39

Slide 39 text

The End