Rendr: SF Node.js Meetup presentation April 30, 2013

2,835 views

Published on

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/

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,835
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
51
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Rendr: SF Node.js Meetup presentation April 30, 2013

  1. 1. Rendr: Bacbone.js onthe client and sererSpike Brehm@spikebrehmSF Node.js MeetupApril 30, 2013
  2. 2. 2008
  3. 3. 2013
  4. 4. Exciting times inthe world of webapps.<your framework here>
  5. 5. Client-side MVCClientSererYour app API
  6. 6. +
  7. 7. Poor SEO; not crawlablePerformance hit todownload and parse JSDuplicated applicationlogicContext switching
  8. 8. Client-side MVCDownloadskeletonHTMLFetch datafrom APIUser seescontentDownloadJavaScriptEvaluateJavaScriptExacerbated on mobile:high latency, lowbandwidth
  9. 9. It’s still a PITA to buildfast, maintainablerich-client apps.
  10. 10. Wat if our app couldrun on the client andthe serer?
  11. 11. Client + serer MVCClientSererYour app API
  12. 12. Provides SEOInitial pageload isdrastically fasterConsolidated applicationlogic
  13. 13. EvaluateJavaScriptClient + serer MVCDownloadfullHTMLUser seescontentDownloadJavaScript
  14. 14. Has anyone alreadydone this?
  15. 15. Meteor: client/serer, but noserer-side rendering; owns datalayerDerby: client+serer rendering,but owns data layerMojito: client+serer rendering,but full stack, and... I.
  16. 16. Okay...how hard can it be?
  17. 17. +
  18. 18. +
  19. 19. +
  20. 20. Rendr.
  21. 21. JavaScript MVC on client & serverBackbone & HandlebarsBaseView, BaseModel, BaseCollection,BaseApp, ClientRouter, ServerRouter...Express middlewareMinimal glue between client & serverWat it is.
  22. 22. Batteries-included web frameworkFinishedWat it ain’t.
  23. 23. Write application logic agnostic toenvironment.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.
  24. 24. Classes:- BaseApp < Backbone.Model- BaseModel < Backbone.Model- BaseCollection < Backbone.Collection- BaseView < Backbone.View- AppView < BaseView- ClientRouter < BaseRouter- ServerRouter < BaseRouter- ModelStore < MemoryStore- CollectionStore < MemoryStore- Fetcher
  25. 25. |- client/|- shared/|- server/Rendr directory structureSent to client}
  26. 26. |- app/|- public/|- server/App directory structure
  27. 27. |- app/|--- collections/|--- controllers/|--- models/|--- templates/|--- views/|--- app.js|--- router.js|--- routes.js|- public/|- server/App directory structureEntire app dirgets sent toclient}
  28. 28. var User = require(‘app/models/user’);var BaseView = require(‘rendr/shared/base/view’);CommonJS using StitchOn the server:On the client:var User = require(‘app/models/user’);var BaseView = require(‘rendr/shared/base/view’);
  29. 29. Demogithub.com/airbnb/rendr-app-template
  30. 30. Render lifecycle,serer.
  31. 31. • On server startup, parse routes file and mount asExpress routes• GET /users/1337• Router matches "/users/:id" to "users#show" withparams = {"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 useUsersShowView view class• Router instantiates new UsersShowView with data• Router calls view.getHtml()• Hands HTML to Express, which decorates with layoutand serves response
  32. 32. Render lifecycle,client.
  33. 33. • On page load, Router parses routes file and mountsBackbone routes• pushState /users/1337• Router matches "/users/:id" to "users#show" withparams = {"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 useUsersShowView view class• Router instantiates new UsersShowView with data• Router calls view.render()• Insert into DOM
  34. 34. • On page load, Router parses routes file and mountsBackbone routes• pushState /users/1337• Router matches "/users/:id" to "users#show" withparams = {"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 useUsersShowView view class• Router instantiates new UsersShowView with data• Router calls view.render()• Insert into DOM
  35. 35. • On page load, Router parses routes file and mountsBackbone routes• pushState /users/1337• Router matches "/users/:id" to "users#show" withparams = {"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 useUsersShowView view class• Router instantiates new UsersShowView with data• Router calls view.render()• Insert into DOM
  36. 36. v0.4.0: CoffeeScript -> JavaScriptAlmost done abstracting out Handlebars,supporting other templating languagesExample app with session handlingRecentdevelopments.
  37. 37. Share routing logic between client &server.Lazy load views, templates, etc asneeded.Break down into smaller modules.Much more...TODO.
  38. 38. Find the right set of primitives andabstractions for isomorphic JavaScriptappsCatalyze an isomorphic JavaScriptmovement within the communityCatalog the various approachesProject goals.
  39. 39. Hack with us.github.com/airbnb/rendr
  40. 40. @rendrjs@AirbnbNerds@spikebrehmThanks!

×