RAILS + EMBER.JS + EMBER-CLI = ❤

This talk reviews how to use the power of Rails as an API server along with Ember.js (via the ember-cli project).

We will review:

Setting up an ember-cli project.
Proxying requests to the Rails API.
Basic testing setup of the Ember.js side.

Transcript

1. RAILS + EMBER.JS + EMBER-CLI = ❤
2. Who the heck is this guy? • DockYarder • Ember Core Team • General Open Source Addict twitter: rwjblue github: rwjblue
3. Thank You!!
4. What is Ember.js?
6. OK, but what is it? • “Single Page Application” JS Framework • MVC Architecture client side • Opinionated (Convention over Configuration)
7. Production Ready? • Compatibility • In use by large and small companies • Scheduled release process
8. Who uses Ember?
12. What is Ember CLI?
13. What is Ember CLI? • Convention over Configuration • ES6 Modules • Blueprints/Generators • Test Harness • A Metric Crap-tonne more.
14. CLI == Command Line (duh) ember build <options...> ember generate <blueprint> <options...> ember new <app-name> <options...> ember serve <options...> ember test <options...>
15. Creating a Project npm install -g ember-cli ember new my-project cd my-project
16. Creating a Project % tree app -d app ├── components ├── controllers ├── helpers ├── models ├── routes ├── styles ├── templates │ └── components └── views
17. Creating a Project % tree tests -d tests ├── helpers └── unit
18. 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.
19. 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
20. Generators % cat app/components/async-select.js import Ember from 'ember'; export default Ember.Component.extend({ });
21. 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'); });
22. Test Harness % ember test
23. Test Harness
24. How can I use it with Rails?
25. 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...
26. Ember CLI + Rails: Proxying • Rails => Ember CLI • Ember CLI => Rails • None
27. Ember CLI + Rails: Booting
28. Ember CLI + Rails: Proxying
29. Ember CLI + Rails: Proxying % ember server --proxy http://localhost:3000
30. But, how can I test it?
31. Ember CLI + Rails: Testing Wait, we’re supposed to test our JavaScript?!?! “Test all the f@#&ing time!” - Bryan Liles
32. Ember CLI + Rails: Testing • Uses ember-qunit • Does NOT hit the API • Prefer Function tests
33. Ember CLI + Rails: Testing
34. • Boots Full Application • Hit Rails API • Clear Database per Test Ember CLI + Rails: Testing
35. Ember CLI + Rails: Testing
36. Ember CLI + Rails: Testing
37. Ember CLI + Rails: Testing
38. Ember CLI + Rails: Testing
39. The End