mbrace

A tool for creating modular HTML prototypes or in technical terms –a static Mustache compiler for preprocessing HTML pages.

Usage

On mac and linux

sudo npm install mbrace -g
mbrace input-file.mb output-file.html
mbrace input-path output-path [--watch]

On Windows

npm install mbrace -g
mbrace input-file.mb output-file.html
mbrace input-path output-path [--watch]

Features

• Conditional Expressions (sort of)
• Global and local variables
• Includes
• JSON object for dummy data
• Loops

Background

When developing large websites or web applications we have for a long time worked with static HTML prototypes. These have acted as a test area for the interface but also been responsible for all markup and styles used in the core application. You could think of it as a static copy of the core application that is presented with a unique HTML page for each individual view.

The advantages of having a stand-alone HTML version of the main application are many, to name a few:

• Possibility to address any design issues in an early stage of the development process.
• Opportunity to try out graphical changes and get early feedback from stakeholders without affecting the core application.
• Interface developers can work with the user interface alongside the back-end developers in an isolated enviroment.
• Everything can be done in your favourite text editor.
• Easy translation from prototype HTML to application templates (at least if you are working with a Mustache based application)

Until now we have used SSI (Server Side Includes) as foundation for our prototypes. It has worked fairly well but we have lacked features like loops and smarter handling of variables. SSI also has the disadvantage that it requires a running Apache server, something that prevents any non technically stakeholder to browse the prototype locally. With Mbrace the prototype "build" will only contain raw HTML with relative paths which solves this problem. As a interface developer the workflow will also be much more flexible than before, to name a few improvements:

• Usage of local variables (no need to overwrite global variables anymore).
• Functions like the "loop" for repeating HTML chunks (will save you a lot of copy and paste).
• Global and local JSON objects for storing more or less advanced dummy data.

If you are familiar with Mustache/Handlebars you will feel right at home! :)