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

A Sprinkling of Ember

6fd16b1b6a307ca583526e2ec4dab52d?s=47 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

6fd16b1b6a307ca583526e2ec4dab52d?s=128

tehviking

February 26, 2014
Tweet

More Decks by tehviking

Other Decks in Programming

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