The Future of Web Applications
const me = {
name: 'Cristian Moreno',
title: 'FullStack Javascript Developer',
work: '@wolrd',
org: 'Avanet',
twitter: '@khriztianmoreno',
website: 'http://khriztianmoreno.com/'
};
Lot of stuff to do before even showing the content:
Can destroy the usability on the
weaker clients (mobiles, tablets, etc.)
Download
skeleton HTML
Download
Javascript
Evaluate
Javascript
Fetch data from API
User sees content
All content is generated in JavaScript, so it's invisible to the search engines *
Over complicated hacks needed to fix this issue:
Code duplication
Popularized by AirBnB in 2013 to describe shared JavaScript that runs on both the client and the server.
Isomorphic JavaScript apps are JavaScript applications that can run both client-side and server-side. The backend and frontend share the same code.
let posts = [{
id: 1,
title: 'Javascript is cool'
}, {
id: 1,
title: 'The web is the platform'
}];
_.pluck(posts, 'title');
// ['Javascript is cool', 'The web is the platform' ]
Example: Undescore.js
or server specific properties
Does not depend on browser specific properties
(windows)
(process.env, req.cookies)
let template =
'<ul>' \
'{{#each posts }}' \
'<li>{{title}}</li>' \
'{{/each}}' \
'</ul>';
let templateFn = Handlebars.compile(template),
html = templateFn({posts: posts});
// <ul>
// <li>Javascript is cool</li>
// <li>The web is the platform</li>
// </ul>
Example: Handlebars.js
Templating
Routing
i18n
Date & currency formatting
Model validation
Api interaction
…?
Underscore.js
Handlebars.js
Moment
Meteor.js
React.js
Polyglot.js (i18n)
TODAY'S:
THIN-SERVER, THIN-CLIENT
SHARED
1. Staying DRY (Don’t-Repeat-Yourself) using the same code base improves code maintenance
2. Servers Side Rendering of single Pages Applications (very critical to the business)
Models
Models
i18n - i10n
i18n - i10n
View Logic
Routing Controllers
Routing Controllers
Fetching
Views
View Logic
Fetching
Views
Client
Server
Models
i18n - i10n
View
Logic
Routing
Controllers
Fetching
Views
Client
Server
Models
View
Logic
i18n - i10n
Routing
Controllers
Fetching
Logic-less
Templates
Models
i18n - i10n
View
Logic
Routing
Controllers
Fetching
Views
Client
Server
Models
i18n - i10n
Routing
Controllers
Fetching
Models
i18n - i10n
View
Logic
Routing
Controllers
Fetching
Views
Client
Server
Models
Routing
Controllers
Fetching
Models
i18n - i10n
View
Logic
Routing
Controllers
Fetching
Views
Client/Server
Download
FULL
HTML
Download
Javascript
Evaluate
Javascript
User sees content
Rendering Flow
Timeline
JavaScript rendered on the server and the client
Browserify
Grunt/gulp
Webpack
let handlebars = require('handlebars');
module.exports = function(templatePath, data) {
let templateFn = require('./views/' + templatePath),
html = templateFn(data);
return html;
};
// app/template_renderer.js
let moment = require('moment');
moment().format('MMMM Do YYYY, h:mm:ss a'); // June 14th 2016, 11:10:20 pm
Server (node.js)
<script src="moment.js"></script>
<script>
moment().format('MMMM Do YYYY, h:mm:ss a'); // June 14th 2016, 11:10:20 pm
</script>
Client
// Isomorphic Tutorial
https://github.com/spikebrehm/isomorphic-tutorial
// Isomorphic React Example
https://github.com/DavidWells/isomorphic-react-example
// Isomorphic React in real life
https://reactjsnews.com/isomorphic-react-in-real-life