This is a modular micro-MVC single-page web app serving Bootstrap components through Handlebars with Require (via ExpressJS). A minimal stack that renders a "living template" of Bootstrap GUI widgets (components) using the HandlebarsJS template system. All thanks to RequireJS.
I wanted to find a way to load Bootstrap templates using Handlebars, ideally doing so with RequireJS. These solutions all seemed to incorporate Backbone or some other off-the-shelf MVC/P framework. I wanted to do all that, but without using a third-party MVC framework. It took a few hours, but I was finally able to implement that formula using a RequireJS Handlebars plugin authored by Jean-Francois Paradis.
The modular micro-MVC ("3MVC") is a custom-built single-page web app. It is based on the collection of views of the app, abstract data models, and controllers to mediate the relationship between them.
Each view has a Handlebars template and JavaScript modules for its controller, view, and data.
This guide assumes you can use Git and NodeJS (w/ npm) from the command-line.
-
Clone the project
$ git clone https://github.com/quantumtom/ash -
Navigate to the new directory
$ cd ash -
Update npm
$ npm update -g npm -
Install project dependencies
$ npm install
Run the default grunt task, $ grunt.
Run the ExpressJS server, $ node serve.js. Or just $ npm start.
Then you can visit your local instance at http://localhost:5000 (or http://127.0.0.1:5000).
-
RequireJS RequireJS is my loader of choice. Dependency management -- say no more, right? Enforces code modularity in a file-based tree hierarchy. v. 2.1.8is included in this project's JavaScript library.
-
jQuery jQuery is the modern foundation of an extensive family of plug-ins, libraries, and extensions. It's a hard depdendency for Bootstrap. Loading it with RequireJS can be a bit tricky.
-
Twitter Bootstrap Twitter Bootstrap is a fantastic UI library that integrates nicely with jQuery.
-
Handlebars Based on Mustache, Handlebars is my HTML template system of choice. Works well in both client and server capacities.
A few extra toys are included just for fun. Grunt is currently configured to run JSHint tests against the 41 original JavaScript files in the "3MVC" (see below).
-
Grunt The Grunt task runner is an indespensible tool for test and building from source files.
-
JSHint Adjusting the configuration for JSHint. See the .jshintrc for more info.
I owe deep thanks to Jonathan Verrecchia. Verecchia authored a tutorial on implementing a minimalist MVC using AMD through RequireJS. His guide should be considered indispensible to anyone implementing a MVC pattern in JavasScript.
I configured Bootstrap to load widgets using CSS themes from Bootswatch.
2016-02-12 - Rename project due to popular demand.
2016-02-12 - Update dependencies and logos.
2016-02-12 - Fix Grunt task for JSHint.
2016-02-12 - Update documentation.
2016-02-17 - Fix alignment in Grunt task
2016-02-18 - Change README.md.
2016-02-19 - Add cache control Grunt task.
2016-03-02 - Add Bootlint testing.
2016-03-12 - Add Grunt task for CSS lint.
2016-03-13 - Add GZip compression for Node/ExpressJS.
2016-03-16 - Add JSDoc support.
2016-03-17 - Add deploy branch.