A walk in JavaScript

DAY 1

Introduction to JavaScript

A great overview regarding ECMAScript and JavaScript. Article by Michael Aranda

JavaScript began as and primarily still is a language for scripting inside web browsers; however, the standardization of the language as ECMAScript has made it popular as a general-purpose language. In particular, the Mozilla implementation SpiderMonkey is embedded in several environments such as the Yahoo! Widget Engine. Other applications embedding ECMAScript implementations include the Adobe products Adobe Flash (ActionScript) and Adobe Acrobat (for scripting PDF files). Scripting Language - Wikipedia

But what is ECMA?

Let’s start with some facts

Source Standardization on wikipedia

Languages features quick overview

See more

Myths busted

[MYTH] JavaScript === Client-Side

Well that’s easy to prove … lets say … starting with Node.js

[MYTH] JavaScript === Front-End

Humm, see above? and … what’s FE anyway? is it the visual aspect? the user interaction handling? the data process occurring when an API is consumed to store a denormalized version of the schema in a local database?

[MYTH] JavaScript === “interpreted” language.

JavaScript is not an “interpreted” language anymore!!! or at least is not ONLY interpreted. Since V8 introduced JIT compilation in 2008, all modern browsers started overhauling their engines to be able to compete. Several improvements were based on pre-compiling optimizations, including (but not only) the generation of an intermediate Bytecode and a post optimization to produce machine code. Also several optimization initiatives were disregarded along the way like V8’s Full-codegen and Crankshaft.

Here some interesting articles

ES5 vs ES6

To be fair we should go back to the evolution of ES.

The JavaScript standard is referred to officially as “ECMAScript” (abbreviated “ES”), and up until just recently has been versioned entirely by ordinal number (i.e., “5” for “5th edition”).

The earliest versions, ES1 and ES2, were not widely known or implemented. ES3 was the first widespread baseline for JavaScript, and constitutes the JavaScript standard for browsers like IE6-8 and older Android 2.x mobile browsers. For political reasons beyond what we’ll cover here, the ill-fated ES4 never came about.

In 2009, ES5 was officially finalized (later ES5.1 in 2011), and settled as the widespread standard for JS for the modern revolution and explosion of browsers, such as Firefox, Chrome, Opera, Safari, and many others.

Leading up to the expected next version of JS (slipped from 2013 to 2014 and then 2015), the obvious and common label in discourse has been ES6.

Extract from YDKJS - ES6 & Beyond by Kyle Simpson

What is important to understand is that until ES6 all versions were ordinal versioned and the release pace was freaking slow mostly because the browsers weren’t decoupled from the OS and therefore any change should be integrated at OS releasing scale.

Since ES6 - AKA ES2015, a year-based schema was introduced to reflect and support the fast development pace of JavaScript particularly impulsed by the decoupling of the Web Browsers from OS first but also due to the expansive adoption of the language and the growth of its use beyond “just swapping a button img on rollover” (A very interesting article about that was written by Matthew MacDonald, read it here).

From ES2015 the standardization process started behaving as a living standard hence not tied to structured cuts but by an release based on continuous consensus and progressive adoption. In order to keep the pace, several improvements were required under the hood to keep it stable and scalable. Browsers will then adopt the new features based at their own pace, which left on the engineering side the responsibility for maintaining the backward compatibility, what led to an extensive growth of techniques such as polyfilling and transpiling

Tons of publications can be found online comparing both standards; you can read them online. I’d suggest to start with clean unbiased documents such as the ecma-262 5.1 and ecma-262 6.0 … but some find that too tedious :D … you can check also this ECMAScript 6 — New Features: Overview & Comparison by Ralf S. Engelschall which I find very interesting, or jump into the excellent You Don’t Know JS book series by Kyle Simpson, especially on the dedicated book ES6 & Beyond by Kyle Simpson

My summary is:

Why are we using ES6 in this course?

Essentially because even though you will still work with legacy pre-ES6 code, hopefully you will grow as engineers on a post-ES6 world. Secondly because it’s easier to understand and work with JavaScript as a general purpose language using ES6 rather than ES5 and most of the examples you’ll find online will be presented that way.

After ES6?

Well, by the time being we’re on the ES2019 version … though funny they still use a their URI with the ordinal version ( see the link ) instead of the year-based … ¯\(ツ)/¯ … and the features included are following a 4-stages revision flow described on the Technical Committee 39 (aka TC39) web site

Initial workspace setup

  1. Install Node.js
  2. Install VS Code
  3. Add the following extensions to VS Code
    1. CodeRunner
    2. EsLint
    3. Debugger for Chrome
  4. Introduction to NPM