MontageJS - HTML5 framework

Why MontageJS?

MontageJS is a modern, full stack HTML5 framework designed to create single-page applications—fast! MontageJS uses time-tested design patterns and software principles, allowing you to easily create a modular architecture for your projects and help deliver a high-quality user experience. This allows designers and developers to work collaboratively and quickly.

Reusable Components

MontageJS simplifies rich-client development by offering a modular approach to organizing code and components: Small teams can build applications faster through maximum reusability and larger teams can be more efficient by breaking complex problems into smaller units without stepping on each other during the development process.

High Performance

MontageJS supports implicit event delegation and a managed draw cycle. This minimizes expensive layout reflows to provide a better user experience, particularly on hardware-limited mobile devices.

Logicless, Declarative HTML5 Templates

MontageJS templates are real, valid, full HTML5 documents. These HTML templates encapsulate a component's JavaScript code as well as resources like CSS files and images into a folder with "reel" file extension. Developers can instantiate a component without having to worry about what JavaScript dependencies that component has, nor what CSS or other files it may rely on. This leads to dramatic improvements in reliability and ease of use.

Functional Reactive Bindings (FRB)

MontageJS supports simple and two-way data binding between components, objects, and collections, allowing you to coordinate the state between views and models, among other entangled objects. FRB go farther and can gracefully bind long property paths and the contents of collections, as well as incrementally update the results of chains of queries including maps, flattened arrays, sums, and averages. FRB makes it easy to ensure consistent state without having to write a lot of "glue" code.

A Simple Example

MontageJS components are modular and reusable, and cleanly separate the concerns of structure, style, and behavior. The following, simple example is a component that consists of two prebuilt MontageJS components (Slider and Text) bound together.

HTML: Clean and easy-to-read markup; no messy template syntax or constructs; no logic; the DOM elements whose behavior you want to control use the data-montage-id custom data attribute, which is required to initialize the markup using the serialized objects.

JSON Serialization: This is where you define the behavior of your markup; all UI-related JavaScript objects reside in the template-like components that control the behavior of their corresponding DOM elements.