The Anatomy of a Modern JavaScript Application

Category: build tools, ES2015, es6, ES6 Modules, JavaScript, modernjs, modernjs-hub, nilsonj, Tools & Libraries

There’s no doubt that the JavaScript ecosystem changes fast. Not only are new tools and frameworks introduced and developed at a rapid rate, the language itself has undergone big changes with the introduction of ES2015 (aka ES6). Understandably, many articles have been written complaining about how difficult it is to learn modern JavaScript development these days.

In this article, I’ll introduce you to modern JavaScript. We’ll take a look at recent developments in the language and get an overview of the tools and techniques currently used to write front-end web applications. If you’re just starting out with learning the language, or you’ve not touched it for a few years and are wondering what happened to the JavaScript you used to know, this article is for you.

For a high-quality, in-depth introduction to ES6, you can’t go past Canadian full-stack developer Wes Bos. Try his course here, and use the code SITEPOINT to get 25% off and to help support SitePoint.

A woman playing a life-size game of Operation; a metaphor for the many components of a modern JavaScript app"

A Note About Node.js

Node.js is a runtime that allows server-side programs to be written in JavaScript. It’s possible to have full-stack JavaScript applications, where both the front and back end of the app is written in the same language. Although this article is focused on client-side development, Node.js still plays an important role.

The arrival of Node.js had a significant impact on the JavaScript ecosystem, introducing the npm package manager and popularizing the CommonJS module format. Developers started to build more innovative tools and develop new approaches to blur the line between the browser, the server, and native applications.

JavaScript ES2015+

In 2015, the sixth version of ECMAScript — the specification that defines the JavaScript language — was released under the name of ES2015 (still often referred to as ES6). This new version included substantial additions to the language, making it easier and more feasible to build ambitious web applications. But improvements don’t stop with ES2015; each year, a new version is released.

Declaring variables

JavaScript now has two additional ways to declare variables: let and const.

let is the successor to var. Although var is still available, let limits the scope of variables to the block (rather than the function) they’re declared within, which reduces the room for error:

// ES5
for (var i = 1; i < 5; i++) {
  console.log(i);
}
// <-- logs the numbers 1 to 4
console.log(i);
// <-- 5 (variable i still exists outside the loop)

// ES2015
for (let j = 1; j < 5; j++) {
  console.log(j);
}
console.log(j);
// <-- 'Uncaught ReferenceError: j is not defined'

Using const allows you to define variables that cannot be rebound to new values. For primitive values such as strings and numbers, this results in something similar to a constant, as you cannot change the value once it has been declared:

const name = 'Bill';
name = 'Steve';
// <-- 'Uncaught TypeError: Assignment to constant variable.'

// Gotcha
const person = { name: 'Bill' };
person.name = 'Steve';
// person.name is now Steve.
// As we're not changing the object that person is bound to, JavaScript doesn't complain.

Arrow functions

Arrow functions provide a cleaner syntax for declaring anonymous functions (lambdas), dropping the function keyword and the return keyword when the body function only has one expression. This can allow you to write functional style code in a nicer way:

// ES5
var add = function(a, b) {
  return a + b;
}

// ES2015
const add = (a, b) => a + b;

The other important feature of arrow functions is that they inherit the value of this from the context in which they are defined:

function Person(){
  this.age = 0;

  // ES5
  setInterval(function() {
    this.age++; // |this| refers to the global object
  }, 1000);

  // ES2015
  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

Improved Class syntax

If you’re a fan of object-oriented programming, you might like the addition of classes to the language on top of the existent mechanism based on prototypes. While it’s mostly just syntactic sugar, it provides a cleaner syntax for developers trying to emulate classical object-orientation with prototypes.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

Promises / Async functions

The asynchronous nature of JavaScript has long represented a challenge; any non-trivial application ran the risk of falling into a callback hell when dealing with things like Ajax requests.

Fortunately, ES2015 added native support for promises. Promises represent values that don’t exist at the moment of the computation but that may be available later, making the management of asynchronous function calls more manageable without getting into deeply nested callbacks.

ES2017 introduced async functions (sometimes referred to as async/await) that make improvements in this area, allowing you to treat asynchronous code as if it were synchronous:

async function doAsyncOp () {
  var val = await asynchronousOperation();
  console.log(val);
  return val;
};

Continue reading %The Anatomy of a Modern JavaScript Application%

You must be logged in to post a comment.

blog