Using EMCAScript 6 Today

I have been avoiding writing about ECMAScript 6 (E6)[6] for the past couple of years. This is mostly because the standard was not finalized, and consequently most browsers/engines were implementing different and often unstable versions of the various new features. With the E6 spec stabilizing almost a year ago now[1] and the final release date scheduled sometime later this year[1], I expected most browsers/engines would have implemented much of it, with bake time to work out the bugs. However, it has become obvious that I was overly optimistic[2]. Nevertheless, E6 is coming and it’s time to start introducing some of the more supported features by beginning a series dedicated to the ECMAScript 6 features.

For starters, lets discuss the state of the web and how to begin using E6 today.

How do it…

Most of the browsers have already begun to support some of the new features. In IE 11 and the technical preview, many E6 features are available without doing anything special. In Chrome, some changes like new syntax are widely available, but others like new bindings require that the block of code be in strict mode. And in FireFox, some features are broadly available, while others require a special script tag declaration. For the broadest support across all browsers, use the following:

<script type="application/javascript;version=1.7">// or version=1.8
(function() {
"use strict";
// Your code here
}());
</script>

Unfortunately, Safari is lagging behind the other browsers in supporting new E6 features. Additionally, Node.js only supports a limited features set.

Consequently, an industry of precompiler/transpilers has sprung up to support E6 features in an E5 world[3]. I have had some limited experience with the BabelJs[5] compiler for writing E6 and converting it to E5 on the web. For server-side JavaScript, EchoJs[4] comes highly recommended instead of using straight Node.js.

When not using a precompiler, it is best to check out a compatibility table[2] to make sure the target feature is available in your desired environments. Generally, developers should avoid using E6 features without a precompiler, but braver developers, who forge ahead anyway, are limited to a few syntax and binding changes.

In Summary…

Frankly, before doing some research I expected far more browser support by now, and am rather disappointed in the state of E6, both on and off the web. Without using a precompiler, iOS and Safari users will not be able to use websites driven with E6 technologies, so a developer would need to have E6 and E5 version of their JavaScript and switch the loaded script on availability of E6 features. This is rather undesirable, as maintaining two separate code bases for the same features is wasteful a engineering effort.

Let me know about your experiences with ECMAScript 6 and its transpilers.

References

  1. The ECMAScript 6 schedule changes
  2. ECMAScript compatibility table
  3. ECMAScript 6 Tools
  4. EchoJS
  5. BabelJs
  6. ECMAScript Draft Specification

Karma Test Runner with QUnit in 10 Minutes

This is a ten minute primer for using Karma and QUnit to unit test JavaScript.

Getting ready

Install Karma[1], plugins, and Qunit[2].
 # Install Karma npm install karma --save-dev # Install plugins npm install karma-qunit karma-phantomjs-launcher --save-dev # Add global CLI npm install -g karma-cli # Install QUnit npm install --save-dev qunitjs 

How do it…

In your project directory, run the Karma initialization script:
 karma init ...

Object Pool Pattern in JavaScript

Now that we understand the Recycler Object for Object Pool Pattern, we can build the logic for managing the object pool. An object pool is a simple API that manages recycling and fetching recyclable objects. There are two common models for object pools, one with a fixed number of objects that errors if too many objects are requested, and the other (more flexible approach) is to use the object pool for a fixed number ...

JavaScript Low Resolution Image Replacer

This is a handy, yet very simple, widget I was hacking on to replace loading or low resolution images with higher resolution ones once the document has finished loading.

How do it…

The widget is built using the jQuery plugin system and here is the complete code:
 (function($) { var isLoaded = false, REPLACEMENT_CLASS = "replacement-class", REPLACEMENT_RCLASS = "replacement-rclass", REPLACEMENT_URL = "replacement-img", TIMER = 500; $(window).load(function() { isLoaded = true; }); function ...

Network Information API Polyfill

One of the many new HTML5 APIs slowly being implemented by browsers is the Network Information API[2]. It exposes information about the type of network that the connecting device is using. In theory, this allows developers to optimize content around the connection speed of the user. However, as with most HTML5 APIs it is supported only by some browsers with/without prefixes, and has a legacy implementation, so a polyfill is useful when working with ...

Detecting Object Mutations by Counting Properties

Have you ever included a library and wonder, "how much did this library add to the window object", or passed an object into a function and asked yourself, "did that function modify my object"? Instead of reading the source code, this article shows a quick trick for answering these questions.

How do it…

For starters we need a function to count the number of properties on an object:
 function fnCountProperties(o) { var ...

Using Google Play Games on the Web

As many of you know, I now work for Google on the Play Games Team. We provide APIs for game developers, implementing useful features like leaderboards and achievements, so the developer doesn't have to. While many Android developers are using our services, adoption on the web could be better, so lets take a look at how to integrate the Google Play Games Services achievements into a web game.

Getting ready

Become a Google developer ...

Event Bubble & Capture Phases

One of the less understood, but powerful feature of browser events are their phases. According to the W3C level 2 spec there are three phases[1]: AT_TARGET=2, BUBBLING_PHASE=3, and CAPTURING_PHASE=1. Most browsers also implement a fourth phase[2]: NONE=0.

Getting ready

Just a quick note that everything discussed in this article is for modern browsers (all browsers except IE <9). Prior to IE 9, Internet Explorer used its own event system, instead of conforming ...

Passing Objects into addEventListener Instead of Functions

I was reviewing the browser event stack the other day and was reminded of a rarely used feature of addEventListener that allows developers to autobind the execution context object, instead of requiring a call to bind or using a library, that is worth sharing, if you weren’t already aware.

How do it…

Typically, when attaching an event, we write:
 var myObj = { handleEvent: function (evt) { // 'this' will be scoped ...

Using Promises to Cache Static AJAX JSON Data

This article showcases a useful caching strategy for static data that is fetch via AJAX. We will use jQuery to setup a promise and cache the data in the localStorage for subsequent page loads or data loads.

Getting ready

A modern web browser supporting localStorage and JSON. Also, a basic understanding of promises[2] is helpful.

How do it…

Here is the code:
 (function($) { var oKeyDeferredMap = {}; function fnReadData(sKey) ...