ES6 и за его пределами. Глава 1: ES? Настоящее и Будущее

Original author: Kyle Simpson и другие
  • Translation


Хочу уделить внимание книге, которую написал Kyle Simpson — «ES6 и за его пределами» (англ. «ES6 & Beyond»). Конечно, вклад внес не только он, а множество замечательных контрибьюторов. Благодарности.
На данный момент имеет статус — завершенный черновик.

Оглавление:
  • Глава 1: ES? Настоящее & Будущее
  • Глава 2: Синтаксис
  • Глава 3: Организация
  • Глава 4: Асинхронное управление потоком
  • Глава 5: Коллекции
  • Глава 6: API Дополнения
  • Глава 7: Мета программирование
  • Глава 8: За пределами ES6

Перед тем как начать читать эту книгу, я полагаю, что вы уже обладаете твердым знанием JavaScript вплоть до самого популярного стандарта (на момент написание этой книги), который обычно называют ES5 (технически это ES5.1). Здесь мы будем говорить о предстоящем стандарте ES6 и попытаемся понять дальнейшее развитие JS.

ES6 — это не просто скромный набор нового API добавленного к языку, как это было с ES5. Он включает в себя уйму новых синтаксических форм, понимание которых может занять время, перед тем как они войдут в привычку. Так же появилось несколько новых организационных форм и новое API с множеством помощников для уже существующих типов данных.

ES6 — это радикальный скачек вперед. Даже если вы думаете, что знаете JS (ES5), то ES6 полон новых вещей, о которых вам еще только предстоит узнать. Так что будьте готовы! Эта книга будет освещать все основные темы ES6, которые помогут вам побыстрее освоится и даже больше — заглянуть в будущее, чтобы быть готовым к новым изменениям.

Внимание: весь код, приведенный в данной книге, требует окружения ES6.

Версирование


JavaScript официально называется «ECMAScript» (аббревиатура «ES») и до недавнего времени версия была целым числом (то есть «5», «5-е издание»).

Ранние версии ES1 и ES2 были не так широко имплементированы, но ES3 был первым широко распространенным основанием для JavaScript. ES3 является стандартом JavaScript для таких браузеров, как IE6-8, и старых мобильных браузеров систем Android 2.x. ES4 по «политическим» причинам мы рассматривать не будем. Данный стандарт был отброшен.

В 2009, ES5 был официально закончен (позже ES5.1 в 2011), и стал широко распространенным стандартом для целой кучи браузеров, таких как Firefox, Chrome, Opera, Safari и многих других.

В ожидании следующей версии JS(в 2013, потом в 2014, а затем уже и в 2015), самой обсуждаемой новой меткой была — ES6.
Однако, позже в ленте ES6 спецификации, всплыли предложения, что у модели версирования, в основании должна быть годовая отметка. Например ES2016(ES7), означая, что стандарт был завершен в конце 2016 года. Многие с этим не согласны и в любом случае переименовывать ES6 уже поздно. Но как факт, подобная версионная модель может быть.

Так же благодаря простому наблюдению, мы можем сказать, что эволюция JS идет более быстрым темпом, чем ежегодное версирование. Как только идея для нового стандарта начинает прогрессировать в дискуссиях, браузеры начинают прототипировать особенности (функции, API ) и раньше адаптировать их под эксперименты с кодом (всем нам знакомы экспериментальные флаги).

Обычно перед тем как ставится официальный штамп одобрения, особенности языка де факто проходят этап стандартизации благодаря раннему прототипированию. Следовательно стоит говорить о будущей модели версирования JS которая будет основываться на новых пред-функциях нежели на годовой модели или модели пред-годовой-коллекции основных функций, которая используется на данный момент.

Я введу к тому, что метки версий наподобие ES6 перестают быть важными, и JavaScript должен быть своего рода вечнозеленым живым стандартом. Лучший способ побороть метки, это перестать думать, что ваш код зависит от «ES6 -версии» в пользу «feature-by-feature» для дальнейшей поддержки.

Транспилинг


Перед разработчиками которые хотят использовать новоиспеченные особенности языка, возникает проблема поддержки приложений/сайтов в старых браузерах которые их не поддерживают.
Основным мышлением было ожидать принятие ES5 до тех пор, пока большинство или даже все окружения не выпадут из спектра поддержки. Как результат, многие с недавних пор просто начали самостоятельно реализовывать вещи, такие как, например, strict mode, прижившийся в ES5 еще много лет назад.

Многие согласятся с тем, что подобный подход ожидания и протаптывание спецификации губителен для экосистемы JS. Те люди, которые ответственны за развитие языка, желают, чтобы разработчики использовали новые особенности языка и его паттерны как только они были стабилизированы в спецификации; браузеры имеют шанс их реализовать.

Так как же мы решаем это небольшое противоречие? Ответ — тулинг, а именно — эта техника называется транспилинг (трансформация + компиляция).

Например, рассмотрим сокращенное объявление параметра (Объектные литералы мы рассмотрим в Главе 2). Вот как это выглядит в ES6:

var foo = [1,2,3];

var obj = {
    foo     // ввиду имеется `foo: foo`
};

obj.foo;    // [1,2,3]

А вот как это будет выглядеть после транспилинга:
var foo = [1,2,3];

var obj = {
    foo: foo
};

obj.foo;    // [1,2,3]

Это не значительная, но приятная трансформация, которая позволяет нам сократить foo: foo в описании объектного литерала. Используя только foo, если имена одинаковые.

Транспилинг обычно занимает в процессе разработки место на ровне с линтингом, минификацией и т.д.

Шимы/Полифилы


Не всем новым возможностям ES6 необходим транспилинг. Полифилы (шимы) — это такой паттерн, определяющий эквивалентное поведение нового окружения в более старом, разумеется, когда это возможно. Синтаксис не может быть полифильным, но API может.

Например, Object.is(..) является новой утилитой проверки строгой эквивалентности двух значений, но без исключений, которые имеет === для значений NaN и -0. Полифил метода Object.is(..) довольно прост:

if (!Object.is) {
    Object.is = function(v1, v2) {
        // test for `-0`
        if (v1 === 0 && v2 === 0) {
            return 1 / v1 === 1 / v2;
        }
        // тест на значение `NaN`
        if (v1 !== v1) {
            return v2 !== v2;
        }
        // что либо другое
        return v1 === v2;
    };
}

Обратите внимание на внешнею обертку вокруг полифила — if. Это важная деталь, которая означает, что сниппет определяется только для старого окружения, где данное API еще не реализовано. Достаточно редко вам придется переопределить уже существующие API.
Есть отличная коллекция шимов ES6, которая называется «ES6 Shims», которую вы можете использовать как часть вашего нового проекта.

Очевидно, что JS будет неизменно эволюционировать с браузерами, которые буду выкатывать новые возможности постепенно, нежели большими кусками. Поэтому наилучшая стратегия идти в ногу с обновлениями и эволюцией языка — это внедрять полифилы в ваш базовый код и добавить транспилинг в процесс разработки и, тем самым, привыкнуть к новой реальности.

Если вы решите держаться статуса-кво и просто ждать, пока все браузеры будут полностью поддерживать возможности языка, вы будете далеко позади. Вы рискуете пропустите те инновации, которые были изобретены для того, чтобы писать JavaScript более эффективно и надежно.

Рецензия


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

Неважно, какие метки получит будущий JavaScript, развитие языка будет на много быстрее, нежели это было прежде. Транспилинг и полифилы — важные инструменты, которые помогут вам идти в ногу с развитием и появлением новых возможностей.
  • +19
  • 34.2k
  • 8
Support the author
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 8

    +2
    Супер! Продолжайте.
      +1
      Небольшой спойлер, после которого мой мозг уже никогда не будет прежним.
      Warning: This ReferenceError from accessing too-early let-declared references is technically called a TDZ (temporal dead zone) error — you're accessing a variable that's been declared but not yet initialized.
      +3
      По теме могу порекомендовать блог 2ality (en), его автор довольно подробно пишет о новинках из ES6.
        +1
        Тот самый случай, когда оригинал читать понятнее (и приятнее), чем его перевод.
          –1
          Разумеется оригинал предпочтительней, особенно по технической литературе.
            +1
            Не согласен с вами. Чем оригинал лучше хорошего перевода? Это же пересказ на другом языке. Важно как знание языка, переводчиком, так и умение разъясняться, стиль письма.
        • UFO just landed and posted this here
            0
            Ну многие фичи реализованные нативно будут работать быстрее чем их полифилы на es5.

          Only users with full accounts can post comments. Log in, please.