Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Robert Jackson

August 03, 2014
Tweet

More Decks by Robert Jackson

Other Decks in Programming

Transcript

  1. Who the heck is this guy? • DockYarder • Ember

    Core Team • General Open Source Addict twitter: rwjblue github: rwjblue
  2. OK, but what is it? • “Single Page Application” JS

    Framework • MVC Architecture client side • Opinionated (Convention over Configuration)
  3. Production Ready? • Compatibility • In use by large and

    small companies • Scheduled release process
  4. What is Ember CLI? • Convention over Configuration • ES6

    Modules • Blueprints/Generators • Test Harness • A Metric Crap-tonne more.
  5. CLI == Command Line (duh) ember build <options...> ember generate

    <blueprint> <options...> ember new <app-name> <options...> ember serve <options...> ember test <options...>
  6. Creating a Project % tree app -d app ├── components

    ├── controllers ├── helpers ├── models ├── routes ├── styles ├── templates │ └── components └── views
  7. 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.
  8. 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
  9. 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'); });
  10. 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...
  11. Ember CLI + Rails: Proxying • Rails => Ember CLI

    • Ember CLI => Rails • None
  12. Ember CLI + Rails: Testing Wait, we’re supposed to test

    our JavaScript?!?! “Test all the f@#&ing time!” - Bryan Liles
  13. Ember CLI + Rails: Testing • Uses ember-qunit • Does

    NOT hit the API • Prefer Function tests
  14. • Boots Full Application • Hit Rails API • Clear

    Database per Test Ember CLI + Rails: Testing