The presentation @spikebrehm gave for the SF Node.js meetup group April 30 2013. http://www.meetup.com/Node-js-Serverside-Javascripters-Club-SF/events/114998792/

1. Rendr: Bacbone.js on
the client and serer
Spike Brehm
@spikebrehm
SF Node.js Meetup
April 30, 2013

2. 2008

4. 2013

6. Exciting times in
the world of web
apps.
<your framework here>

7. Client-side MVC
Client
Serer
Your app API

9. +

10. Poor SEO; not crawlable
Performance hit to
download and parse JS
Duplicated application
logic
Context switching

11. Client-side MVC
Download
skeleton
HTML
Fetch data
from API
User sees
content
Download
JavaScript
Evaluate
JavaScript
Exacerbated on mobile:
high latency, low
bandwidth

12. It’s still a PITA to build
fast, maintainable
rich-client apps.

13. Wat if our app could
run on the client and
the serer?

14. Client + serer MVC
Client
Serer
Your app API

15. Provides SEO
Initial pageload is
drastically faster
Consolidated application
logic

16. Evaluate
JavaScript
Client + serer MVC
Download
full
HTML
User sees
content
Download
JavaScript

17. Has anyone already
done this?

18. Meteor: client/serer, but no
serer-side rendering; owns data
layer
Derby: client+serer rendering,
but owns data layer
Mojito: client+serer rendering,
but full stack, and... I.

19. Okay...
how hard can it be?

20. +

21. +

22. +

23. Rendr.

24. JavaScript MVC on client & server
Backbone & Handlebars
BaseView, BaseModel, BaseCollection,
BaseApp, ClientRouter, ServerRouter...
Express middleware
Minimal glue between client & server
Wat it is.

25. Batteries-included web framework
Finished
Wat it ain’t.

26. Write application logic agnostic to
environment.
Library, not a framework.
Minimize if (server) {...} else {...}.
Hide complexity in library.
Talk to RESTful API.
No server-side DOM.
Simple Express middleware.
Design goals.

27. Classes:
- BaseApp < Backbone.Model
- BaseModel < Backbone.Model
- BaseCollection < Backbone.Collection
- BaseView < Backbone.View
- AppView < BaseView
- ClientRouter < BaseRouter
- ServerRouter < BaseRouter
- ModelStore < MemoryStore
- CollectionStore < MemoryStore
- Fetcher

28. |- client/
|- shared/
|- server/
Rendr directory structure
Sent to client}

29. |- app/
|- public/
|- server/
App directory structure

30. |- app/
|--- collections/
|--- controllers/
|--- models/
|--- templates/
|--- views/
|--- app.js
|--- router.js
|--- routes.js
|- public/
|- server/
App directory structure
Entire app dir
gets sent to
client
}

31. var User = require(‘app/models/user’);
var BaseView = require(‘rendr/shared/base/view’);
CommonJS using Stitch
On the server:
On the client:
var User = require(‘app/models/user’);
var BaseView = require(‘rendr/shared/base/view’);

32. Demo
github.com/airbnb/rendr-app-template

33. Render lifecycle,
serer.

34. • 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

35. Render lifecycle,
client.

36. • 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

37. • 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

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. v0.4.0: CoffeeScript -> JavaScript
Almost done abstracting out Handlebars,
supporting other templating languages
Example app with session handling
Recent
developments.

40. Share routing logic between client &
server.
Lazy load views, templates, etc as
needed.
Break down into smaller modules.
Much more...
TODO.

41. Find the right set of primitives and
abstractions for isomorphic JavaScript
apps
Catalyze an isomorphic JavaScript
movement within the community
Catalog the various approaches
Project goals.

42. Hack with us.
github.com/airbnb/rendr

43. @rendrjs
@AirbnbNerds
@spikebrehm
Thanks!