Building Do on Heroku

Gopal Patel, Director of Engineering gopal@do.com • @nixme github.com/nixme

Social Productivity Everywhere “ ”

No content

No content

SINGLE PAGE

SINGLE PAGE MOBILE FIRST

SINGLE PAGE MOBILE FIRST MANY CLIENTS

↑ ↓ RUBY Heroku Postgres, New Relic, Logplex… ADD-ONS iOS Android Desktop Widgets CoffeeScript + Backbone.js WEB APPS NATIVE CLIENTS CUSTOM UI FRAMEWORK

API First BEST PRACTICE

API First BEST PRACTICE

Build Platform API First BEST PRACTICE

Build Platform Separation of concerns. Modularity. API First BEST PRACTICE

Build Platform Separation of concerns. Modularity. Constraints lead to guided design API First BEST PRACTICE

Build Platform Separation of concerns. Modularity. Constraints lead to guided design Speak HTTP API First BEST PRACTICE

No content

def hello puts 'Hello World!' end hello # => Hello World

class Note include SoftDelete def initialize(title = 'Untitled') @id = Sequence.next_id @title = title @body = 'Enter your note...' end def print puts "#{@id}: #{@title} - #{@body}" end end

No content

VIEW MODEL CONTROLLER BROWSER ↑ ↓ ↑ ↓ ROUTER ↑ ↓ ↑ ↓

JSON MODEL CONTROLLER BROWSER ↑ ↓ ↑ ↓ ROUTER ↑ ↓ ↑ ↓

Notes Controller RUBY DEMO

The New Age of JS BIG MOVES

No content

$('.name').bind('change', function(event) { $.ajax({ type: "PUT", url: "/names/" + $(event.target).attr('context_id'), data: { value: $(event.target).attr('data-value') }, success: function(response) { statusIcon = $('.name + .status'); statusIcon.show(); setTimeout(function() { statusIcon.hide(); }, 5000); }, error: function(response) { console.log(response); $('.name').attr('disabled', true); } }); }); $('.name_delete').click(function(event) { event.preventDefault(); id = $(event.target).attr('context_id'); if (confirm('Are you sure?')) { $.ajax({ type: "DELETE", url: "/names/" + id, success: function(response) { $(".row-" + id).remove(); $(".row-" + (id + 1)).focus(); },

No content

Backbone.Events binds and triggers

Backbone.Events binds and triggers Backbone.Router front-end routing, pushState

Backbone.Events binds and triggers Backbone.Router front-end routing, pushState Backbone.View controllers for your UI

Backbone.Events binds and triggers Backbone.Router front-end routing, pushState Backbone.View controllers for your UI Backbone.Model domain objects

Backbone.Events binds and triggers Backbone.Router front-end routing, pushState Backbone.View controllers for your UI Backbone.Model domain objects Backbone.Collection model sets

var object = {}; _.extend(object, Backbone.Events); object.on("alert", function(msg) { alert("Triggered " + msg); }); object.trigger("alert", "an event"); Backbone.Events

var Note = Backbone.Model.extend({ initialize: function() {…}, coordinates: function() {…}, }); var note = new Note({ title: "Today's Dinner", body: … }); note.on("error", function(model, error) {…}); note.save(); Backbone.Model

var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, render: function() {…} }); Backbone.View

Do’s Router COFFEESCRIPT DEMO

Ember Knockout Spine

No content

No content

No content

number = 42 flag = true greeting = 'world' var flag, greeting, number; number = 42; flag = true; greeting = 'world';

square = (x) -> x * x cube = (x) -> x * square x @customer = new Customer $('.cart').on 'click', (event) => @customer.buy event.target var cube, square, _this = this; square = function(x) { return x * x; }; cube = function(x) { return x * square(x); }; this.customer = new Customer; $('.cart').on('click', function(event) { return _this.customer.buy(event.target); });

kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 var kids; kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", age: 9 } };

for own view, element of views $(element).remove() view.removed = true var element, view, __hasProp = Object.prototype.hasOwnProperty; for (view in views) { if (!__hasProp.call(views, view)) continue; element = views[view]; $(element).remove(); view.removed = true; }

coffeescript.org

coffeescript.org sass-lang.com

No content

No content

BUNDLE (Sprockets) ↓ MINIFY (UglifyJS) COMPRESSION (GZIP) git push ↓ ↓

BUNDLE (Sprockets) ↓ MINIFY (UglifyJS) COMPRESSION (GZIP) git push ↓ ↓ ↑ ↓ → CLOUDFRONT ↑ ↓

web: unicorn -p $PORT -c ./config/unicorn.rb worker: rake resque:work QUEUE=notifications,... workerprovisioning: rake resque:work QUEUE=provisioning,... scheduler: rake resque:scheduler VERBOSE=true Procfile

BACKUPS • FORKING • FOLLOWING

No content

CONTINUOUS INTEGRATION AUTOMATED TESTING

CONTINUOUS DEPLOYMENT

CONTINUOUS DEPLOYMENT FEATURE FLAGS if Do.Flags.check ‘recurrence’ # Recurring Tasks Code

Design HOW WE DO

Design HOW WE DO User Experience is #1

Design HOW WE DO User Experience is #1 Engineering + Design = Like

Design HOW WE DO User Experience is #1 Engineering + Design = Like Design is a process / conversation

Design HOW WE DO User Experience is #1 Engineering + Design = Like Design is a process / conversation We work together. Everyone commits.

WHAT WAS THIS TALK ABOUT? API First Expressive Languages Modern Browsers Continuous Deployment

WHAT WAS THIS TALK ABOUT? API First Expressive Languages Modern Browsers Continuous Deployment Loosely-coupled Code Tightly-coupled Team

do.com

THE PANEL Manav Monga Product Guy. @xmanav Bing Yang Product Guy. @bsbox David Yung Developer. @azethoth Austin Bales Designer. @arbales http://pris.ma/9M