What’s hot in JavaScript today

What’s really hot in JavaScript these days? Glad you asked. Okay, I asked.

Bower

A package manager for the web, created at Twitter. Bower has helped me managed by JavaScript libraries better. One good side effect that came out of it is that it kinda prevents developers from altering the libraries. Remember those times where you upgrade a library and then realized your library is somehow a custom build version? This get detected much earlier because each we check out code from the SVN repository we also do a fresh install of components in bower_components.

More information at Bower.io.

Modernizr

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.

More information at Modernizr.

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

More information at D3.

jQuery

jQuery isn’t new but it still is really popular. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

More information at jQuery.

Mocha

Mocha is a feature-rich JavaScript test framework running on node and the browser, making asynchronous testing simple and fun. Mocha is easily my test suite of choice. I’ll write more about Mocha is there’s more interest.

More information at jQuery.

Lodash

Lodash is a drop-in replacement for Underscore.js, from the devs behind jsPerf.com, that delivers performance improvements, bug fixes, and additional features. It adds some additional functions too. Their collection tools are more comprehensive than Underscore.js’s. Currently it is at version 1.3.1.

More information at Lodash.

Angular.js

Something is really paradigm shifting is Angular.js. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. However I find it hard to integrate this into existing work. It’s probably great for new projects though! I use Backbone.js and Marionette combination for most of my JavaScript works.

More information at Angular.

The better utility belt Lodash

We switched from Underscore.js to Lodash compatibility mode and never been happier. (I’m a Web UI Developer situated in Singapore.)

Lodash is a drop-in replacement for Underscore.js, from the devs behind jsPerf.com, that delivers performance improvements, bug fixes, and additional features.

It adds some additional functions too. Their collection tools are more comprehensive than Underscore.js’s. I had some issues doing a _.where through a mix of array and objects during web JavaScript programming. Lodash was the answer for it.

JSON.stringify then JSON.parse

I realized we keep doing JSON stringify then eventually parsing it back again and again to copy over objects. This does a dump “clone”, it ignores references and functions but is really fast. I wrote a Underscore.js or Lodash mixin just to do this.

[code lang=”javascript”]
/**
* This is the shortcut for JSON.stringify then parsing it back.
* Quick access to simple object copying.
* It does not copy functions!
*
* @author KahWee Teng
* @return {Object} Lodash mixin object.
*/
_.mixin((function() {
"use strict";
return {
copy: function(object) {
return JSON.parse(JSON.stringify(object));
}
};
}()));
[/code]

There’s just so many ways to doing a clone but this is by far the fastest but then again it depends on your needs. Dump clone I call this.