JS, ES, TS, Flow, Dart. На чем мы пишем?

В современном мире Web-разработки существует множество всевозможных понятий и терминов. Не являются исключением и языки программирования. Начинающему Frontend-разработчику, часто, трудно разобраться в многообразии технологий, а иногда, не может точно идентицировать, на чем он пишет.

В этой статье мы будем разбираться с Frontend-языками. Что они из себя представляют и какой выбрать.

JavaScript

Начнем со всем известного языка JavaScript. Язык впервые появился в 1996 благодаря Брендану Эйху из компании Netscape, реализовавшему его в одноименном браузере. Изначально, язык назывался Mocha, позже был переименован в LiveScript, но в итоге, обрел своё нынешнее название - JavaScript. В том же году свет увидел и прямой аналог от компании Microsoft под названием JScript. JScript не получил широкого распространения и полностью ушел на работу в рамках платформы .NET (теперь называется JScript.NET). А вот JavaScript, наоборот, пошел в массы.

В ноябре 1996-го Netscape анонсировал митинг с ECMA International, организацией, занимающейся стандартизацией, с целью разработать стандарт языка.

В 1997 появилась первая редакция спецификации ECMA-262. На генеральной ассамблее ECMA в июне было опубликовано сразу несколько редакций языка. Между организациями-участниками возник спор по поводу названия языка, особенно жаркие баталии состоялись между Netscape и Microsoft. В качестве компромиссного варианта, участники сошлись на названии "ECMAScript". Спустя годы, Эйх говорил, что название "ECMAScript" ассоциируется с кожным заболеванием (Eczema).

В 1998-м компания Netscape полностью привела языка в соответствие спецификации (версия JavaScript 1.3).

ECMAScript

Годы шли, спецификация ECMA-262 развивалась, вместе с ней развивался и язык JavaScript. Так продолжалось до 2009-го, в котором вышла 5-я редакция спецификации. Предыдущая опубликованная, на тот момент, версия была 3.1. Версия 4 так и не была выпущена в силу слишком масштабных изменений. Релиз 4-ой версии планировался на октябрь 2008-ого. В редакции были предложены классы, модули, генераторы и многое другое. Она могла бы стать первый серьезным изменением языка с 1999-го года. Однако, в августе 2008-го редакцию вернули в разработку и включили в проект под кодовым названием ECMAScript Harmony, позже, уже в 2015-м ставшим 6-ой редакцией ECMAScript.

ES6 - ECMAScript2015

6-ю редакцию ECMAScript мы знаем под аббревиатурой ES6. Чуть позже, стандарт был переименован в ECMAScript2015. Так же, иногда, эту версию называют ECMAScript Harmony по её кодовому названию.

Именно с этой версии принято выделять понятие ECMAScript (ES). Здесь появились классы, модули, let, const, итераторы и цикл for..of, генераторы (по аналогии с языком Python).

До сих пор не все браузеры полностью реализуют стандарт ECMAScript Harmony, поэтому, как правило, в коммерческой разработке, код под этим стандартом в чистом виде не поставляют, а предварительно преобразуют (транспилируют) в старый ECMAScript 5, который нативно поддерживают все современные браузеры. Таким образом, большинство ES-кода, после транспиляции, фактически, является классическим JavaScript (ES5). В web-разработке существует понятие "синтаксический сахар", которое означает, что некоторый код (в нашем случае, код ES), который мы пишем, на самом деле, позже будет автоматически заменен на другие, более сложные, но нативные конструкции.

Далее, ежегодно и по сей день публикуется новая редакция ECMAScript. На момент написания существуют следующие версии.

ES7 - ECMAScript2016

Блочная область видимости, деструкция, оператор ** (аналог Math.pow, но проще синтаксис), ключевые слова async и await (как заготовка для следующего ES8), прототипный метод Array.prototype.includes.

ES8 - ECMAScript2017

Object.values, Object.entries, Object.getOwnPropertyDescriptors, async/await (в генераторах и промисах) и некоторые дополнительные фичи по concurrency.

ES9 - ECMAScript2018

spread/rest оператор (...), асинхронные итерации, Promise.prototype.finally и некоторые дополнения в RegExp.

ES10 - ECMAScript2019

Array.prototype.flat, Array.prototype.flatMap, некоторые изменения в Array.prototype.sort(тепер метод гарантирует, что элементы с одинаковым весом никогда не меняют свою исходную позицию относительно друг-друга) и Object.fromEntries.

ES11 - ECMAScript2020

Впервые появился тип BigInt для работы с большими числами, а так же объект globalThis и nullish coalescing (оператор ??).

ES12 - ECMAScript2021

У строк появился метод replaceAll, так же появились Promise.any, AggregateError (новый тип ошибки, представляющий сразу несколько ошибок в одной), логические присваивания (??=, &&=, ||=), WeakRef и FinalizationRegistry (об этом, может быть, в отдельной статье), разделители числовых разрядов (теперь можно указывать числа как 1_000_000), улучшенный алгоритм Array.prototype.sort.

ES13 - ECMAScript2022

await теперь можно указать сразу на весь модуль, public и private поля и методы класса (как внутренние, так и статические), статические блоки внутри класса, конструкция #x in obj (проверяет наличие приватного поля в объекте), индексируемые подстроки в RegExp, поле cause в Error, метод at в String, Array и TypedArray, Object.hasOwn (альтернатива Object.prototype.hasOwnProperty).

ES14 - ECMAScript2023

Методы toSorted, toReversed, with, findLast, findLastIndex в Array.prototype и TypedArray.prototype. Так же, в Array.prototype добавлен toSpliced. Комментарий #! (шебанг) для исполняемых файлов-скриптов. Разрешено использовать Symbols в weak collections.

ES.Next

Динамическое название будущей, еще не опубликованной редакции. Сюда входят изменения с завершенным предложение (прошедшие стадию 4).

TypeScript

Язык от компании Microsoft. Как и в случае с ES, фактически, язык является синтаксическим сахаром и, в отличие от ES, не существует браузеров, которые полностью или частично поддерживали бы этот синтаксис. Перед исполнением язык требуется скомпилировать, т.е. преобразовать в классический JavaScript (ES5).

Обусловлено это тем, что язык является строго типизированным и осуществляет проверку типов, как раз на этапе компиляции, т.е. еще до запуска на исполнение.

Сам языка родился в недрах компании Microsoft для решения их собственных насущных проблем. Функциональный нестрого типизированный язык плохо подходил для работы над большими проектами с большими командами. Microsoft потратил два год на разработку внутреннего суперсета поверх JavaScript.

В основу TypeScript легли, как раз, идеи ECMAScript Harmony, которые, на тот момент, еще только обсуждались. В частности, крайне перспективной выглядела идея внедрения классов, что коррелировало с другими популярными языками программирования.

В 2012 состоялся публичный релиз TypeScript. Язык получил ободрение общественности, однако, существующие редакторы кода еще не поддерживали прекомпиляцию и проверку типизации TypeScript, что не могло не расстраивать. Только спустя еще два года, в 2014, Microsoft опубликовал версию TypeScript 1.0 и встроил его в свою IDE Visual Studio 2013.

На сегодняшний день, язык имеет огромную популярность и является стандартом во многих компаниях.

Flow

В отличие от всех перечисленных выше, Flow языком программирования не является (не путайте с учебным языком FLOW). По свой сути, Flow - это библиотека от компании Facebook, позволяющая добавить проверку типов к традиционному JavaScript - коду. В основу, как и в случае с TypeScript легли идеи и предложения ECMAScript Harmony.

Синтаксически, Flow во многом похож на TypeScript, но некоторый конструкции упрощены или вовсе отсутствуют в силу того, что Flow предварительно не компилируется, как это делает TypeScript. Вместо этого, он осуществляет анализ потока данных и на основе этого осуществляет проверку типов. Собственно, за это он и получил свое название (Flow - поток).

Flow не так популярен, как TypesScript и ES. Компания Facebook разработала его в 2014-м году в противовес TypeScript и использует для свое внутренней разработки. Известность Flow получил благодаря другой популярной библиотеке Facebook - React, исходный код которой написан с применением Flow. Как правило, именно в паре с React его, чаще всего и используют. Однако, все же, даже в React-среде подавляющее большинство разработчиков отдает предпочтение ES или TypeScript.

Dart

Это язык стоит немного в стороне от всех остальных, в виду того, что язык является полностью самостоятельным (т.е. не является синтаксическим сахаром над JavaScript) и призван стать альтернативой традиционному JavaScript. Разработкой занимается компания Google с 2011-го года. Первая стабильная версия появилась в 2013, а в 2014 ECMA одобрила стандарт ECMA-408. Последняя, на сегодняшний день, 4-я редакция стандарта датируется декабрем 2015.

Не смотря на амбициозные планы и возможности IT-гиганта, языка медленно набирает популярность. Даже в самом Google язык не используется широко, частично, ввиду того, что нативная поддержка языка пока возможна, в основном, только в рамках браузера Google Chrome. В целях кроссплатформенности Google разработала компилятор dart2js, позволяющий преобразовать код Dart в JavaScript, но и это пока не добивало языку популярности. Ведь в случае компиляции теряется все преимущества языка перед JavaScript.

Однако, язык остается в поле зрения сообщества, будем следить за его развитием.

Итог

Резюмируя все вышесказанное, в мире Frontend-разработки можно выделить следующие понятия

• JavaScript (он же ES5) - традиционный язык программирования. Практически весь исполняемый Frontend-код так или иначе приводится именно
• ES (6 - Next) - редакции стандарта ECMAScript начиная с 6-ой и далее. Частично или полностью поддерживаются JS-движками, но на практике, в большинстве случаев транспилируются (приводятся к стандарту ES5), такой подход называют "синтаксическим сахаром"
• TypeScript - строготипизированный язык. Имеет свой синтаксис, но старается придерживаться спецификации ECMAScript. Имеет большое количество преимуществ перед классическим JavaScript, но самостоятельно исполняться не может, требует предварительной компиляции в JavaScript или ES
• Flow - языком программирования не является. Это способ добавить механизм анализа типов в обычный JavaScript
• Dart - альтернативный полноценный язык программирования. Может исполняться самостоятельно на совместимом клиенте (пока из таких только Google Chrome), так же может быть преобразован в обычный JavaScript

Мои телеграмм-каналы:

English version: https://blog.frontend-almanac.com/E-2o_G70gnp