how node.js beat seo

assumption

javascriptisbad

sharecode

serverside

// /hotels/:id
function run ( id ) {
    var Hotel = Backbone.Model.extend( { urlRoot : "/hotels" } );
    var hotel = new Hotel( { id: id } );

    hotel.on( "change", function ( hotel ) {
        $el.html(
            Templates[ "hotel" ]( hotel ) );
    });

    hotel.fetch();
}
// /hotels/:id
function run ( id ) {
    var Hotel = Backbone.Model.extend( { urlRoot : "/hotels" } );
    var hotel = new Hotel( { id: id } );
    hotel.on( "change", function ( hotel ) {
    $el.html(
        Templates[ "hotel" ]( hotel ) );
    });
    hotel.fetch();
}
server.get( "/hotels/:id", ( req ) => run( req.params.id ) );

backbonemodel

dependencyinjection

run( id, Backbone );
$el.html()

semantics don't matter

<script> 
console.log( "asdf" );
</script>

<div> 
console.log( "asdf" );
</div>

fb55/htmlparser2

+ jQuery interface

run( id, Backbone, $( "div" ) );
Templates[ "hotel" ]( hotel );

compilestep

var Templates = {
    "hotel": Handlebars.template( require( "./hotel.html" ) )
};
run( id, Backbone, $( "div" ), Templates );
hotel.fetch()

noxhr

backbonesync

Backbone.sync = function ( method, model ) {
    if ( method == "read" ) {
        request( model.url(), /* ... */ );
    }
    /* ... */
};

app

function run ( id, Backbone, $el, Templates ) {
    var Hotel = Backbone.Model.extend( { urlRoot : "/hotels" } );
    var hotel = new Hotel( { id: id } );

    hotel.on( "change", function ( hotel ) {
        $el.html(
            Templates[ "hotel" ]( hotel ) );
    });

    hotel.fetch();
}

oneresponse

done();

app

function run ( id, Backbone, $el, Templates, done ) {
    var Hotel = Backbone.Model.extend( { urlRoot : "/hotels" } );
    var hotel = new Hotel( { id: id } );

    hotel.on( "change", function ( hotel ) {
        $el.html(
            Templates[ "hotel" ]( hotel ) );
        done();
    }

    hotel.fetch();
}

server

var Backbone = require( "backbone" );
var $ = require( "tready-dom" );
var Handlebars = require( "handlebars" );
var Templates = { "hotel": Handlebars.template( require( "./hotel.html" ) ) };

server.get( "/hotels/:id", 
    function ( req, res, next ) {
        req.mnug.$el = $( "div" );
        run( req.params.id, Backbone, req.mnug.$el, Templates, next ) );
    }, function ( req, res ) {
        res.send( req.mnug.$el.html() );
    }
);

server.listen( 80 );

app

module.exports = function ( sandbox ) {

    var Hotel = sandbox.mvc.Model.extend( { urlRoot : "/hotels" } );

    return sandbox.mvc.App.extend( {

        $el: sandbox.context.element,

        constructor: function () {
            this.hotel = new Hotel();
            this.hotel.on( "change", render, this );
        },

        render: function ( hotel ) {
            this.$el.html( sandbox.templates.render( "hotel", hotel ) );
            this.trigger( "ready" );
        },

        run: function ( params ) {
            this.hotel.set( { id: params.id }, { silent: true } );
            this.hotel.fetch();
        }
    });
};

routes.js

module.exports = {
    "/hotels/:id": {
        outlet: "./templates/hotel-index.html",
        apps: [ { name: "hotel-app" } ]
    }
};

hotel-index.html

{{app "hotel-app"}}

triggerready

tready

tready.js

questions