Getting Started with ES2015 using Sencha Cmd 6.5

At SenchaCon, we released Sencha Cmd 6.5 EA, which supports transpilation of ES2015 source code to ES5 based code that works on non-ES2015 capable browsers. In this article, we’ll give you an overview of ES 2015 features and show you how to start using ES 2015 in your Ext JS apps with Cmd 6.5.

Get Sencha Cmd 6.5 EA Now

Download Cmd 6.5 EA*
*Note: when you receive the confirmation email, you can choose to download Cmd 6.5 only.

Cmd 6.5 supports transpilation to ES5 when you are building a production version of your application. If your Ext JS application is targeted at only modern browsers, then you can disable transpilation by adding the following JavaScript object to your application’s app.json file.

"output": {
    "js": {
        "version": "ES6"
    }
}

ES2015 Overview

ECMAScript 2015 (or ES2015 or ES6) is the largest upgrade to JavaScript since its creation. Now the language has new data types, improved utility functions, and features to better define the scope of your code blocks. The ECMAScript release name includes a year, because there are plans for smaller updates to the specifications each year. ES2015 has been implemented with good compatibility in multiple environments including V8 (Chrome, Node.js, Opera), JavaScript Core (Webkit, Safari), Chakra (MS Edge), SpiderMonkey (Firefox) and mobile (iOS 9+, Android 4.4+). Web browsers have been actively upgraded with the ES 2015 implementation, however, not every browser (such as IE10, IE11) or environment supports every feature.

With Cmd 6.5, you can use the large number of advances in JavaScript. Now, I will go through examples of the ES 2015 key features that you can use in your Ext JS apps with Cmd 6.5.

Blocked Scoped Constructs

In ES5, variable declarations using var are treated as if they are at the top of the function (or global scope, if declared outside of a function) regardless of where they were placed. This is also known as hoisting. ES2015 defines block-level declarations – allowing you to declare variables that are inaccessible outside of a given block scope. Block scopes are created either inside of a function or inside of a block – indicated by the curly braces (as shown in example below). You can also define declarations in ES2015 with the const declaration syntax – meaning their values cannot be changed once set.

function selectTool() {
      let tool = "inspector";
      if (tool === "inspector") {
         let tool = "themer"; // shadows outer tool
         console.log(tool); // themer
      }
      console.log(tool); // inspector
    }

Default Parameters

Functions in JavaScript are unique in that they allow any number of parameters to be passed in. With ES2015, you can provide default function parameters that can keep your function bodies clean, without redefining and assigning values to inner variables. In the example below, Themer and Inspector are passed as default parameters:

function mustHaveTools ( theme = "Themer", debug = Inspector", callback = function() {}
) {
    console.log( "Must have tools: " + theme + " " + debug);
}

Template Literals

Template literals provide intuitive expression interpolation for single-line and multi-line strings.
Note the backticks used below. You can use single and double quotes, and there’s no need to combine strings. In this example, product gets substituted with Sencha:

let product = "Sencha";
let myText = `${product} provides the industry's most  comprehensive collection of UI widgets.`;

Arrow Functions

With Arrow functions, you write less code and they’re ideal for writing callback functions or inline functions. The example below logs all tool names as part of the forEach method of the tools array:

tools = ['architect', 'inspector', 'themer']
tools.map((tool)=>console.log(tool));

Array Destructuring

Array destructuring helps with extracting data from arrays and objects and is ideal when working with deeply nested objects. Now, you no longer need to create extra variables with dot-notation:

let myTools = ["Visual Builder", "Visual Themer", "Debug and Inspect"];
let [architect, themer, inspector] = myTools;
console.log(architect, themer, inspector);

New Methods for Object, Array, Number, Math

Object.assign is one of the new methods added in ES2015 that can be used for assigning properties of one or more source objects onto a destination object. This method can be used for coding mixin patterns. In this example, the production object now has a theme property as well:

let production  = { build: 'cmd' }
let devel = { theme: 'themer' }
Object.assign(production, devel)

Promises

Ext JS supports Promises with the Ext.Promise class, which provides an API-compatible implementation of the ES 2015 Promises API. This class uses the native Promises implementation, if one is available. With Cmd 6.5, you can use the ES 2015 Promises API directly. Promises provides an elegant way of handling asynchronous calls instead of having to use nested callbacks. You can use Promises for help with asynchronous JavaScript operations such as AJAX calls to a server. The example below shows the basic syntax of Promises:

function selectThemingTool(tool) {
      return new Promise((resolve, reject) => {
          if (tool === 'Sencha Themer') {
            resolve();
          } else {
            reject();
          }
      })
  }
  selectThemingTool('Sencha Themer')
    .then(() => console.log('You win!'))
    .catch(() => console.log('You lost!'));

Classes and Modules

Ext JS always supported hundreds of classes and components that are inherited from Ext.Base and supported dynamic loading using Ext.Loader. As we announced at SenchaCon 2016, the ES2015 classes and modules syntax will be supported in the next major release of Ext JS.

Next Steps

Check out the Cmd 6.5 EA docs and please share your feedback in the Sencha Cmd forum. We look forward to reading your comments.