A Sprinkling of Ember Brandon Hays @tehviking The Frontside

To paraphrase Doc Brown: I apologize for the crudity of this slide deck

You want a little interactivity You don’t want to rewrite your app

THE GOOGLES DO NOTHING

BUT ACTUALLY

It’s so easy I can show you in 5 minutes

1: Drop in a Component

What DHH means by “a sprinkling”

$(document).ready(function(){ $(".url-input-component-container").each(function(){ App.FsGifUrlInputComponent.create().replaceIn(this); }); });

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") });

Wait, that’s it?

Benefits over jQuery/ AJAX • Testability • Models, Computed Properties & bindings • Ember Data (No more writing $.ajax() ) • Reactivity between components • Super fun

2: Launch from a sub-URL

You want routes but you have an app

Get you an EmberController

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

Tell your router(s) what’s up

# 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' });

Demo

Now the hand wavey part

J/K Here is some code https://github.com/ tehviking/sprinkler