Building Enterprise HTML5 Application

Step 0) The Target Application

This tutorial will go through the main steps to create a HTML5 application following a DOM centric MVC (DMVC) pattern with the brite framework. The target application is a simple but real taskmanager application allowing user to manage a set of tasks per project. Below is the final application.

Sample Application - Source | Demo

Note The goal of this tutorial is not to show how short an application code can be, but rather how well structured it should be. The goal of brite and its DOM centric MVC approach is to provide a simple, scalable, and flexible MVC approach to build high-end HTML5 applications by utilizing as efficiently as possible the HTML, CSS, and JS environment.

Running the Tutorial on your local server

All sources are in the brite github repository. The final application is in the sample/taskmanager folder and each tutorial steps are under the tutorial/taskmanager/01 and on folders.

To run the application and the tutorial steps

  • Get the source with git clone https://github.com/BriteSnow/brite.git or download it here
  • Point a local web server at the brite/ local folder with the context path brite/ as well.
  • Assuming your local server is at port 8080, go to http://localhost:8080/brite/sample/taskmanager for the full application or http://localhost:8080/brite/tutorial/taskmanager/01 to get the first step tutorial

Note To avoid duplicating too many files, the shared resources like brite.js, jquery.min.js, boostrap/css/... are shared in some parent folder. Consequently, to run the application and tutorials, make sure to have the brite/ folder as the root web folder. Obviously, in real applications, all the dependency files will be self-contained in the application folder.

User Interface

The goal of the user interface is to be simple, modern, and smooth. The simplicity is accomplished with a simple master details view, focusing only on the main properties of each entity, and very simple but intuitive ways to edit and browe entities (e.g., Edit in place). The modern feel of the application is given with a subtle but polish style (e.g., shadow, inset, and texture) and the smoothness with fluid animations.

The application user interface has three main views MainView which is the top level view, ProjectListNav which is the left side view that allow the user to see and select projects, and ProjectView which is a view on a selected project allowing the user to manage it tasks.

Data

There are two main object type Project and Task, with a many to one relationship between Task and Project.

The data in this particular example is InMemory, but the way the application access its data with with the Brite.dao pattern which allows to transparently swap the data storage (to SQLite, Remote Service API) without changing one line of application UI code.

Step 1 - The First View

Ask, learn, share about brite.js

Go to brite.js G+ community