ECMAScript
Releases Explained

... и назад

gardev.com/ecmascript-explained-2019

#КОЙ

• Георги Гърдев
• georgi@gardev.com
• http://gardev.com
• GeorgeSG
• georgesg92

Защо говоря за ECMAScript?

... и исках да разбера повече.

Тук съм, за да разкажа какво научих

и имаше ли смисъл от цялото нещо?

Agenda

1. ECMAScript - що е то и кратка история
2. ES2017 и ES2018
3. Бъдещето - release cycle
4. ES2019
5. ... и след това
6. Как да ползваме новите функционалности

Какво е ECMAScript?
стандарт

Каква е разликата с JavaScript?
имплементация / диалект

Други диалекти:

• TypeScript
• ActionScript
• JScript
• V8 engine
• Node.JS

ECMAscript

Ecma International is an industry association founded in 1961, dedicated to the standardization of information and communication systems.

Ecma дефинират доста стандарти

От ECMA-1 до ECMA-417

История

на ECMA-262

TC39

Technical Committee 39

Github Team

2015 - ECMAScript 6

TC39 решава да започнат годишни release-и

ES6 e преименуван на ECMAScript 2015

ECMAScript 2016

ECMAScript 2017

ECMAScript 2018

ECMAScript 2019

ECMAScript 2017

ECMA-262, 8th edition

String padding (padStart и padEnd)

Достъпно във всички модерни браузъри

Object.values()

Достъпно във всички модерни браузъри

Object.entries()

Достъпно във всички модерни браузъри

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()

Достъпно във всички модерни браузъри

Запетая след последен параметър на функция

Достъпно във всички модерни браузъри

Shared memory and atomics

SharedArrayBuffer

Shared memory and atomics

Atomics

async / await

await работи и с Promise.all()

Имплементирано е подобно на генератор

Достъпно във всички модерни браузъри

ECMAScript 2018

Regexes!

Look behind

Positive (?<=)

Negative (?<!)

Няма polyfill

Unicode Escapes

Named Capture Groups

(?<name>)

преди

сега

\s (dotAll) Flag

• "." match-ва line terminators
• \s идва от singleline

Всички нововъедения за Regex-и
са достъпни само в Chrome :)

Rest Operator за деконструиране на обекти

Spread Operator - Object Literals

Не е достъпно в Edge

Пример: Spread Operator за попълване на стойности по подразбиране

Promise.prototype.finally

FINALLY!

Достъпно във всички модерни браузъри (... без Edge 17)

Asynchronous Iteration

▲ това не работи

▼ това работи

Не е достъпно в Edge

Asynchronous Iteration

Async generator functions

Release Cycle

... или как да избегнем ES4 2.0

Proposals

Strawman

Stage 0

• Трябва да се регистрирате като TC39 ECMAScript Contributor
• Предложението трябва да бъде разгледано на среща на TC39

Proposal

Stage 1

• Трябва да бъде идентифициран "Champion", отговорен за предложението
• Трябва да има примери, polyfill, high-level API и дискусия на алгоритъма и потенциални проблеми
• Stage 1 означава, че TC39 има желание да разгледа предложението
• Очаква се, че може да има големи промени след Stage 1

Draft

Stage 2

• Първа версия на формална спецификация
• Експериментална имплементация
• Очаква се, че няма големи промени след Stage 2

Candidate

Stage 3

• Предложението е близо до финална форма
• Спецификацията е завършена и минала формално ревю
• Има поне 2 имплементации
• Очаква обратна връзка от имплементациите
• Промени са допустими само при критични проблеми

Finished

Stage 4

• Има пълни тестове
• Две имплементации покриват всички тестове
• Предложението ще бъде включено в следващата версия на стандарта

В деня на финализиране на нова ECMAScript версия всички предложения в Stage 4 стават част от нея.

• Приети предложения
• Активни предложения
• Stage 0 предложения
• Срещи на TC39
• Meeting Minutes

ECMAScript 2019

Object.fromEntries()

Обратното на Object.entries()

• При еднакви key-ове, последния печели
• Ако key-ът не е string или symbol, ще бъде конвертиран към string

Пример: _.pick() имплементация с Object.fromEntries()

String.prototype.{trimStart,trimEnd}

optional catch binding

Array.prototype.{flat,flatMap}

Array.prototype.flat

#SmooshGate

• Array.prototype.flat e трябвало да се казва flatten
• ... и в Firefox Nightly версия сме счупили половината интернет
• MooTools дефинира Array.prototype.flatten

На хоризонта - какво идва след ES2019

Stage 3

proposal-dynamic-import

proposal-bigint

• Нов примитивен тип за репрезентация на числа над 2^53
• Литерал: 9007199254740991n

Достъпно в Chromium и Chrome

Stage 2

proposal-decorators

Native @decorators

Има polyfill за babel

proposal-temporal

Нов стандартен модул за работа с часове и дати

Има polyfill за babel

Kакво и как да ползваме?

ECMAScript 2015 (ES6) се поддържа от всички браузъри без Internet Explorer

• (May 19, 2017) You might not need to transpile your javascript
• IE вече не се поддържа. Но ще получава Security Updates до 2025
• (Според статията) през 2017-та IE има 3.24% пазарен дял

ECMAScript 2017 е покрит от всички модерни браузъри

Не броя IE за модерен браузър

MVPs

• 2ality.com
• kangax.github.io/compat-table
• caniuse.com

babel

@babel/preset-es2016
@babel/preset-es2017

babel-preset-next

@babel/preset-stage-0
@babel/preset-stage-3

babel + core-js

@babel/preset-env

• "targets": "> 0.25%, not dead"  (browserlist spec)
• "useBuiltIns": "usage" | "entry" // core-js

@babel/polyfill

@babel/plugin-transform-dotall-regex

pls no

Заключение

• Историята на ECMAScript е интересна и обяснява доста неща
• В началото на всяка година може да видите кои предложения ще са част от следващата версия на стандарта (Stage 4)
• Любопитно е да се разглеждат и предложенията, които са в Stage 1-3

Q&A

Sources