Moving to Backbone on Rails

Moving to Backbone on Rails Mark Percival Snip.It @mdp Monday,
July 30, 12

OR Monday, July 30, 12

Now you’ve got two problems Monday, July 30, 12

Introduction Monday, July 30, 12

Monday, July 30, 12

index.html <head> <meta charset="utf-8" /> <title>Snip.it | Collect Your Web</title>
<link rel="stylesheet" href="/stylesheets/reset.css" /> <link rel="stylesheet" href="/stylesheets/app.css" /> <script src="/javascripts/vendor.js"></script> <script src="/javascripts/app.js"></script> <script src="/scripts/launch.js"></script> </head> <body> </body> </html> Monday, July 30, 12

Impetus Monday, July 30, 12

Love debugging JS on IE8 Easier to blame back-end problems
on front-end Not enough semicolons in Ruby land Monday, July 30, 12

OR Monday, July 30, 12

JS Bloat Template manipulation on both ends Functional testing, it’s
not awesome blah.js.erb, sweet jesus no Monday, July 30, 12

What if Rails was just an JSON API? Monday, July
30, 12

Views become JSON Rendering is handled in one place The
front-end becomes an app. Mobile could just be another app. Monday, July 30, 12

Step 1. Build an API Monday, July 30, 12

Stop futzing with respond_to Monday, July 30, 12

No seriously, build an API /api/users/123.json Monday, July 30, 12

And better yet, version your API, cause you’re gonna screw
it up /api/v2/users/123 class Api::V2::UsersController < ApplicationController Monday, July 30, 12

Presenters are the new ERB Monday, July 30, 12

module Api module V2 class UserPresenter AVAILABLE_FIELDS = [ 'name',
'id', 'created_at', 'description', 'posts_count', 'public_folders_count' ] def initialize(user, opts = {}) @user = user @fields = user.attributes.slice(*AVAILABLE_FIELDS) end def everyone @fields end def privileged @fields.merge({ :email => @user.email, :email_import_code => @user.email_import_code }) end Monday, July 30, 12

Preload what you need <script type="text/javascript"> window.preloadedData = <%= @preload.to_json.html_safe
%>; </script> Monday, July 30, 12

Should I stay or should I go Monday, July 30,
12

JSON is not JSONP PLAN ACCORDINGLY Monday, July 30, 12

{ status: 401, error: ”You’re not wanted here” } Monday,
July 30, 12

I can’t make up my mind Monday, July 30, 12

# users_controller.rb before_filter :render_mackenzie? # application.rb class MackenzieBootstrap < StandardError;
end; rescue_from MackenzieBootstrap, :with => :mackenzie_bootstrap def render_mackenzie? if current_user.beta? raise MackenzieBootstrap end end def mackenzie_bootstrap render 'layouts/mackenzie', :layout => false end Monday, July 30, 12

rm conﬁg/routes.rb Monday, July 30, 12

NO Monday, July 30, 12

You’ll still need routing information for emails :( Monday, July
30, 12

Routing with PushStates requires diligence. You probably don’t have it.
Write route tests. Monday, July 30, 12

snip.it/mdp/favorites I click around and somehow wind up here Monday,
July 30, 12

≡ Hello old site! Monday, July 30, 12

How the #%@* do I log in? Monday, July 30,
12

Moved to OAuth 2 Access token must be included with
each API request No more CSRF tokens DON’T ACCEPT COOKIE AUTH Monday, July 30, 12

def access_token if request.headers['Authorization'] && request.headers['Authorization'].index(/OAuth/i) == 0 request.headers['Authorization'].split(' ')[1].strip
elsif params[:access_token] params[:access_token] end end def authenticated_user if access_token token = OauthAccessToken.find_by_key(access_token) raise NotAuthorized unless token token.user else nil end end Monday, July 30, 12

So everyone has to login again? Monday, July 30, 12

* Hand out OAuth tokens to old users * Use
the preload data to help * Let the app decide how to store them Monday, July 30, 12

Hello new engineer. Bundle install. Troubleshoot. Bundle install. Troubleshoot. See
you in a week. Monday, July 30, 12

We now have two apps Monday, July 30, 12

Rails Monday, July 30, 12

Backbone.JS (Mackenzie) Monday, July 30, 12

Mackenzie proxies API calls Monday, July 30, 12

server.use (req, res, next) -> routes = [/^\/api/] match =
false for r in routes match = req.path.search(r) >= 0 break if match return next() unless match req.headers['host'] = endpoint end = res.end res.end = -> console.log "#{req.method}: #{req.path} - #{res.statusCode}" end.call(res) proxy.proxyRequest req, res, host: endpoint port: endpointPort server.coffee Monday, July 30, 12

dev.snip.it/api/v2/users/me => snip.it/api/v2/users/me Monday, July 30, 12

Productioneering your app Monday, July 30, 12

Loading from a CDN <link rel="stylesheet" href="<%=@bucket-%>/<%=@sha-%>stylesheets/app.css" /> <script src="<%=@bucket-%>/<%=@sha-%>javascripts/app.js"></script>
Monday, July 30, 12

Wow, no more exceptions Monday, July 30, 12

Monday, July 30, 12

So this is goodbye Monday, July 30, 12

Things you might ﬁnd useful: Javascript Error Tracking: http://errorception.com/ Backbone.JS:
http://backbonejs.org/ Brunch: http://backbonejs.org/ Monday, July 30, 12

“I forgot to ask” Email: [email protected] Twitter: @mdp Snip.it: http://snip.it/mdp
Monday, July 30, 12

• Ruby/Javascript • Front/Back • Money • Chairs • Desks
(You get one) • [email protected] We’re Hiring (Shocking) Monday, July 30, 12

Moving to Backbone on Rails

Moving to Backbone on Rails

Other Decks in Technology

Featured

Transcript