• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rendr: SF Node.js Meetup presentation April 30, 2013
 

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

on

  • 2,325 views

The presentation @spikebrehm gave for the SF Node.js meetup group April 30 2013.

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/

Statistics

Views

Total Views
2,325
Views on SlideShare
2,260
Embed Views
65

Actions

Likes
4
Downloads
34
Comments
0

5 Embeds 65

http://www.scoop.it 35
https://twitter.com 14
http://www.pinterest.com 9
http://pinterest.com 6
https://www.rebelmouse.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 mobile:high latency, lowbandwidth
    • 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: client+serer rendering,but full stack, and... I.
    • Okay...how hard can it be?
    • +
    • +
    • +
    • Rendr.
    • JavaScript MVC on client & serverBackbone & HandlebarsBaseView, BaseModel, BaseCollection,BaseApp, ClientRouter, ServerRouter...Express middlewareMinimal glue between client & serverWat it is.
    • Batteries-included web frameworkFinishedWat it ain’t.
    • 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.
    • Classes:- BaseApp < Backbone.Model- BaseModel < Backbone.Model- BaseCollection < Backbone.Collection- BaseView < Backbone.View- AppView < BaseView- ClientRouter < BaseRouter- ServerRouter < BaseRouter- ModelStore < MemoryStore- CollectionStore < MemoryStore- Fetcher
    • |- 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|- public/|- server/App directory structureEntire app dirgets sent toclient}
    • 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’);
    • 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#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
    • Render lifecycle,client.
    • • 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
    • • 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
    • • 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
    • v0.4.0: CoffeeScript -> JavaScriptAlmost done abstracting out Handlebars,supporting other templating languagesExample app with session handlingRecentdevelopments.
    • Share routing logic between client &server.Lazy load views, templates, etc asneeded.Break down into smaller modules.Much more...TODO.
    • Find the right set of primitives andabstractions for isomorphic JavaScriptappsCatalyze an isomorphic JavaScriptmovement within the communityCatalog the various approachesProject goals.
    • Hack with us.github.com/airbnb/rendr
    • @rendrjs@AirbnbNerds@spikebrehmThanks!