Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

10 Best JavaScript libraries

Check out this selection of the most useful and highly efficient JavaScript frameworks to streamline your workflow

Screen shot 2014-07-28 at 12.46.16

BEST FOR… Data-driven websites


Angular sees itself as a one-stop shop for development and maintenance of data-driven web apps. This means that it provides structures and helpers for business logic and GUI elements alike.

The most visible part of Angular.js is made up of the various tags that get added to the HTML markup of your site. During the bring-up process of the framework, a compiler-like element analyses the DOM. This information is then used to create the dependency graph.

Google invested considerable resources into the project over the last few years. The framework currently sports a two-way data-binding engine that works similarly to the one found in Knockout. In addition, various components are provided that usually have to be realised as a server-side element.

Sadly, Angular.js does not bother with older versions of IE. Support for IE6 and 7 was dropped in version 1.2. Angular 1.3 will eliminate IE8.

BEST FOR… General utility functions


Developers creating JavaScript apps tend to rewrite small helper functions again and again. Most languages would eventually include them – the slow pace of advancement in JavaScript’s syntax has ensured that this hasn’t happened so far.
The tiny underscore library weighs about 1KB in compressed form. Its developers squeezed in about five dozen highly useful helpers that tend to be useful in almost every program.

The main part of the library is made up of various helpers specialised on handling data sets. For example, a random sample can be extracted from a list or an array via the sample function:
001  sample([1, 2, 3, 4, 5, 6]);    

If your program deals with contagious arrays, a group of methods simplify data traversal and analysis. The is-Functions help you when it comes to determining the type of the value found in a variable:

001  _.isFinite(-101);
002  => true

001  _.isFinite(-Infinity);    002  => false

Finally, underscore also contains a group of methods providing all kinds of mathematical features. A small templating engine helps you when it comes to creating HTML code automatically.

BEST FOR…  Lightweight jQuery work


Zepto.js weighs about 10KB, which makes downloading and parsing it fast. This is achieved by stripping out the rarely used parts of jQuery. The developers also restrict their library to modern web browsers and remove glue code to further accelerate the process. It is targeted at the mobile web, and boasts a large compatibility list
Zepto follows the lines specified by jQuery closely. jQuery’s event system survived the cut and can be used in Zepto-enabled applications.

BEST FOR… Testing Node.js solutions


Testing code based on Node.js with a ‘normal’ unit-testing framework doesn’t take long to become
tedious. Mocha excels at testing applications that are made up of server and client components in one go.
Because of it being based on Node.js, users are unable to run Mocha tests from within a web browser. Instead, the product has to be invoked from an npm command line in a fashion similar to the included code snippet.
Still, Mocha really shines when it comes to testing asynchronously. The callback routine of the code that is to be tested simply has to invoke the done() function when the result has been determined – data brokerage is handled by the framework.

BEST FOR… Managing JavaScript


Small amounts of JavaScript code are best included using the Script tag. Once a program is made up of a group of interdependent libraries, a more sophisticated way tends to lead to better results.
Require.js offers utility functions to simplify things. Callback routines can be invoked once the loading of a JS file is completed – useful if you want to bring up frameworks in a specific order. Advanced users can create Web Modules containing code and info about other libraries it depends on.

BEST FOR… Compact MVC apps


Model View Controller frameworks tend to be complex. This is unattractive, since loading pages takes longer and developers are burdened with tons of boilerplate code.
Agility.js can create all three building blocks by invoking a factory function, which returns a new instance. The jQuery-inspired syntax gets you up to speed faster, a low file size then ensures swift loading times.
Most web projects are made up of HTML, JavaScript and CSS files. Agility permits you to unify these three content types into one file.

BEST FOR… Data-integrated GUIs


Applications based on Sencha Ext.js are broken up along the lines of the MVC pattern. A model class contains the business logic, a view handles the actual display. The controller sits between these two classes and acts as a broker.
MVC can be implemented without a framework but Ext.js has many benefits. First, the developer provides performant widgets that excel at handling data, and the new data package makes accessing business data a breeze. It can be used to create sophisticated class chains that handle the data processing for you.
For financial apps, the integrated charting framework can come in handy – but keep in mind that developers creating closed-source apps may not use Ext.js without paying a high licence fee.

BEST FOR… native-looking phone apps


PhoneGap apps tend to look a bit ‘off’, as the widely used jQM framework does not do a good job of mimicking the GUIs of mobile operating systems.
PhoneJS intends to solve this. It’s made up of a GUI stack specialised in creating native-looking apps. In the backend, jQuery and Knockout are integrated to simplify development. The developer also includes a view caching system and other elements that make creating robust architectures easier.
Sadly, the framework is not free and must be bought in subscription form, which costs $199 for the year.

BEST FOR… Event routing


Event routing provides a quick way to decouple components. This ensures reusability, simplifies testing and can be helpful when developing complex systems.
Sadly, most event management subsystems tend to be part of a larger and more complex framework, offering a variety of unneeded functions. Radio.js is a welcome exception: the library is barely 1KB and contains no extra functionality beyond the event subsystem.
But important features are implemented in full. Once a channel is created, clients can subscribe whenever they are interested in the data. Radio.js is a well-tested library that works with all major browsers and is renowned for being extraordinarily easy to use.

BEST FOR… Apps for smart TVs


Enjo was envisioned as GUI building framework for Palm’s webOS. After it premature death, the rights of the library fell to LG. Pundits think the framework will be used on the next generation of LG smart TVs – but Enjo also works on most mobile and desktop browsers.
Creating user interfaces is easy. Forms are made up of ‘kinds’, which can best be described as slimmed-down components. Developers are provided with common widgets and additonal ones can be created using the kind() function.
Applications that access web services benefit from helper classes that simplify consumption. Internationalisation is aided by a library called g11n, which provides utility functions for adjusting text, number and date formats.

Improve your web design skills with Web Designer. Download issues direct from or buy print issues from ImagineShop