A Sprinkling of Ember

Most people know Ember is a powerful JS framework, but most don't know it can be sprinkled, a little at a time, into your Rails (or other) app. Here's how and why you might try it for yourself.

Lightning talk given at Austin on Rails in Feb 2014, slides prepared in haste.

A small application demonstrating these techniques (and one way to test them) is here:

https://github.com/tehviking/sprinkler

Transcript

1. A Sprinkling of Ember Brandon Hays @tehviking The Frontside
2. To paraphrase Doc Brown: I apologize for the crudity of this slide deck
3. You want a little interactivity You don’t want to rewrite your app
4. THE GOOGLES DO NOTHING
5. BUT ACTUALLY
6. It’s so easy I can show you in 5 minutes
7. 1: Drop in a Component
8. What DHH means by “a sprinkling”
9. $(document).ready(function(){ $(".url-input-component-container").each(function(){ App.FsGifUrlInputComponent.create().replaceIn(this); }); });
10. App.FsGifUrlInputComponent = Ember.Component.extend({ layoutName: "components/fs-gif-url-input", gifUrl: null, urlIsValid: function(){ if(!!this.get("gifUrl")) { return this.get("gifUrl").match(/^(ht|f)tps?:\/\/[a- z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/); } }.property("gifUrl") });
11. Wait, that’s it?
12. Benefits over jQuery/ AJAX • Testability • Models, Computed Properties & bindings • Ember Data (No more writing $.ajax() ) • Reactivity between components • Super fun
13. 2: Launch from a sub-URL
14. You want routes but you have an app
15. Get you an EmberController
16. class EmberController < ApplicationController def index end end class GifLinksController < ApplicationController ... # GET /gif_links/1/details # Send back to Ember to handle this route def details respond_to do |format| format.html { render "ember/index" } end end ... end
17. Tell your router(s) what’s up
18. # routes.rb Sprinkler::Application.routes.draw do resources :gif_links do get :details, on: :member end resources :ember, controller: "ember", only: [ :index ] root 'gif_links#index' end // router.js App.Router.map(function(){ this.route("gifDetails", {path: "gif_links/:id/details"}) }); App.Router.reopen({ location: 'history' });
19. Demo
20. Now the hand wavey part
21. J/K Here is some code https://github.com/ tehviking/sprinkler