JS, ES, TS, Flow, Dart. What are we writing on?

In the modern world of Web development, there are many different concepts and terms. Programming languages are no exception. It is often difficult for a newbie Frontend developer to understand the variety of technologies, and sometimes he cannot accurately identify what he is writing on.

In this article, we will deal with Frontend languages. What they are and which one to choose.

JavaScript

Let's start with the well-known JavaScript language. The language first appeared in 1996 thanks to Brendan Eich of Netscape, who implemented it in the browser of the same name. Initially, the language was called Mocha, later it was renamed LiveScript, but eventually it got its current name - JavaScript. In the same year, a direct analogue from Microsoft called JScript was also released. JScript has not been widely distributed and has completely gone to work within the framework of the platform.NET (now called JScript.NET ). But JavaScript, on the contrary, went to the masses.

In November 1996, Netscape announced a meeting with ECMA International, a standardization organization, to develop a language standard.

In 1997, the first edition of the ECMA-262 specification appeared. Several editions of the language were published at the ECMA General Assembly in June. A dispute arose between the participating organizations over the name of the language, especially heated battles took place between Netscape and Microsoft. As a compromise, the participants agreed on the name "ECMAScript". Years later, Eich said that the name "ECMAScript" is associated with a skin disease (Eczema).

In 1998, Netscape fully brought the language into compliance with the specification (JavaScript version 1.3).

ECMAScript

As the years passed, the ECMA-262 specification developed, and the JavaScript language developed with it. This continued until 2009, in which the 5th edition of the specification was released. The previous version published at that time was 3.1. Version 4 was never released due to too large-scale changes. The release of the 4th version was planned for October 2008. Classes, modules, generators and much more were offered in the editorial office. It could be the first major language change since 1999. However, in August 2008, the editorial office was returned to development and included in the project codenamed ECMAScript Harmony, which later became the 6th edition of ECMAScript in 2015.

ES6 - ECMAScript2015

We know the 6th edition of ECMAScript by the abbreviation ES6. A little later, the standard was renamed ECMAScript2015. Also, sometimes this version is called ECMAScript Harmony by its code name.

It is from this version that it is customary to single out the concept of ECMAScript (ES). Classes, modules, let, const, iterators, and the for..of loop, generators (by analogy with the Python language).

So far, not all browsers fully implement the ECMAScript Harmony standard, therefore, as a rule, in commercial development, the code under this standard is not delivered in its pure form, but pre-converted (transpiled) to the old ECMAScript 5, which is natively supported by all modern browsers. Thus, most of the ES code, after transpilation, is actually classic JavaScript (ES5). In web development, there is a concept of "syntactic sugar", which means that some code (in our case, ES code) that we write, in fact, will later be automatically replaced with other, more complex, but native constructs.

Further, a new edition of ECMAScript is published annually to this day. At the time of writing, the following versions exist.

ES7 - ECMAScript2016

Block scope, destruction, the ** operator (analogous to Math.pow, but simpler syntax), the keywords async and await (as a blank for the next ES8), the prototype method Array.prototype.includes.

ES8 - ECMAScript2017

Object.values, Object.entries, Object.getOwnPropertyDescriptors, async/await (in generators and promises) and some other additional features for concurrency.

ES9 - ECMAScript2018

spread/rest operator (...), async iterations, Promise.prototype.finally and some additions to RegExp.

ES10 - ECMAScript2019

Array.prototype.flat, Array.prototype.flatMap, some changed in Array.prototype.sort(now the method guarantees that elements with the same weight never change their starting position relative to each other) and Object.fromEntries.

ES11 - ECMAScript2020

For the first time, the BigInt type appeared for working with large numbers, as well as the globalThis object and nullish coalescing (operator ??).

ES12 - ECMAScript2021

Strings now have a replaceAll method, also appeared Promise.any, AggregateError (a new type of error that represents several errors in one at once), logical assignments (??=, &&=, ||=), WeakRef and FinalizationRegistry (maybe in a separate article), numeric digit separators (now you can specify numbers as 1_000_000), improved Array.prototype.sort algorithm.

ES13 - ECMAScript2022

await can now be specified for the entire module, public and private fields and methods of the class (both internal and static), static blocks inside the class, the #x in obj construction (checks for the presence of a private field in the object), indexed substrings in RegExp, the cause field in Error, the at method in String, Array and TypedArray, Object.hasOwn (an alternative to Object.prototype.hasOwnProperty).

ES14 - ECMAScript2023

The toSorted, toReversed, with, findLast, findLastIndex methods in Array.prototype and TypedArray.prototype. toSpliced has also been added to Array.prototype. Comment #! (shebang) for executable script files. It is allowed to use Symbols in week collections.

ES.Next

The dynamic name of the future, not yet published edition. This includes changes with a completed sentence (past stage 4).

TypeScript

The language is from Microsoft. As with ES, in fact, the language is syntactic sugar and, unlike ES, there are no browsers that fully or partially support this syntax. Before execution, the language must be compiled, i.e. converted to classic JavaScript (ES5).

This is due to the fact that the language is strictly typed and performs type checking, just at the compilation stage, i.e. even before it is launched for execution.

The language itself was born in the bowels of Microsoft to solve their own pressing problems. A functional, loosely typed language was not well suited for working on large projects with large teams. Microsoft spent two years developing an internal superset on top of JavaScript.

TypeScript was based on the ideas of ECMAScript Harmony, which, at that time, were still being discussed. In particular, the idea of introducing classes looked extremely promising, which correlated with other popular programming languages.

TypeScript was publicly released in 2012. The language received public encouragement, however, existing code editors did not yet support precompilation and TypeScript type checking, which was frustrating. Only two more years later, in 2014, Microsoft published TypeScript 1.0 and integrated it into its Visual Studio 2013 IDE.

Today, the language is very popular and is the standard in many companies.

Flow

Unlike all of the above, Flow is not a programming language (not to be confused with the FLOW educational language). At its core, Flow is a library from Facebook that allows you to add type checking to traditional JavaScript code. As in the case of TypeScript, the ideas and suggestions of ECMAScript Harmony formed the basis.

Syntactically, Flow is similar to TypeScript in many ways, but some constructions are simplified or completely absent due to the fact that Flow is not pre-compiled, as TypeScript does. Instead, it analyzes the data flow and, based on this, performs type checking. Actually, this is why it got its name.

Flow is not as popular as TypesScript and ES. Facebook developed it in 2014 as opposed to TypeScript and uses it for its internal development. Flow became famous thanks to another popular Facebook library, React, the source code of which is written using Flow. As a rule, it is paired with React that it is most often used. However, even in a React area, the vast majority of developers prefer ES or TypeScript.

Dart

This language stands a little apart from all the others, since the language is completely independent (i.e. it is not syntactic sugar over JavaScript) and is intended to become an alternative to traditional JavaScript. Google has been developing it since 2011. The first stable version appeared in 2013, and in 2014 ECMA approved the ECMA-408 standard. The latest, to date, 4th edition of the standard is dated by December 2015.

Despite the ambitious plans and capabilities of the IT giant, the language is slowly gaining popularity. Even in Google itself, the language is not widely used, partly due to the fact that native language support is still possible, mainly only within the framework of the Google Chrome browser. For cross-platform purposes, Google has developed the dart2js compiler, which allows you to convert Dart code to JavaScript, but this has not yet achieved popularity for the language. After all, in the case of compilation, all the advantages of the language over JavaScript are lost.

However, the language remains in the community's field of view, and we will monitor its development.

Итог

Summarizing all of the above, the following concepts can be distinguished in the world of Frontend development

• JavaScript (aka ES5) - is a traditional programming language. Almost the entire executable Frontend code is given one way or another exactly
• ES (6 - Next) - editions of the ECMAScript standard from the 6th onwards. Partially or fully supported by JS engines, but in practice, in most cases they are transpiled (brought to the ES5 standard), this approach is called "syntactic sugar"
• TypeScript - a strongly typed language. It has its own syntax, but tries to adhere to the ECMAScript specification. It has a lot of advantages over classic JavaScript, but it cannot be executed independently, it requires pre-compilation into JavaScript or ES
• Flow - It is not a programming language. This is a way to add a type analysis engine to regular JavaScript
• Dart - an alternative full-fledged programming language. It can be executed independently on a compatible client (so far only Google Chrome is one of these), it can also be converted to regular JavaScript

My telegram channels:

Русская версия: https://blog.frontend-almanac.ru/M_iq-GEkNTR