The Anatomy of a Modern JavaScript Application

From SitePoint
May 16, 2017 - 4:00pm
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 JavaScript development these days. In this article, I'll introduce you to modern JavaScript. We'll take a look at the most 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. A Note About Node.js Node.js is a runtime that allows server-side programs to be written in JavaScript. It is 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 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 Refere


Continue reading this article »