- Home
- Brite Views
- Brite Daos
- TUTORIAL
- 0. Target Application
- 1. The First View
- 2. The Sub Views
- 3. Adding The Daos
- 4. Adding The Events
- 5. Styling and Finishes
- BEST PRACTICES
- HTML5 App Architecture
- OO JavaScript
- TOOL
- jcruncher
- DOCUMENTATION
- brite.display
- brite.registerView
- brite.dao
- brite.registerDao
- brite.dao.onDataChange
- brite.dao.onResult
- brite.dao.off*
- jQuery.fn.bRemove
- jQuery.fn.bEmpty
- jQuery.fn.bEntity
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+ communityBrite 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>
<!-- 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
JS
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...
});