The role of controllers in our context will be to orchestrate the pages. In other words, they will act as page wrappers that manage the processes that happen between subcomponents. The content of the controllers/Home.js file is as follows:

module.exports = Ractive.extend({
  template: require('../../tpl/home'),
  components: {
    navigation: require('../views/Navigation'),
    appfooter: require('../views/Footer')
  },
  onrender: function() {
    console.log('Home page rendered');
  }
});

Before you go through the properties of the template and components, we have to say a few words about onrender. The Ractive.js components provide an interface to define handlers for processes that happen internally at each stage of the component's life cycle. For example, we will need to perform some actions almost every time after the component is rendered on the page. Also, there are onconstruct, onteardown, or onupdate. This is surely a nice way to implement business logic. All...