HTML5 Toolkits for Complex Web Applicationson Dec 01, 2010 in HTML5, Software Architecture, UX by Andrew MacLeod
User Experience is Paramount
The GUI is the most prominent part of the application, and is usually the most expensive to develop. An important part of the UX rests on your choice of widgets and how customisable they are. You should choose widgets that will give you the best possible starting point; if you can’t find what you want, you will have to consider composing your own.
Most widget toolkits are general purpose, but more sophisticated widgets are emerging. ExtJS, jQuery and Dojo provide widgets ranging from grids to email suites. Caplin specifically targets widgets for financial sector clients that are oriented to financial domain specific objects and delivering real-time prices to the screen.
Widgets are typically customised using templates, configuration and programatically. Templating is by far the quickest approach, and this has been well proven with Silverlight’s XAML. HTML also works very well as a view templating language, and HTML5’s data attributes can be used to further this approach. Caplin has developed some easy-to-use frameworks that use HTML/CSS templating to build new widgets quickly.
UX does not stop at widget selection though: how they interact is also crucial. User workflow across all the widgets in the application needs to be implemented with due respect to the overall application structure.
Most GUIs conform to some kind of structural pattern. Passive View, Presenter First and Presentation Model (aka MVVM) are all good design approaches. There’s little merit in debating which precise pattern is “best” – if it were that simple then Martin Fowler would have told us the answer by now. The most important thing is that you should be able to build your widgets with the appropriate degree of composability, isolation and testability.
All MVC-derivatives leverage the observer pattern, and it’s crucial to choose an implementation to support the right level of decoupling (such as pub/sub). For example, a web application typically comprises a layout manager which houses its widgets and manages screen real estate, and you will need to consider how your component-level widgets will communicate with application-level code.
You may decide to use additional utilities to implement structural patterns in your application, but you need to proceed with caution.
For each toolkit you adopt, ensure that the benefits outweigh the incremental burden that you are taking on, and ensure that you are happy to embrace its idioms and syntax.
At Caplin we’ve made enthusiastic use of toolkits such as ExtJS, jQuery and Emprise charting, but have found it necessary to build our own frameworks for layout management, real-time grids and templating/data-binding. The last one of these has proved so useful that we are planning to open source this in the near future.