A Tale of Two Apps

a Tale of Two Apps How Ember Changed the Way
I Build Web Applications

More than just a talk on Ember

Today, we are going to T A L K about
3things

3things A rich Man

3things A laid back Dude A rich Man

3things A laid back Dude A rug A rich Man

Jamie Wright @jwright

App #1 Server Side Rendering

App #1 Google http://lebowskifest.com Web Page Title

http://lebowskifest.com App #1 Google http://lebowskifest.com Web Page Title

http://lebowskifest.com App #1 Google http://lebowskifest.com Web Page Title 1.Router handles
the request

the request 2.Controller is created

the request 2.Controller is created 3.Controller action is called

the request 2.Controller is created 3.Controller action is called 4.Controller creates a template & provides data

the request 2.Controller is created 3.Controller action is called 4.Controller creates a template & provides data 5.Template is rendered into HTML

the request 2.Controller is created 3.Controller action is called 4.Controller creates a template & provides data 5.Template is rendered into HTML 6.HTML is returned for the response

the request 2.Controller is created 3.Controller action is called 4.Controller creates a template & provides data 5.Template is rendered into HTML 6.HTML is returned for the response MVC

http://lebowskifest.com <html /> App #1 Google http://lebowskifest.com Web Page Title

1.Browser starts page layout

1.Browser starts page layout 2.Additional sources requested

Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg />

The Good App #1

s You know the environment App #1

s Caching App #1

s Google can crawl App #1

The Bad App #1

App #1 Bad UX in most cases

App #1 Incomplete prototyping

Talk from a Mockup

App #1 Incomplete prototyping

App #1 Slower to polish

App #1 A false sense of done

App #1 Boundaries

// app/assets/javascripts/availability.js ! $('select.monthYearSelect').change(function(e) { var country = $(e.target).data("country-code"); var
city = $(e.target).data("city-permalink"); var tour = $(e.target).data("tour-id"); ! $.get("/" + country + "/" + city + "/" + tour + "/tickets/ availability/" + $(e.target).val() + "/dates"); ! e.preventDefault(); });

# app/controllers/availability_controller.rb ! class AvailabilityController < ApplicationController def dates @dates
= OfferAvailability.new(params[:id], Date.today, Date.new(year, month, -1)).dates end end

// app/views/availability/dates.js.erb ! $("select.daySelect").empty(); $("select.daySelect").html("<%= j content_tag(:option, "Which Day?", value:
"", class: "disabled", disabled: "disabled", selected: "selected") + options_from_collection_for_select(@dates, :id, :display) %>"); $("select.daySelect").removeClass("selected"); ! <% if @dates.size == 1 %> $("select.daySelect").val($("select.daySelect option:nth- child(2)").val()).change(); $("select.daySelect").addClass("selected"); <% end %>

w App #2 Client Side Rendering

http://lebowskifest.com App #2 Google http://lebowskifest.com Web Page Title

1.Browser starts page layout

1.Browser starts page layout 2.Additional sources requested

Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location

{} http://lebowskifest.com <html /> App #2 Google http://lebowskifest.com Web Page
Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model 4.Route renders a View http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model 4.Route renders a View 5.Controller sets state on View http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model 4.Route renders a View 5.Controller sets state on View 6.View renders a Template http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model 4.Route renders a View 5.Controller sets state on View 6.View renders a Template http://lebowskifest.com/api/scenes MVC MVC

What rendering technique is faster?

Rendering on THE server is FASTER

The Good App #2

App #2 Seems faster

App #2 Usually leads to good UX

App #2 Clear definition of boundaries

App #2 Faster to polish

App #2 Better sense of done

App #2 Simplest thing first

App #2 First class citizens

The Bad App #2

App #2 Error handling

App #2 Google http://lebowskifest.com Web Page Title WhItE PaGe Of
DeAtH

App #2 Jump to crawl

bustle.com

App #2 Debugging

App #2 Progressive Enhancement

The rug Ember

Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model 4.Route renders a View http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model 4.Route renders a View 5.Controller sets state on View http://lebowskifest.com/api/scenes MVC

Title Google http://lebowskifest.com Web Page Title <script src=js/main.js /> <link href=css/app.css /> <img src=images/donny.jpg /> 1.Router creates a Route based on location 2.Route loads a Model 3.Route creates a Controller & sets the Model 4.Route renders a View 5.Controller sets state on View 6.View renders a Template http://lebowskifest.com/api/scenes MVC

Application The rug <script> window.App = Ember.Application.create(); </script>

Router <script> window.App = Ember.Application.create(); </script> The rug

Router <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.route("about"); }); </script>
The rug /about

Router <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.route("about"); this.resource("projects", function()
{ this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); </script> The rug /about /projects /projects/new /projects/:project_id

Routes The rug <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.resource("projects",
function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({}); App.ProjectsNewRoute = Ember.Route.extend({}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({}); App.ProjectsNewRoute = Ember.Route.extend({}); App.ProjectRoute = Ember.Route.extend({}); </script>

Models The rug <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.resource("projects",
function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({}); App.ProjectsNewRoute = Ember.Route.extend({}); App.ProjectRoute = Ember.Route.extend({}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({}); App.ProjectRoute = Ember.Route.extend({}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({}); App.ProjectRoute = Ember.Route.extend({}); </script> GET /api/projects

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({ model: function() { return App.Project.create(); } }); ! App.ProjectRoute = Ember.Route.extend({}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({ model: function() { return App.Project.create(); } }); ! App.ProjectRoute = Ember.Route.extend({ model: function(params) { return this.store.find('project', params.project_id); } }); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({ model: function() { return App.Project.create(); } }); ! App.ProjectRoute = Ember.Route.extend({ model: function(params) { return this.store.find('project', params.project_id); } }); </script> GET /api/projects/65

Controllers The rug <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.resource("projects",
function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({ model: function() { return App.Project.create(); } }); ! App.ProjectRoute = Ember.Route.extend({ model: function(params) { return this.store.find('project', params.project_id); } }); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({...}); App.ProjectRoute = Ember.Route.extend({...}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({...}); App.ProjectRoute = Ember.Route.extend({...}); ! App.ProjectsIndexController = Ember.ArrayController.extend({}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectsNewRoute = Ember.Route.extend({...}); App.ProjectRoute = Ember.Route.extend({...}); ! App.ProjectsIndexController = Ember.ArrayController.extend({ sortProperties: ['name', 'createdAt']; sortAscending: true; }); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({...}); App.ProjectsNewRoute = Ember.Route.extend({...}); App.ProjectRoute = Ember.Route.extend({...}); ! App.ProjectsIndexController = Ember.ArrayController.extend({...}); App.ProjectsNewController = Ember.ObjectController.extend({ actions: { resetForm: function() { this.get('model').rollback(); } } }); </script>

Views The rug <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.resource("projects",
function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({...}); App.ProjectsNewRoute = Ember.Route.extend({...}); App.ProjectRoute = Ember.Route.extend({...}); ! App.ProjectsIndexController = Ember.ArrayController.extend({...}); App.ProjectsNewController = Ember.ObjectController.extend({}); App.ProjectController = Ember.ObjectController.extend({}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsNewRoute = Ember.Route.extend({...}); ! App.ProjectsNewController = Ember.ObjectController.extend({...}); </script>

function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsNewRoute = Ember.Route.extend({...}); ! App.ProjectsNewController = Ember.ObjectController.extend({...}); ! App.ProjectsNewView = Ember.View.extend({ click: function(event) { this.get('controller').send('resetForm'); } }); </script>

Templates The rug <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.resource("projects",
function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({...}); App.ProjectsNewRoute = Ember.Route.extend({...}); App.ProjectRoute = Ember.Route.extend({...}); ! App.ProjectsIndexController = Ember.ArrayController.extend({...}); App.ProjectsNewController = Ember.ObjectController.extend({...}); App.ProjectController = Ember.ObjectController.extend({}); ! App.ProjectsIndexView = Ember.View.extend({}); App.ProjectsNewView = Ember.View.extend({}); App.ProjectView = Ember.View.extend({}); </script>

Templates The rug <script> window.App = Ember.Application.create(); ! App.Router.reopen({ this.resource("projects",
function() { this.route("new"); }); this.resource("project", { path: "/projects/:project_id" }); }); App.ProjectsIndexRoute = Ember.Route.extend({...}); App.ProjectsNewRoute = Ember.Route.extend({...}); App.ProjectRoute = Ember.Route.extend({...}); ! App.ProjectsIndexController = Ember.ArrayController.extend({...}); App.ProjectsNewController = Ember.ObjectController.extend({...}); App.ProjectController = Ember.ObjectController.extend({}); ! App.ProjectsIndexView = Ember.View.extend({}); App.ProjectsNewView = Ember.View.extend({}); App.ProjectView = Ember.View.extend({}); </script> ! <script type="text/x-handlebars"> <div> {{outlet}} </div> </script>

Templates The rug <script type="text/x-handlebars" data-template-name="projects/index"> <table> <thead> <tr> <th>Name</th>
<th>Created</th> </tr> </thead> <tbody> {{#each}} <tr> <td>{{name}}</td> <td>{{formattedDate format='LL' value=createdAt}}</td> </tr> {{/each}} </tbody> </table> </script>

Conventions The rug

As Easy As Rails The rug

Getting to done The rug

Integration Testing The rug <script> ! module("Project Creation", { setup:
function() { App.reset(); } }); ! test("creating a project displays the new project", function(){ visit("/projects/new"); fillIn("input[placeholder='Name']", "A new project"); click(".submit"); andThen(function() { ok(find("h1:contains('A new project')").length, "The project's name should display"); }); }); ! </script>

Unit Testing The rug <script> var model = null; var
controller = null; ! module "App.ProjectsNewController::validations", { setup: function() { App.reset(); this.model = Ember.Object.create(); this.controller = App.ProjectsNewController.create(content: @model); } }); ! test("name must be present", function() { this.controller.set('name', '') errors = this.controller.get('errors') deepEqual errors.name, ["can't be blank"] }); </script>

Fixtures The rug <script> window.App = Ember.Application.create(); ! App.ProjectsIndexRoute =
Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); </script>

Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ApplicationAdapter = DS.FixtureAdapter.extend(); </script>

Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ApplicationAdapter = DS.FixtureAdapter.extend(); ! App.Project.FIXTURES = [ { id: 1, name: 'The Jeffery Lebowski Project', createdAt: new Date() }, { id: 2, name: 'The Dude\'s Project', createdAt: new Date() } ]; </script>

Ember.Route.extend({ model: function() { return this.store.findAll('project'); } }); ! App.ProjectAdapter = DS.ActiveModelAdapter.extend(); ! App.ApplicationAdapter = DS.FixtureAdapter.extend(); </script>

API Stubbing The rug <script> // config/server.js ! module.exports =
{ drawRoutes: function(app) { app.get('/api/projects', function(req, res) { res.json([ { id: 1, name: 'Blah', created_at: new Date() }, { id: 2, name: 'Blah Again', created_at: new Date() }, ]); } } } ! </script>

API Building The rug require 'spec_helper' ! describe Api::ProjectsController do
describe "GET 'index'" do context 'with no authentication' do it 'should return a 401' do get :index, format: :json response.status.should == 401 end end end end

API Building The rug class Api::ProjectsController < Api::ApiController respond_to :json
! def index render nothing: true end end

! def index authenticate! render nothing: true end end

describe "GET 'index'" do context 'with no authentication' do it 'should return a 401' do get :index, format: :json response.status.should == 401 end end ! context 'with valid credentials' do let(:user) { FactoryGirl.create(:user) } ! it 'should return a 200' do get :index, format: :json, 'HTTP_AUTHORIZATION' => "Token token=#{user.api_token}" response.status.should == 200 end end end end

describe "GET 'index'" do context 'with no authentication' do it 'should return a 401' do get :index, format: :json response.status.should == 401 end end ! context 'with valid credentials' do let(:user) { FactoryGirl.create(:user) } ! it 'should return a 200' do get :index, format: :json, 'HTTP_AUTHORIZATION' => "Token token=#{user.api_token}" response.status.should == 200 end ! it 'returns all the current goals for the current user for that week' do projects = [Project.new(name: 'My first project')] Project.stubs(:where).returns projects get :index, format: :json, 'HTTP_AUTHORIZATION' => "Token token=#{user.api_token}" json = JSON.parse(response.body)['projects'] json.length.should == 1 json[0]['name'].should == 'My first project' end end end end

! def index authenticate! @projects = Project.where(owner_id: current_user.id) respond_with @projects, each_serializer: ProjectSerializer end end

Building The rug $ lineman build

Building The rug Running "common" task ! Running "coffee:compile" (coffee)
task File generated/js/app.coffee.js created. File generated/js/spec.coffee.js created. >> Destination (generated/js/spec-helpers.coffee.js) not written because compiled files were empty. ! Running "less:compile" (less) task >> Destination not written because no source files were found. File generated/css/app.less.css created. ! Running "jshint:files" (jshint) task ! Running "handlebars:compile" (handlebars) task >> Destination not written because compiled files were empty. ! Running "jst:compile" (jst) task File "generated/template/underscore.js" created. ! Running "concat:js" (concat) task File "generated/js/app-78512a8e6fcb4e70b8e2694693651800.js" created. ! Running "concat:spec" (concat) task File "generated/js/spec.js" created. ! Running "concat:css" (concat) task File "generated/css/app-f7a1da849888d2c913a5374c7dc0cbbe.css" created. ! Running "images:dev" (images) task Copying images to 'generated/img' ! Running "webfonts:dev" (webfonts) task Copying webfonts to 'generated/webfonts' ! Running "pages:dev" (pages) task generated/index.html generated from app/pages/index.us ! Running "dist" task ! Running "uglify:js" (uglify) task File "dist/js/app-78512a8e6fcb4e70b8e2694693651800.js" created. ! Running "cssmin:compress" (cssmin) task File dist/css/app-f7a1da849888d2c913a5374c7dc0cbbe.css created. ! Running "images:dist" (images) task Copying images to 'dist/img' ! Running "webfonts:dist" (webfonts) task Copying webfonts to 'dist/webfonts' ! Running "pages:dist" (pages) task dist/index.html generated from app/pages/index.us ! Done, without errors.

Building The rug $ tree dist ! dist ├── css
│ └── app.css ├── favicon.ico ├── index.html └── js └── app.js

Deployment The rug $ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

Deployment The rug $ cat .buildpacks https://github.com/heroku/heroku-buildpack-ruby https://github.com/testdouble/heroku-buildpack-lineman

Deployment The rug $ git push heroku master

Gotchas The rug

Going against the grain The rug

Handlebars The rug

Documentation The rug

Stack Overflow The rug

Thanks, Jim

Questions?

Why Ember and not *?

A Tale of Two Apps

A Tale of Two Apps

More Decks by Jamie Wright

Other Decks in Programming

Featured

Transcript