Skip to content

Instantly share code, notes, and snippets.

@jrf0110
Forked from prestonp/incremental.md
Last active August 29, 2015 14:20

Revisions

  1. jrf0110 revised this gist Apr 29, 2015. 1 changed file with 21 additions and 1 deletion.
    22 changes: 21 additions & 1 deletion server.js
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,28 @@ var router = {
    '/progressive': function(req, res) {
    res.statusCode = 200;
    res.setHeader("Content-Type", "text/html");
    res.write('<html><head><script src="//code.jquery.com/jquery-1.11.2.min.js"></script></head><body><h1>Hello world</h1>');
    res.write([
    '<html>'
    , ' <head>'
    , ' <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>'
    , ' <style type="text/css">'
    , ' html, body {'
    , ' background: red;'
    , ' font-family: sans-serif;'
    , ' }'
    , ' </style>'
    , ' </head>'
    , ' <body>'
    , ' <h1>Hello world</h1>'
    ].join('\n'));
    setTimeout(res.write.bind(res, '<h1>blah</h1>'), 5000);
    setTimeout(res.write.bind(res, [
    '<style type="text/css">'
    , ' html, body {'
    , ' background: blue;'
    , ' }'
    , '</style>'
    ].join('\n')), 8000);
    setTimeout(res.write.bind(res, '<h1>blah</h2>'), 10000);
    setTimeout(res.write.bind(res, '</body></html>'), 15000);
    setTimeout(res.end.bind(res), 20000);
  2. @prestonp prestonp revised this gist Apr 29, 2015. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions server.js
    Original file line number Diff line number Diff line change
    @@ -7,14 +7,14 @@ var log = function(req) {
    };

    var router = {
    '/incremental': function(req, res) {
    '/progressive': function(req, res) {
    res.statusCode = 200;
    res.setHeader("Content-Type", "text/html");
    res.write('one<br>');
    setTimeout(res.write.bind(res, 'two<br>'), 1000);
    setTimeout(res.write.bind(res, 'three<br>'), 2000);
    setTimeout(res.write.bind(res, 'four<br>'), 3000);
    setTimeout(res.end.bind(res), 4000);
    res.write('<html><head><script src="//code.jquery.com/jquery-1.11.2.min.js"></script></head><body><h1>Hello world</h1>');
    setTimeout(res.write.bind(res, '<h1>blah</h1>'), 5000);
    setTimeout(res.write.bind(res, '<h1>blah</h2>'), 10000);
    setTimeout(res.write.bind(res, '</body></html>'), 15000);
    setTimeout(res.end.bind(res), 20000);
    },

    '/blocking': function(req, res) {
    @@ -24,7 +24,7 @@ var router = {
    res.write('one<br>two<br>three<br>four<br>');
    res.end();
    }, 4000);
    }
    }
    };

    var route = function(req, res) {
  3. @prestonp prestonp revised this gist Apr 24, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions incremental.md
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    In many websites, there are static portions of the page such as the navigation or header that rarely change. If we could
    deliver the markup for navigation, the experience would feel a bit snappier while the rest of the page is generated.

    Try running this snippet in node and visit localhost:3000/incremental and localhost:3000/blocking.
    These are pretty trivial examples but we could cache and immediately send the nagivation bar and `<head>` elements.
    Try running this snippet in node and visit `localhost:3000/incremental` and `localhost:3000/blocking`.
    These are pretty trivial examples but we could cache and immediately send the nagivation bar and `<head>` elements for every request.
  4. @prestonp prestonp created this gist Apr 24, 2015.
    5 changes: 5 additions & 0 deletions incremental.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    In many websites, there are static portions of the page such as the navigation or header that rarely change. If we could
    deliver the markup for navigation, the experience would feel a bit snappier while the rest of the page is generated.

    Try running this snippet in node and visit localhost:3000/incremental and localhost:3000/blocking.
    These are pretty trivial examples but we could cache and immediately send the nagivation bar and `<head>` elements.
    45 changes: 45 additions & 0 deletions server.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    var http = require('http');
    var port = process.env.port || 3000;
    var server = http.createServer();

    var log = function(req) {
    console.log(req.method + ' ' + req.url);
    };

    var router = {
    '/incremental': function(req, res) {
    res.statusCode = 200;
    res.setHeader("Content-Type", "text/html");
    res.write('one<br>');
    setTimeout(res.write.bind(res, 'two<br>'), 1000);
    setTimeout(res.write.bind(res, 'three<br>'), 2000);
    setTimeout(res.write.bind(res, 'four<br>'), 3000);
    setTimeout(res.end.bind(res), 4000);
    },

    '/blocking': function(req, res) {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html');
    setTimeout(function() {
    res.write('one<br>two<br>three<br>four<br>');
    res.end();
    }, 4000);
    }
    };

    var route = function(req, res) {
    log(req);
    if (req.url in router) {
    router[req.url].call(router, req, res);
    } else {
    res.write('Could not find route ' + req.url);
    res.statusCode = 404;
    res.end();
    }
    };

    server.on('request', route);

    server.listen(port, function() {
    console.log('listening on port', port);
    });