Mbrace

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

Notice!

This project is under development and is not 100% ready for production.

Features

• Includes
• JSON object for dummy data
• Loops
• Global and local variables

Planned features

• Conditional Expressions

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! :)