Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Rendr: Bacbone.js onthe client and sererSpike Brehm@spikebrehmSF Node.js MeetupApril 30, 2013
2008
2013
Exciting times inthe world of webapps.<your framework here>
Client-side MVCClientSererYour app API
+
Poor SEO; not crawlablePerformance hit todownload and parse JSDuplicated applicationlogicContext switching
Client-side MVCDownloadskeletonHTMLFetch datafrom APIUser seescontentDownloadJavaScriptEvaluateJavaScriptExacerbated on mo...
It’s still a PITA to buildfast, maintainablerich-client apps.
Wat if our app couldrun on the client andthe serer?
Client + serer MVCClientSererYour app API
Provides SEOInitial pageload isdrastically fasterConsolidated applicationlogic
EvaluateJavaScriptClient + serer MVCDownloadfullHTMLUser seescontentDownloadJavaScript
Has anyone alreadydone this?
Meteor: client/serer, but noserer-side rendering; owns datalayerDerby: client+serer rendering,but owns data layerMojito...
Okay...how hard can it be?
+
+
+
Rendr.
JavaScript MVC on client & serverBackbone & HandlebarsBaseView, BaseModel, BaseCollection,BaseApp, ClientRouter, ServerRou...
Batteries-included web frameworkFinishedWat it ain’t.
Write application logic agnostic toenvironment.Library, not a framework.Minimize if (server) {...} else {...}.Hide complex...
Classes:- BaseApp < Backbone.Model- BaseModel < Backbone.Model- BaseCollection < Backbone.Collection- BaseView < Backbone....
|- client/|- shared/|- server/Rendr directory structureSent to client}
|- app/|- public/|- server/App directory structure
|- app/|--- collections/|--- controllers/|--- models/|--- templates/|--- views/|--- app.js|--- router.js|--- routes.js|- p...
var User = require(‘app/models/user’);var BaseView = require(‘rendr/shared/base/view’);CommonJS using StitchOn the server:...
Demogithub.com/airbnb/rendr-app-template
Render lifecycle,serer.
• On server startup, parse routes file and mount asExpress routes• GET /users/1337• Router matches "/users/:id" to "users#s...
Render lifecycle,client.
• On page load, Router parses routes file and mountsBackbone routes• pushState /users/1337• Router matches "/users/:id" to ...
• On page load, Router parses routes file and mountsBackbone routes• pushState /users/1337• Router matches "/users/:id" to ...
• On page load, Router parses routes file and mountsBackbone routes• pushState /users/1337• Router matches "/users/:id" to ...
v0.4.0: CoffeeScript -> JavaScriptAlmost done abstracting out Handlebars,supporting other templating languagesExample app w...
Share routing logic between client &server.Lazy load views, templates, etc asneeded.Break down into smaller modules.Much m...
Find the right set of primitives andabstractions for isomorphic JavaScriptappsCatalyze an isomorphic JavaScriptmovement wi...
Hack with us.github.com/airbnb/rendr
@rendrjs@AirbnbNerds@spikebrehmThanks!
Rendr: SF Node.js Meetup presentation April 30, 2013
Rendr: SF Node.js Meetup presentation April 30, 2013
Rendr: SF Node.js Meetup presentation April 30, 2013
Prochain SlideShare
Chargement dans…5
×

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

2 927 vues

Publié le

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/

Publié dans : Technologie
  • Soyez le premier à commenter

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!

×