Пробуем ES2015/ES6 в действии


javascript ES6/ES2015 babel compilers

Буквально на днях (17 июня) свершилось то, чего ждали почти 6 лет в мире Javascript. Генеральное собрание Ecma International официально одобрило стандарт ECMA-262 6 версии, который является спецификацией языка ECMAScript 6 (ES6), который так же называют ECMAScript 2015. Предыдущий стандарт языка Javascript был одобрен в 2009 году (ES5).

Теперь дело за браузерами, которые начнут усиленно внедрять спецификацию языка в свои движки. Следить за поддержкой ES2015 удобно на сайте kangax.github.io/compat-table/es6.

Некоторые термины:

Немного истории

Архив стандарта ECMA-262 можно посмотреть на официальном сайте.

Обзор нововведений в ECMAScript 6:

В дополненение к списку хочу упомянуть хороший сайт es6-features.org, поддерживаемый @engelschall, на котором приводятся обзор и сравнение новых фич из ES6 c ES5.

А пока разработчики браузеров пишут свои движки с поддержкой ES2015, мы можем попробовать новый стандарт в действии уже сейчас. Например, сейчас большинство возможностей ES2015 в Chrome скрыто под флагом chrome://flags/#enable-javascript-harmony. Включив это свойство и перезапустив браузер, можно уже сейчас использовать следующие функции ES2015.

У @addyosmani есть замечательный репозиторий, где он собрал коллекцию es6-tools. Первым в списке стоит Babel. Давайте разберем его подробнее и узнаем, как с помощью него можно уже сейчас писать код на ES6.

Babel

Babel - это JavaScript транскомпилятор. Если кратко, то транскомпилятор отличается от компилятора тем, что он переводит код из новой версии в более старый - стабильный. Подробнее про транскомпиляторы можно почитать тут. Как написано на их сайте:

By default, Babel ships with a set of ES2015 syntax transformers. These allow you to use new syntax, right now without waiting for browser support.

и это то, что нам нужно! Поиграться с этим транскомпилятором, не устанавливая его, можно прямо на сайте babeljs.io/repl/. Если мы хотим написать что-то серьезное, то нам нужно установить и начать использовать этот транскомпилятор.

Пишем свой первый класс на ES2015

Используем сервис codepen.io и включим в настройках поддержку Babel. В своем примере я продемонстрировал новые возможности ES2015: классы, их наследование и шаблоны строк.

// Базовый класс Person
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  about() {
     console.log(`${this.name} is ${this.age} years old`);
  }
}

var jack = new Person("Jack", "50"); jack.about();

// Класс Son - наследник class Son extends Person { constructor(name, age) { super(name, age); this.son = true; } }

var john = new Son("John", "25"); john.about(); john.son;

See the Pen yNpWYY by Alex Filatov (@greybax) on CodePen.

Ссылки