Save 37% off PRO during our Black Friday Sale! »

RAILS + EMBER.JS + EMBER-CLI = ❤

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.

0dfd10ad198ae5a87640da046a77a90a?s=128

Robert Jackson

August 03, 2014
Tweet

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?

  5. None
  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?

  9. None
  10. None
  11. None
  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