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

Video Recording with MediaProjectionManager

Recording video on an Android device, as a developer, should be as easy as calling a platform-level API, possibly showing an intent for permission approval, before starting to streaming video. Unfortunately, we don’t live in an ideal world, and video recording is far more difficult than it should be. Fortunately, starting in Android Lollipop, there is a new API (MediaProjectionManager[1]) to make recording video easier. However, there is a remarkable amount of incomplete or ...

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 ...

Recycler Object for Object Pool Pattern

Creating or destroying an object is never free and JavaScript is no exception. Generally, the cost of creating/destroying an object in JIT-optimized JavaScript runtimes doesn't affect performance, but other languages will have a performance hit as well. The real culprit is the increase in your application's memory footprint (watch the memory tab in a developer tool while running the tests below for an illustration). This is why, in most cases, reusing a single object is ...

Start Using SRCSET IMG Attribute For Serving Device Specific Images

The article, JavaScript Low Resolution Image Replacer, discussed a JavaScript solution for replacing low resolution images with higher resolution ones after the page finishes loading all the initial resources (thereby reducing the load time of your pages). But what about loading different image sizes based on the resolution of the user’s device. We could write a JavaScript solution for this (and some developers have), but HTML 5 already introduces the concept of <img srcset[

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 ...