Posted by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Jonnie Spratley, who currently works for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products, and teaches a variety of programming courses at AcademyX. Check out his earlier AngularJS Directives: Using HTML5 Web Speech post.

Building modular single page applications that are scalable has always been a nontrivial task, but with proper tooling, achieving this is a lot easier than you think.

A new framework called ColtJS allows the easy development of JavaScript applications using Asynchronous Module Definition (AMD). It depends upon the highly popular script loader, RequireJS, and aims to be lightweight, flexible and highly efficient.

coltjs-banner

Overview

There are plenty of fully stacked frameworks out there, but ColtJS aims to give a solid, reliable foundation with a minimal footprint. It is easily expandable with utility modules that plug into the system that are only called when and if they are needed.

The framework uses the standard model-view-controller approach, which is great for separating out logic from individual modules and the systems core, but in order to effectively create a modular application, it’s always best to provide a sandbox that the modules can use.

A sandbox allows for changes of libraries or logic to be completed without having to adjust each and every modules implementation of that logic. Think it of as a proxy which handles common tasks that the modules should be able to perform, without actually writing the logic inside of the module. You just add the sandbox core to the dependencies and invoke the methods as you wish. We will discuss this in detail in this post, but first the concept of MVC should be understood.

Model-View-Controller

Generally, in single page applications you use modules that contain a set of functionality controller, logic model, and template view.

The MVC pattern is composed of three core components:

  • Model – Models manage the data for the application – they are not concerned about the user-interface or the controller logic. When a model’s properties change, it will notify its observers, generally a controller that is listening for changes on the model.
  • View – Views are a visual representation of a model, since views need to display data to the user that they are not concerned with controller logic nor model logic. Views usually know little information about the model and/or controller, and they typically get updated by the controller via a render method.
  • Controller – Controllers are usually responsible for doing two things: updating the view via a render when the model changes, and updating the model when the user manipulates the view. Controllers subscribe to model events and then act accordingly when those events fire.
mvc-diagram

Getting Started

Now let’s start to implement in code, a single page application that has a central sandbox that the modules will use to hook into our sample application.

The Application

The following is the directory structure layout, which is pretty self-explanatory:

Note: There is yeoman-coltjs on github that will automatically create this.

1. Index

The following is the index.html page that will be the application’s main view:

2. Bootstrap

The following bootstrap.coffee file is the RequireJS configuration file, which specifies the application’s base URL, libraries, and named references to other modules, and then loads the application at the end (app/scripts/bootstrap.coffee):

3. Sandbox

The sandbox is created so that the application can be framework-agnostic, as well serve as a single entry point. It is composed of commonly used methods for separating out the logic that is usually performed by single page applications (SPAs).

This SPA needs the following:

  • MVC – ColtJS
  • DOM Manipulation – jQuery
  • AJAX – ColtJS
  • Templating – Handlebars
  • Router – ColtJS
  • Promises – jQuery
  • Pub/Sub – ColtJS
  • Utilities – AMD

The application’s sandbox is just a plain AMD module, and it is going to be the base of the application. This is where we define our dependencies using RequireJS. In the define method we pass in a list of sandbox dependencies that our application will need.

The following module sets up a object with named references to commonly used scripts. Instead of calling these scripts directly in the module, you can call on the sandbox that provides access, which is used for a cleaner implementation (app/scripts/sandbox.coffee):

4. App

The following is the application module. This module depends upon the sandbox which holds the core functionality. We define a set of options and pass it to the Sandbox.init method that initializes the application (app/scripts/app.coffee):

5. Utility

The following is a utility module that the other modules can reference to use the functionality. There is a changeColor method that should change the color of the module (app/utilities/some_utility.coffee):

The Module

The following is how we setup the application’s module. This module is a very basic implementation using a model, a view and controller.

1. Model

This is the model definition for the module. It is a very basic model – the underlying framework has a model class that is implemented here (app/models/module.coffee):

2. View

The view is composed of standard HTML with the usage of Handlebars tempting (app/templates/module_1.tpl):

3. Controller

The following is an example of using the sandbox to create a module (app/modules/module_1.coffee):

Other Controller

The following is an example of not using the sandbox to create a module, instead it uses individual libraries as its dependencies. The implementation is not as clean, and there is not a single point of entry with this way (app/modules/module_3.coffee):

Summary

Now that you have the knowledge about how to structure and create a modular AMD application, you can use this as a starting point for development of larger scale applications. There is always ways to improve the application and structure, so it is up to the developer to choose the correct structure and layout when creating single page applications.

Example

You can view a live example over at Plunkr, as well as checkout the generators source code over at github.

coltjs-spa

Be sure to look at the following resources in Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Instant Dependency Management with RequireJS How-to will guide you on how to improve the performance and maintainability of your JavaScript applications with RequireJS. You will learn simple to advanced techniques for converting your JavaScript application to an AMD workflow.
Backbone.js Cookbook contains a series of recipes that provide practical, step-by-step solutions to the problems that may occur during front-end application development using an MVC pattern. You will learn how to build Backbone applications utilizing the power of popular Backbone extensions and integrating your app with different third party libraries. You will also learn how to fulfill the requirements of the most challenging tasks.
The Twitter Flight Edge was written for the curious Javascript developer who learns new libraries by hacking on examples or personal projects. We walk through developing a simple sample application – an RSS reader – using Twitter Flight and supporting libraries. Everything from basic components like tabs to remote data fetching is covered, highlighting the benefits Flight offers for event-driven applications.

About the author

jonnie Jonnie Spratley is currently working for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products. He also teaches a variety of programming courses at AcademyX, and can be reached at @jonniespratley.

Tags: AMD, Asynchronous Module Definition, Bootstrap, ColtJS, controller, Github, Handlebars, Javascript, jQuery, model, Mustache, MVC, plunkr, RequireJS, sandbox, view,

Comments are closed.