Building Enterprise HTML5 Application

A High-Performance HTML5 jQuery MVC Micro-Framework

Code Fast, Run Fast

SIMPLE

4 APIs

LIGHT

8kb minimize/compressed

FAST

High Performance DOM Approach

The Concept

brite.js is a lightweight (8kb min/gzip) high performance DOM Centric MVC framework for building small to large scale HTML5 applications. Rather than trying to bring a desktop/native widget or some heavy bi-directional binding model to HTML, brite.js just brings the missing MVC pieces to HTML turning the DOM into a very robust, flexible, performant, and scalable application platform. brite.js is designed to be thought as a library more than a framework with the following mantras: Focused, Simple, Flexible, and get quickly out of the way.

The Result

Simpler code, faster code (closer to the DOM), much easier to optimize and customize, and infinitely more future proof (Frameworks come and go, HTML/CSS/JavaScript always stay.)

brite.js is MIT licensed, hosted on GitHub (brite.min.js, brite.js), and its only dependency is jQuery core (1.8 and above).

TodoMVC Example

Step 1) The includes

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>TodoMVC App (with brite.js)</title>
    
    <!-- Just the drop-in of todoMVC asset file (usually, we would include bootstrap at this level) -->
    <link rel="stylesheet" href="assets/base.css" />

    <!-- This is the only hard dependency for brite.js -->
    <script type="text/javascript" src="js/jquery.min.js" ></script>

    <!-- Best-Practice: We like handlebars, but you can use any templating engine. 
                        In our typical development we will pre-compile handlebars templates to js 
                        and use handlebars-runtime (4kb rather than 34kb!)
    -->
    <script type="text/javascript" src="js/handlebars.min.js"></script>

    <!-- Obviously, can use bowser or any other build tools -->
    <script type="text/javascript" src="js/brite.min.js"></script>

    <!-- This is a simple dev In Memory brite.js DaoHandler that allows to have CRUD API at the entity level
         in an asynch way. So, plugin a real store backend is as simple as implementing a RemoteDaoHandler --> 
    <script type="text/javascript" src="js/brite.InMemoryDaoHandler.js" ></script>

    <!-- Best-Practice: Application always should have a main javascript file and a
    default namespace for it's variables and functions
    (use a single namespace for your app properties, function, modules and such).

    app.js will be this main javascript file and will initialize the application 
    as well by calling the first brite.display...
    this way, the code is ChromeApp compatible (No <script tags in .html for ChromeApp)
    -->
    <script "text/javascript" src="js/app.js" ></script>

  </head>

Step 2) The Handlebars templates

Note that we are using handlebars, but you could use any templating engine or any way of returning HTML or DOM element.

Here, we decided to go with only two views, and therefore, there are only two templates.

The first template is the TodoView which is the main application. Note that for this example, we are embedding the template source within the HTML page using the script type='text/html' trick for simplicity. Usually, we like to compile our templates.

<script id="tmpl-TodoView" type="text/html">
  <div class="TodoView">
    <section id="todoapp">
      <header id="header">
        <h1>todos</h1>
        <input id="new-todo" placeholder="What needs to be done?" autofocus>
      </header>
      <section id="main">
        <input id="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <div class="taskListViewCtn"></div>
      </section>
      <footer id="footer">
        <span id="todo-count"></span>
        <button id="clear-completed">Clear completed</button>
      </footer>
    </section>
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>App design &amp; styles from todoMVC</p>
      <p>Created by <a href="http://www.jeremychone.com/">Jeremy Chone</a></p>
    </footer>
  </div>
</script>

The second template is the todo list. Here, we decided to refresh the whole list when there is a data change. This could be fine tune, but be aware of trying to do some bi-directional binding magic can become quite hairy and not really efficient (especially for server driven list).

<script id="tmpl-TaskListView-todo-list" type="text/html">
  <ul id="todo-list" class="TaskListView">
    {{#each tasks}}
      <li data-entity="Task" data-entity-id="{{id}}">
        <div class="view">
          <input class="toggle" type="checkbox" {{#if done}}checked="checked"{{/if}}>
          <label>{{title}}</label>
          <button class="destroy"></button>
        </div>
        <input class="edit">
      </li>
    {{/each}}
  </ul>
</script>