Building Do on Heroku

Gopal Patel (@nixme) presents "Building Do on Heroku"

Transcript

1. Building Do on Heroku
2. Gopal Patel, Director of Engineering gopal@do.com • @nixme github.com/nixme
3. Social Productivity Everywhere “ ”
6. SINGLE PAGE
7. SINGLE PAGE MOBILE FIRST
8. SINGLE PAGE MOBILE FIRST MANY CLIENTS
9. ↑ ↓ RUBY Heroku Postgres, New Relic, Logplex… ADD-ONS iOS Android Desktop Widgets CoffeeScript + Backbone.js WEB APPS NATIVE CLIENTS CUSTOM UI FRAMEWORK
10. API First BEST PRACTICE
11. API First BEST PRACTICE
12. Build Platform API First BEST PRACTICE
13. Build Platform Separation of concerns. Modularity. API First BEST PRACTICE
14. Build Platform Separation of concerns. Modularity. Constraints lead to guided design API First BEST PRACTICE
15. Build Platform Separation of concerns. Modularity. Constraints lead to guided design Speak HTTP API First BEST PRACTICE
17. def hello puts 'Hello World!' end hello # => Hello World
18. 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
20. VIEW MODEL CONTROLLER BROWSER ↑ ↓ ↑ ↓ ROUTER ↑ ↓ ↑ ↓
21. JSON MODEL CONTROLLER BROWSER ↑ ↓ ↑ ↓ ROUTER ↑ ↓ ↑ ↓
22. Notes Controller RUBY DEMO
23. The New Age of JS BIG MOVES
25. $('.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(); },
27. Backbone.Events binds and triggers
28. Backbone.Events binds and triggers Backbone.Router front-end routing, pushState
29. Backbone.Events binds and triggers Backbone.Router front-end routing, pushState Backbone.View controllers for your UI
30. Backbone.Events binds and triggers Backbone.Router front-end routing, pushState Backbone.View controllers for your UI Backbone.Model domain objects
31. 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
32. var object = {}; _.extend(object, Backbone.Events); object.on("alert", function(msg) { alert("Triggered " + msg); }); object.trigger("alert", "an event"); Backbone.Events
33. 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
34. 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
35. Do’s Router COFFEESCRIPT DEMO
36. Ember Knockout Spine
40. number = 42 flag = true greeting = 'world' var flag, greeting, number; number = 42; flag = true; greeting = 'world';
41. 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); });
42. kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 var kids; kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", age: 9 } };
43. 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; }
44. coffeescript.org
45. coffeescript.org sass-lang.com
48. BUNDLE (Sprockets) ↓ MINIFY (UglifyJS) COMPRESSION (GZIP) git push ↓ ↓
49. BUNDLE (Sprockets) ↓ MINIFY (UglifyJS) COMPRESSION (GZIP) git push ↓ ↓ ↑ ↓ → CLOUDFRONT ↑ ↓
50. 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
51. BACKUPS • FORKING • FOLLOWING
53. CONTINUOUS INTEGRATION AUTOMATED TESTING
54. CONTINUOUS DEPLOYMENT
55. CONTINUOUS DEPLOYMENT FEATURE FLAGS if Do.Flags.check ‘recurrence’ # Recurring Tasks Code
56. Design HOW WE DO
57. Design HOW WE DO User Experience is #1
58. Design HOW WE DO User Experience is #1 Engineering + Design = Like
59. Design HOW WE DO User Experience is #1 Engineering + Design = Like Design is a process / conversation
60. Design HOW WE DO User Experience is #1 Engineering + Design = Like Design is a process / conversation We work together. Everyone commits.
61. WHAT WAS THIS TALK ABOUT? API First Expressive Languages Modern Browsers Continuous Deployment
62. WHAT WAS THIS TALK ABOUT? API First Expressive Languages Modern Browsers Continuous Deployment Loosely-coupled Code Tightly-coupled Team
63. do.com
64. THE PANEL Manav Monga Product Guy. @xmanav Bing Yang Product Guy. @bsbox David Yung Developer. @azethoth Austin Bales Designer. @arbales http://pris.ma/9M