Heather Buckley
2 Feb 2011
The Best JavaScript Frameworks and Libraries for Web and Mobile
Brand new course! No coding experience? We'll teach you all you need to know to make iPhone apps on our iOS App Training for Non Developers course!
JavaScript has been frustrating developers for years, but with javaScript libraries and frameworks like jQuery JavaScript is regaining its street cred. jQuery is not of course the only javaScript framework around, but the main reason that JavaScript is becoming more interesting and exciting is the ever increasing development of JavaScript libraries and frameworks.
If you're into your JavaScript Libraries, check out our Top 6 jQuery Tutorials
The real problem with JavaScript (released in 1995) lay with what we now call the DOM (document object model). Browsers implemented what we now know as the DOM in different ways meaning that browser cross compatibility was a nightmare. The standardisation of the DOM made thing a little easier but Internet Explorer (the bane of many a developers life) did not support basics like addEventListener until 2010 in IE9.
JavaScript frameworks provided developers with solutions to more easily overcome many browser bugs, allowing developers more time to develop.
The five market Leaders in JavaScript frameworks – or libraries are:
jQuery is the strongest at DOM manipulation, and that’s why we like it.
It provides simple ways to create any custom effect and a range of simple to powerful Ajax methods.
YUI seems to offer everything! It includes the basics of DOM manipulation and event handlers, but also has a huge host of utilities available to it, ranging from internationalisation to history management and animation. What makes YUI special is its ability to load the utilities during runtime, so visitors do not suffer from slow page downloads. Built by front-end engineers at Yahoo! and
contributors from around the world, it's an industrial-strength JavaScript library.
Dojo is akin to enterprise-level JavaScript applications, and its homepage shows off how IBM,
YUI seems to offer everything! It includes the basics of DOM manipulation and event handlers, but also has a huge host of utilities available to it, ranging from internationalisation to history management and animation. What makes YUI special is its ability to load the utilities during runtime, so visitors do not suffer from slow page downloads. Built by front-end engineers at Yahoo! and
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the
intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
These JavaScript libraries provide these important features in common:
- Cross-browser support, particularly for older browsers even IE6 – RESULT!
- Experienced developers who share their knowledge and experience with the community
- Open licences enabling developers to use the projects privately and commercially
- Strong communities of developers that support them
- Extend-able functionality
Great stuff to have in common but they all cover the fundamentals of web development in their own way. Most people getting started with JavaScript these days are faced with the challenging task of picking a library to use, or at least which one to learn first. If you’re starting a project from scratch and know that including a JavaScript library or framework is going to save you time and therefore money, then you have the advantage of being able to shop around for the perfect candidate.
UI frameworks
jQuery TOOLS – UI library for the Web is a very light weight (2.5kb) collection of the most popular user-interface components offering functionality over load time. It provides libraries for the following jQuery elements: Tabs, Tooltip, Scrollable, Overlay, Forms and Flashembed.jQuery can be downloaded as selected modules, so you don’t have to worry about pulling in the entire UI library if you just want draggable windows, for instance. It has the same benefits as jQuery and is under the same licence, so if you require a standard set of components, such as a date picker, progress bars or drag and drop, jQuery UI is a good choice for you. In addition, all the jQuery UI components can have different skins applied, either by your own designers or with a predetermined template. Both would use the ThemeRoller application, a web GUI for styling jQuery UI components.
jQuery UI is a widget and interaction library built on top of the jQuery core that allows you to animate different elements giving you impressive front-end interactions, all with relative ease.
The UI package is basically a collection of user interface-related functions that and can be broken into 3 main modules:
- the widgets, which contain prebuilt and customizable user interfaces
- the effects, which are very simple and straightforward animations you can do to a page element
- expanded mouse interaction with page elements (dragging and dropping)
Script.aculo.us is a popular UI kit that extends the Prototype Framework by adding visual effects, user interface controls, and utilities via the DOM.
Scripty2, essentially the second incarnation of Scriptaculous, goes beyond the animation framework that it was originally known for. Although Scripty2 is still in alpha, it’s likely to be the UI framework of choice for Prototype developers because it builds on the library. In addition to some super-smooth effects, it will come with accordions, dialogs, progress bars, tabs, sliders and an autocompleter.
MochaUI – A Web Application User Interface Library requires MooTools and also requires an XHTML 1.0 strict doctype. So it’s no good for HTML5 entusiasts. It provides a slick UI for windows, drag and drop, file views and panel views. It is a popular extension to the MooTools Javascript Framework and ExplorerCanvas, to develop quick Web Applications, Web Desktops, Web Sites, Widgets, Standalone Windows, Modal Dialogs and much more.
JavaScript libraries and frameworks for Mobile
JavaScript libraries and frameworks are making their way into the mobile development community. Mobile is uncharted territory and getting exiting. It’s really where the future of web development is. There are, however many considerations to be met: performance of the mobile device, whether you want to replicate the native UI and whether the mobile device even supports the newest JavaScript methods
jQuery Mobile is a Touch-Optimized Web Framework for Smartphones & Tablets. jQuery Mobile provides a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. jQuery will support mobile browsers from B-grade and upwards, another reason why we think that jQuery is the one to watch.
jQTouch isn’t so much a framework as a jQuery plug-in that provides a native UI feel to iPhone-based web apps. This includes transition effects, a few template styles for all the UI widgets (such as lists, buttons and toolbars), swipe detection so that it interacts like an iPhone app and, finally, the ability to extend the functionality of the plug-in. There are number of jQTouch-based iPhone apps have already and are available in the iTunes store, compiled via PhoneGap.
To meet industry demand Silicon Beach Training has updated our JavaScript training course and introduced jQuery training and Ajax training courses to whet your appetite. Of course if you need HTML5 & CSS training we can offer these too only 5 mins walk from Brighton railway station.