Create a gist now

Instantly share code, notes, and snippets.

Steams-based Static Site Generator
var Stream = require('stream').extend({
// arguments[i].pipe(this)
drink: function(){
var me = this
Array.prototype.slice.call(arguments).forEach(function(stream){
stream.pipe(me)
})
return this
},
// this.pipe(arguments[i])
pee: function(){
var me = this
Array.prototype.slice.call(arguments).forEach(function(stream){
me.pipe(stream)
})
return this
}
})
// Backend
new DatabaseStream()
.drink(
new TumblrStream({blog: 'balupton'}),
new MediumStream({blog: 'balupton'})
)
.pee(
new QueryStream({type:'post'})
.pipe(new ReactRendererStream({template:'./templates/post.jsx'}))
.pipe(new FSWriteStream('./out/posts')),
new QueryStream({type:'image'})
.pipe(new ReactRendererStream({template:'./templates/image.jsx'}))
.pipe(new FSWriteStream('./out/images'))
)
// Frontend
new DatabaseStream()
.drink(
new JSONStream({endpoint: '/public.json'})
)
.pee(
new QueryStream({type:'post'})
.pipe(new ReactRendererStream({template:'./templates/post.jsx'}))
/* now render to the dom somehow */,
new QueryStream({type:'image'})
.pipe(new ReactRendererStream({template:'./templates/image.jsx'}))
/* now render to the dom somehow */
)
// Hrmm... I think we may actually be writing websites wrong.
// The backend example is great for static site generation of an entire website
// But it doesn't scale for client-side web development. We don't need the entire website consumed to render a few pages.
// Instead of a downstream backend-down-to-frontend waterfall model, instead we need an upstream frontend-requests-the-backend model.
// We should start with our templates, then inject data into it.
// This is actually how DocPad works. It's why DocPad works so well.
// Code your UI first, use fake data, then start injecting better data into it.
// Perhaps we just need DocPad updated for React, and allow partial rendering via a better API.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment