A Minimalistic MVC Framework For jQuery

Building High-End HTML5 Applications

brite.js is a simple but powerful DOM centric MVC (D-MVC) framework for building high-end HTML5 applications. The driving concept is to just add the missing MVC pieces to the DOM rather than force fitting Desktop MVC and Widget patterns to the DOM. The result is simpler, easier to optimize, and more scalable HTML/CSS/JS application code. In short, brite turns the DOM (and jQuery) into a robust, efficient, and scalable MVC platform.

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

Ask, learn, share about brite.js

Go to brite.js G+ community

Brite MVC Overview

Model

JS & JSON

Extensible DAO model

Asynchronous

Store & UI Independent

var userDao = brite.dao("User")

// call CRUD API (extensible)
userDao.update({name:...})

// dao are $.Deferred based
userDao.list()
         .done(function(users){
   // logic with the users list
})

// Rich DAO eventing model

// For example: trigger on any datachange 
// on object type User
brite.dao.onDataChange("User",
        function(event){
  var user = event.daoEvent.result;    
},namespace);

// unbind with 
brite.dao.offDataChange(namespace);

View

HTML & CSS

On Demand Loading

Any Templating Engine

Great with Boostrap

/tmpl/MyView.tmpl

<dscript id="tmpl-MyView" 
            type="text/html">
  <div class="MyView">
    <!-- html/template code
         e.g., twitter/bootstrap and jsrender -->
  </div>
</script>

/css/MyView.css

/* css for the MyView elements */
.MyView .subElement{
  ...
}
/* can be loaded dynamically */

Controller

View LifeCycle

Object Oriented

Highly Optimizable

// for example
brite.display("MyView",
              "#someParent",
              someData);

/js/ProjectView.js

// Define your view controller like
brite.registerView("MyView",
                   config,
   {
     create: function...,
     init: function...,
     postDisplay: function...,
     destroy: function...
  });

The View Model

Ask, learn, share about brite.js

Go to brite.js G+ community