Again, the views are Ractive.js components. They have their own templates. In fact, the Home.js module can also be called a view. The Model-View-Controller pattern in the browser is often transformed, and it does not follow the exact definitions. This is the case with our application because we are using a framework that has some rules and which provides specific functionalities that do not align with the typical MVC. Of course, there is nothing wrong with this. As long as we separate the responsibilities, our architecture will be in good shape.

The navigation view is fairly simple. It just defines the template that needs rendering:

// views/navigation.js
module.exports = Ractive.extend({
  template: require('../../tpl/navigation')
});

In order to make things more interesting and introduce the model's definition, we will display a version number in the footer. This number will come from a model created in models/Version.js. Here is the code of the views/Footer.js file:

var...