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

A Sprinkling of Ember

tehviking
February 26, 2014

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

tehviking

February 26, 2014
Tweet

More Decks by tehviking

Other Decks in Programming

Transcript

  1. 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") });
  2. Benefits over jQuery/ AJAX • Testability • Models, Computed Properties

    & bindings • Ember Data (No more writing $.ajax() ) • Reactivity between components • Super fun
  3. 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
  4. # 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' });