Created
December 16, 2014 12:17
-
-
Save balupton/46b568fe66ea55133291 to your computer and use it in GitHub Desktop.
Steams-based Static Site Generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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