Paris Web - October 18, 2014
Senior Software Engineer Front-End at Deezer
yannickcr
yannickc
yannick.cr
PHP
Java
Python
Ruby
Server
Client
JavaScript
Everything is made on server-side
JavaScript is only used for animations and simple interactions
Communication with the server is made with simple HTTP requests (and sometimes with XHR)
API
PHP
Java
Python
Ruby
Server
Client
JavaScript
JavaScript is now an important part of the application.
Both server and client can do routing, templating, and data processing.
API
Client
JavaScript
Everything is made on client-side :
The server is only used to host and serve the static files (CSS, JS, HTML, Fonts)
Lot of stuff to do before even showing the content:
Can destroy the usability on the weaker clients (mobiles, tablets, etc.)
All content is generated in JavaScript, so it's invisible to the search engines *
Over complicated hacks needed to fix this issue:
(Your application if you have any JavaScript error)
API
Server
Client
JavaScript
JavaScript
API
Server
Client
JavaScript
JavaScript
Routing
Templating
Data fetching
Popularized by AirBnB in 2013 to describe shared JavaScript that runs on both the client and the server
Also know as the web app "Holy Grail"
No more code or logic duplication
We can pre-render our page on the server
Coherence between the backend and frontend behavior
var moment = require('moment');
moment().format('MMMM Do YYYY, h:mm:ss a'); // October 11th 2014, 4:47:20 pm
Server (Node.js)
Client
<script src="moment.js"></script>
<script>
</script>
moment().format('MMMM Do YYYY, h:mm:ss a'); // October 11th 2014, 4:47:20 pm
var handlebars = require('handlebars');
module.exports = function(path, data) {
var template = require('./views/' + path);
return template(data);
};
template.js
Bundle your node.js application to use it in the browser.
app.js
var template = require('template.js');
var server = typeof document !== 'undefined'; // Environment detection
var content = template({
title: 'Sample title',
description: 'Sample description
});
// Conditioning environment differences
if (server) {
res.end(content);
} else {
document.body.innerHTML = content
}
Bundle your node.js application to use it in the browser.
> browserify app.js > bundle.js
Bundle your node.js application to use it in the browser.
Developed by AirBnB
Help you to run your Backbone application on the client and the server
All-in-one platform to write JavaScript applications
Developed by Meteor Development Group
Developed by Facebook
The V in MVC
All is about components and states
Made to run on the client, the server or both
The API is the key, build it first
Then bring Node.js on the server
Start with shared libraries + browserify
Jump into a framework