16. Meteor: client/server, but no
server-side rendering; owns data
layer
Derby: client+server rendering,
but owns data layer
Mojito: client+server rendering,
but full stack, and... YUI.
23. What it is.
JavaScript MVC on client & server
Backbone & Handlebars
BaseView, BaseModel,
BaseCollection, BaseApp,
ClientRouter, ServerRouter...
Express middleware
Minimal glue between client & server
31. CommonJS using Stitch
On the server:
var User = require(‘app/models/user’);
var BaseView = require(‘rendr/shared/base/view’);
On the client:
var User = require(‘app/models/user’);
var BaseView = require(‘rendr/shared/base/view’);
36. • On server startup, parse routes file and mount as
Express routes
• GET /users/1337
• Router matches "/users/:id" to "users#show" with
params = {"id": 1337}
• Router finds controller:
require("app/controllers/users_controller")
• Router executes show action with params = {"id": 1337}
• The show action says to fetch User#1337 and use
UsersShowView view class
• Router instantiates new UsersShowView with data
• Router calls view.getHtml()
• Hands HTML to Express, which decorates with layout
and serves response
38. • On page load, Router parses routes file and mounts
Backbone routes
• pushState /users/1337
• Router matches "/users/:id" to "users#show" with
params = {"id": 1337}
• Router finds controller:
require("app/controllers/users_controller")
• Router executes show action with params = {"id": 1337}
• The show action says to fetch User#1337 and use
UsersShowView view class
• Router instantiates new UsersShowView with data
• Router calls view.render()
• Insert into DOM
39. • On page load, Router parses routes file and mounts
Backbone routes
• pushState /users/1337
• Router matches "/users/:id" to "users#show" with
params = {"id": 1337}
• Router finds controller:
require("app/controllers/users_controller")
• Router executes show action with params = {"id": 1337}
• The show action says to fetch User#1337 and use
UsersShowView view class
• Router instantiates new UsersShowView with data
• Router calls view.render()
• Insert into DOM
40. • On page load, Router parses routes file and mounts
Backbone routes
• pushState /users/1337
• Router matches "/users/:id" to "users#show" with
params = {"id": 1337}
• Router finds controller:
require("app/controllers/users_controller")
• Router executes show action with params = {"id": 1337}
• The show action says to fetch User#1337 and use
UsersShowView view class
• Router instantiates new UsersShowView with data
• Router calls view.render()
• Insert into DOM
71. 1. Find DOM els with data-view attribute.
var viewEls = $("[data-view]");
72. 2. Determine model or collection based on
data-model_name, data-model_id, etc.
var modelName = viewEl.data(‘model_name’),
modelId = viewEl.data(‘model_id’);
console.log(modelName, modelId);
=> “user” 1337
73. 3. Fetch model/collection data from
ModelStore/CollectionStore.
var model = modelStore.get(modelName,
modelId);
80. TODO
• Share routing logic between client &
server.
• Lazy load views, templates, etc as needed.
• Support other templating languages.
• Break down into smaller modules.
• Rewrite in vanilla JavaScript.
• much more...