index.html

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

{% include teaser-home.html %} {% include social.html %}

<section id="why" class="why">
  <div class="wrapper">
    <h3 class="title">Why Mod?</h3>
    <p>
      Mod is a modern, full stack HTML5 framework designed to create single-page
      applications—fast! Mod 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>
          Mod 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>
          Mod 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>
          Mod 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>
          Mod 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>
      Mod 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 Mod 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-mod-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 Mod 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 Mod. If you
      need help, visit our <a href="community/">Community</a> page for all the
      ways you can learn more about Mod. Enjoy.
    </p>
  </div>
</section>