Building Enterprise HTML5 Application

Step 5) Styling and Finishes

The last step is to do the styling and finishes. We won't into all the details, as the sample Taskmanager source code speaks for itself, but we will outline the few best practices we follow at BriteSnow for building applications.

Sample Application - Source | Demo

Touch event optimization with btap and bdrag

brite.js uses jQuery special events to implement optimized cross device (i.e touch and mouse devices) such as btap and bdrag allowing the application code to just have to bind to one event type and support all devices at their optimum.

Thus, in the final sampleTaskManager we use btap brite.js special jQuery event everywhere where we used the standard click event which allows to boost "tap" performance on touch devices while keeping compatibility with "mouse devices." (In other word, btap is a fast tap implementation for touch devices)

brite.js also offer a bdrag special events which allows to implement a cross devicedrag event. Add comment below if you want more information on the bdrag event.

Bootstrap, Styling, and LESSCSS

  • We almost always use Bootstrap as it provides a very well thoughtout set of CSS styles and HTML/CSS structures. The fact that Boostrap segreggated the UI Layout/Style with pure HTML/CSS from the javascript behaviour implementation fits perfect the brite DOM centric MVC approach.
  • Our best practice is to put all the bootstrap distribution file in its own folder as it can be download from Bootstrap, and then, we include the boostrap.min.css and boostrap-responsive.min.css first, and then the application main.css and Views' css after.
  • We have not used lesscss for this sample application, but we often do, especially for big application. We also use/import Bootstrap mixins.less, as it provides a good set of reusable css "macros" (or mixins).
  • One very important practice we follow, is to try to do render all the layout as pure HTML/CSS as possible rather than requiring some javascript logic to add css classes and such.
  • In this final sample code, we also changed the "checkbox" UI element from a native one to a custom implementation, as it is much easier to skin.

Custom DAOHandler

For this sample application, we used the provided brite.InMemoryDAOHandler which is great for prototyping and early development, however, of real applicaction we always develop a custom DAOHandler fine tuned to the application need. See brite.registerDao doc for more information about developing your own DAOHandler

We tend to implement the DAOHandler as prototype base javascript object, as it allows us to extend base implementation in a object oriented way, using brite.inherit.

Events, Events, Events

Probably one of the most important code design of an application is its event model. Having, a good application convention about HTMLElement Events, Application Events, and Data/Dao Events, can make all the difference between an application that is simple to maintain and grow, and one that see its code explode.

Step 4 - Adding The Events

Ask, learn, share about brite.js

Go to brite.js G+ community