What are Javascript Frameworks and where do they fit?
There has been a lot of talk over the last 12 month of the world wide web providing a much richer user experience, drawing site visitors into a deeper relationship with content, increasing visitor loyalty and, subsequently, the number of return visits to your site. This is an excellent evolution of traditional websites into interactive, rich media tools for users. So how can you achieve this cost effectively, time efficiently and without the headache of maintaining large amounts of custom developed code?
That's where frameworks can help you. A framework will provide a set of tools, routines and controls, written in Javascript and CSS, that allow for the development of a much richer user experience utilising techniques such as AJAX, DOM and DHTML. Using a framework you only require your user community to have javascript enabled in their browser, rather than expecting them to have specific, third party, software and plug-ins installed. A situation that is often restricted by Corporate IT policies.
At Eurisko we typically use either jQuery or Mootools, both of which have a large following in the commercial world and a large community of plug-in developers, many of whom are professional developers. The typical structure of a javascript framework can be seen in the way jQuery has built their's. The jQuery framework consists of a core module, and a UI module.
jQuery describe their core module as:
"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."
So the core module provides us with all the library functions to do "stuff" on our site, but still requires us to develop the actual interface modules. This is where the UI module comes in.
"jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications."
So our UI module provides higher level functions to rapidly build interactive user experiences. Add to this the wealth of plug-in that are available, not just for jQuery and Mootools but for almost all the UI frameworks and you have a truly RAD environment. There are a lot of other javascript frameworks out there too, some offering just UI modules and others sets of libraries for custom develops. The list is really quite extensive including such names as Yahoo UI, Dojo, QooXdoo, Midori and many more. We have settled on jQuery and Mootools as we feel that these two frameworks provide the most comprehensive set of tool of any.
So Where Do They Fit?
The simple answer is that it depends on what you are trying to achieve and who your user community is. And, of course, the fact that however interactive your site is, nothing, and we mean nothing, can replace well written, appropriate and thoughtful content. Always remember your sites appearance supports your content but never replaces it.
That said, good content presented in an rich, interactive environment is always more engaging for the user, but let us not forget, as with most things, less is often more. What we mean by this is that these rich web experiences should be just that, a rich, usable enhancement to the user experience. A page with 5 animated areas, multiple popup information bubbles linked to mouse over events and tickers running top and bottom rarely enhance the experience but often distract a user. Use the richness that can be provided to give value to your user community. Some simple examples could be:
- Increase the relevant information presented on a page by reusing an area with things such as rotating tabs and accordions
Examples of this can be seen at Wessex Water, where rotating tabs provide eye catching information and increase the amount of service available to the user 4 fold. Or at 15 Hatfields, where a simple accordion provides a quick and easy way for user to access key information on the homepage.
- Provide additional help and explanation on interactive forms
Something as simple as a small question mark icon, that when rolled over displays help specific to the field of a form it is next to can hugely improve the usability of simple and complex data interactions with your users.
- Create forms that allow optional fields to be displayed or removed as required
This can allow additional information fields to be displayed as required and based upon previous entries to fields on the form, displaying a simplified form for the user and helping to easy an anxiety they may have with large data entry tasks.
- Present engaging animations to support primary content
Simple things such as rotating images of products or services to support descriptive text can be hugely effective.
The list really does go on and on.
Now that these frameworks are readily available, and with the ability to integrate them into the content managed within a CMS, deeply rich user experiences can be produced, with easy reuse, and simple content control via your CMS. A managed website, providing controlled content, presented in a rich, interactive manner can and does bring real value to your site and the people who use it.