пятница, 20 декабря 2013 г.

Используем EcmaScript 6 (Javascript) сейчас с Google Traceur Compiler

В декабре 2013 года должен таки выйти стандарт EcmaScript 6, согласно информации от TC39. До полноценной реализации браузерами стандарта еще далеко. Однако писать на последнем драфте ES6 (зная о потенциальных граблях совместимости в будущем) можно уже сейчас. В этом нам поможет Google Traceur Compiler. По-русски название переводится как трейсер. В терминах паркура - это тот, кто уже прошел обучение и имеет опыт и способность понять движения и прыжки, или в нашей области - понявший EcmaScript6 и объясняющий его другим на EcmaScript 5. 

NewImage

Есть несколько способов поиспользовать компилятор:

1) Можно пойти на REPL страницу, вставить туда код на ES6 и получить результат компиляции (что такое REPL).

2) Можно подключить traceur к вашей странице и компилировать код ES6 на лету (это будет неосознанно делать каждый, загружающий страницу в браузер и мягко говоря - это не самое оптимальное использование вычислительных ресурсов пользователей, хотя для использования с простыми примерами подойдет).

3) Так же можно воспользоваться offline компилятором traceur для node.js. Сначала необходимо установить node.js к себе на машину (или в облако). Далее ставим traceur командой sudo npm -g install traceur

1 bash 2013 12 19 23 57 06

Вообщем-то и все. Теперь мы можем создать ES6 файл и скомпилировать его в ES5. Для компиляции необходимо запустить команду:

./traceur --out out/filename.js filename.js

Однако рановато нам еще компилировать. Для начала нужно написать ES6 код. Я для разработки пользуюсь IntelliJ IDEA и вам рекомендую (JavaScript поддерживает Ultimate версия, или WebStorm, если вам от IDE нужен только Web).

В настройках IDE установим уровень Javascript – Harmony (кодовое имя ES6).

Preferences 2013 12 20 00 07 26

Напишем простейший пример просто для того, чтобы проверить, работает ли компилятор:

class HelloWorld {
    sayHello() { console.log('HelloWorld!'); }
}

var itsMyWorld = new HelloWorld();
itsMyWorld.sayHello();

Далее есть несколько путей. Можно просто собрать файл в терминале, встроенном в IntelliJ IDEA:

ES6Playground 2013 12 20 00 46 24

 или можно написать небольшую автоматизацию, чтобы иметь в IntelliJ IDEA пункт в контекстном меню, собирающий ES6 в ES5. Вот так выглядит простейший способ для сборки 1 файла исходника ES6 в 1 файл результата ES5:
 
Edit Tool 2013 12 20 00 57 40
 
Теперь в контекстном меню IntelliJ появилась возможность компиляции файла ES6 в ES5:
 
2013 12 20 00 59 09
 
Результат компиляции: 
var HelloWorld = function() {
  "use strict";
};
HelloWorld = ($traceurRuntime.createClass)(HelloWorld, {sayHello: function() {
    "use strict";
    console.log('HelloWorld!');
  }}, {});
var itsMyWorld = new HelloWorld();
itsMyWorld.sayHello();
Как мы видим - это уже нормальный ES5.
Используя параметр —out с traceur можно собирать в 1 es5 файл не только 1 файл es6, но и множество. Так же можно строить sourcemap
Таким образом уже сейчас можно учить ES6 и смотреть, как работает написанный код. И да, я знаю про TypeScript

5 комментариев:

  1. По-вашему, вот это:
    ($traceurRuntime.createClass)(HelloWorld, {sayHello: function() {"use strict";
    console.log('HelloWorld!');
    }}, {});
    - нормальный ES5?
    Интересно, можно его заставить сделать действительно нормальный код? В данном случае он выглядел бы примерно так:
    HelloWorld.prototype.sayHello = function() { "use strict";
    console.log('HelloWorld!');
    };

    ОтветитьУдалить
  2. Он генерирует корректно интерпретируемый код ES5. Задачи генерации читаемого кода не было, тк скоро поддержка ES6 придет во все браузеры и необходимость в генерации отпадет.

    ОтветитьУдалить
  3. Как насчет скорости, сгенеренный код не сильно тормозит?

    ОтветитьУдалить
  4. Performance is not great with JIT compilation, so be careful before writing real code with this tool.
    http://css.dzone.com/articles/future-javascript-today

    ОтветитьУдалить
  5. Странный всё-таки проект... По сути в его составе они реализовали парсер новой версии JS, что бы эффективно его транслировать, но получается, что закрыли его. Вместо того, что бы взять довольно популярную Esprima`у и немного доработать её, добавив поддержку фич ES6 к тем, которые в ней уже реализованы. В итоге получается ни себе ни людям - сама трансляция у них грязноватая (скрипт получается не самостоятельный, приходится дополнительно тащить ещё и их специальную библиотеку, что бы всё это работало), да и сами создатели признают, что в плане тюнинга производительности у них всё не очень, а что бы самому поправить эту косячность, нужно тратить силы и время на выковыривание парсера из этого проекта...

    ОтветитьУдалить