Why Everyone is Talking About Isomorphic / Universal JavaScript and Why it Matters

Azat Mardan
Mar 21, 2016 · 9 min read

Quick Overview of Web Development

Ability for Search Engines to Index Pages Properly

Better Code Maintainability

Options: React.js, Lazo.js and Rendr

Rendr

module.exports = function(match) {
match('', 'home#index');
match('repos', 'repos#index');
match('repos/:owner/:name', 'repos#show');
match('users', 'users#index');
match('users/:login', 'users#show');
};
var server = rendr.createServer({
dataAdapterConfig: dataAdapterConfig // Some configurations
});
//...app.use('/', server.expressApp); // Mount Rendr app to the main app

Lazo.js

{
"routes": {
"": { "component": "todos-single" },
"multiple(/)": { "component": "todos-multiple" },
"single(/)": { "component": "todos-single" },
"layout(/)": { "component": "main", "layout": "todos-layout" },
"header(/)": { "component": "header" },
"main(/)": { "component": "main" },
"footer(/)": { "component": "footer" },
"hello(/)": { "component": "hello", "layout": "todos-layout" }
},
"css": ["/app/client/base.css"]
}
define(['lazoBundle'], function (LazoBundle) {...})

React.js

var Header = React.createClass({
render: function(){
return (<h1>Message Board</h1>)
}
})
//...
var React = require('react/addons'),
components = require('./public/js/app.js'),
Header = React.createFactory(components.Header)
//...
app.get('/', function(req, res, next) {
req.messages.find({}, {sort: {_id: -1}}).toArray(function(err, docs){
if (err) return next(err)
res.render('index', {
header: React.renderToString(Header()), props: '<script type="text/javascript">var messages='+JSON.stringify(docs)+'</script>'
})
})
}
{{{props}}}
<div id="header">
{{{header}}}
</div>

Capital One Tech

The low down on our high tech from the engineering experts at Capital One. Learn about the solutions, ideas and stories driving our tech transformation.

Azat Mardan

Written by

Software Engineering Leader | ex-Technology Fellow at Capital One | Author of books

Capital One Tech

The low down on our high tech from the engineering experts at Capital One. Learn about the solutions, ideas and stories driving our tech transformation.