While we were constructing the Gulp setup, we created a task for JavaScript bundling. Browserify needs an entry point to resolve dependencies. We set frontend/js/app.js. Similarly, for the backend, we will build our logic around the router. The following code sets two routes and provides a helper function to render the Ractive.js component on the page:
// frontend/js/app.js
var Router = require('./lib/Router')();
var Home = require('./controllers/Home');
var currentPage;
var body;
var showPage = function(newPage) {
if(currentPage) { currentPage.teardown(); }
currentPage = newPage;
body.innerHTML = '';
currentPage.render(body);
}
window.onload = function() {
body = document.querySelector('body');
Router
.add('home', function() {
var p = new Home();
showPage(p);
})
.add(function() {
Router.navigate('home');
})
.listen()
.check();
}We require the Router variable at the top. Along with this, we need to fetch...