Anyone who uses ExtJS knows SenchaCmd: a tool that allows automating numerous operations necessary during development with ExtJS. One of its main features is creating the production version of the WebApp we are building.
This task involves a certain degree of transformation of the JavaScript code:
- Preprocessing of the code
- Transpilation of the code for compatibility with older browser versions
- Merging all sources (including ExtJS itself) into a single file
- Compression (minification) of the files
All these operations require SenchaCmd
to understand the JavaScript code, and unfortunately, until version 7.7, some features introduced in JavaScript in recent years are not supported.
Modern JavaScript
Since ES6 (introduced in 2015) numerous features have been added to the standard year by year. Below, I have included an entirely arbitrary list of ES6+ features, highlighting which do not work with SenchaCmd
and which work starting from version 7.8.
Spread operator (ES6)
👍 Compatible even with older versions of SenchaCmd.
Allows you to "spread" an array as if it were a list of variables.
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
console.log(year);
Destructuring assignment syntax (ES6)
📣 Supported starting from SenchaCmd 7.8
!
Allows assigning the elements of an array or object to a series of variables in a single operation.
let [a, b] = [1, 2];
console.log(a, b);
let {k, w} = { k:1, w:2 };
console.log(k, w);
Exponentiation Operator (ES2016)
⚠️ DOES NOT WORK EVEN WITH 7.8!
Allows the use of the "power" operator.
const x = 5 ** 2;
console.log(x);
Async/await (ES2017)
👍 Compatible even with older versions of SenchaCmd.
Allows using Promises as if they were synchronous functions.
const response = await fetch('/');
console.log(response.statusText);
JavaScript Object Rest Properties (ES2018)
📣 Supported starting from SenchaCmd 7.8
!
Extends the destructuring assignment functionality to retrieve values not included in the list into an array.
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x,y,z);
Optional catch Binding (ES2019)
⚠️ DOES NOT WORK EVEN WITH 7.8!
Allows handling all exceptions without specifying the type.
try {
// code
} catch {
// code
}
The optional chaining operator (ES2020)
📣 Supported starting from SenchaCmd 7.8
!
Allows reading a property from a null or undefined object without throwing an exception.
const test = {
dog: {
name: 'Pluto'
}
};
console.log(test.cat?.name);
console.log(test.dog?.name);
The nullish coalescing operator (ES2020)
📣 Supported starting from SenchaCmd 7.8
!
Returns the first non-null value from a list.
const foo = null ?? "default string";
console.log(foo);