index.html

---
layout: default
title: MontageJS - HTML5 framework
home: true
---

    {% include teaser-home.html %}

    {% include social.html %}
    
    <section id="why" class="why">
        <div class="wrapper">
            <h3 class="title">Why MontageJS?</h3>
            <p>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.</p>
            
            <div class="cols">
                <div class="col col-1-2">
                    <h3 class="sub-title">Reusable Components</h3>
                    <img src="images/home/home-components.svg" alt="Reusable Components">
                    <p>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.</p>
                </div>
                <div class="col col-1-2">
                    <h3 class="sub-title">High Performance</h3>
                    <img src="images/home/home-performance.svg" alt="High Performance">
                    <p>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.</p>
                </div>
            </div>
            
            <div class="cols">
                <div class="col col-1-2">
                    <h3 class="sub-title">Logicless, Declarative HTML5 Templates</h3>
                    <img src="images/home/home-templates.svg" alt="Templates">
                    <p>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.</p>
                </div>
                <div class="col col-1-2">
                    <h3 class="sub-title">Functional Reactive Bindings (FRB)</h3>
                    <img src="images/home/home-frb.svg" alt="FRB">
                    <p>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.</p>
                </div>
            </div>
                        
        </div>
    </section>
    
    <section id="example" class="example">
        <div class="wrapper">
            <h2 class="title">A Simple Example</h2>
            <p>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.</p>
            <div class="cols">
                <div class="col col-2-3">
                    {% include home-example.html %}
                </div>
                <div class="col col-1-3">
                    <p><strong>HTML</strong>: 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 <code>data-montage-id</code> custom data attribute, which is required to initialize the markup using the serialized objects.</p>
                    <p><strong>JSON Serialization</strong>: 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.</p>
                </div>
            </div>
        </div>
    </section>
    
    <section id="next" class="next">
        <div class="wrapper">
            <h2 class="title">Next Steps</h2>
            <p>To install MontageJS and get started coding, try our <a href="/docs/montagejs-setup.html">Quick Start</a> guide. Alternatively, take a look at some of our <a href="/apps/">sample applications and demos</a> built with MontageJS. If you need help, visit our <a href="/community/">Community</a> page for all the ways you can learn more about MontageJS. Enjoy!</p>
        </div>
    </section>