es6 — уровень реализации и возможности использования —...
DESCRIPTION
Утверждение нового стандарта JavaScript не за горами, и мы должны быть готовы к изменениям, которые он принесёт в язык. Я расскажу об актуальном статусе реализации ES6, а также о том, как начать пользоваться нововведениями уже сейчас.TRANSCRIPT
![Page 1: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/1.jpg)
Я
ES6уровень реализации и возможности использования
Денис Тужик, Я.Субботник, Киев, 22.11.2014
ндекс
![Page 2: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/2.jpg)
ES6?!
• Let, Const
• Rest, Spread (...)
• Параметры по умолчанию
• Оптимизация хвостовой рекурсии
• Параллельное присваивание
• Улучшения встроенных объектов
• Улучшенный Юникод
• Модули
• Классы
• Итераторы
• Генераторы
• Символы
• Map + WeakMap
• Set + WeakSet
И это еще не всё!
2
![Page 3: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/3.jpg)
Поддержка
![Page 6: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/6.jpg)
Современные браузеры
• 19% — IE 11
• 25% — Safari 7.1, 8
• 57% — Chromium *
• 59% — Firefox 35
• 72% — IE Tech Preview *
* с флагами
6
![Page 7: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/7.jpg)
Node.js35% — c флагом --harmony
7
![Page 8: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/8.jpg)
Всё плохо?
![Page 9: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/9.jpg)
Не совсем ...
9
![Page 10: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/10.jpg)
TraceurПлюсы:• Весь в себе, не нуждается в полифилах
• Очень быстро можно начать использовать, подключив на страницу
• Есть плагины для Grunt, Gulp, Brocolli, Browserify
Минусы:• Производит нечитаемый код, но есть поддежка source maps
• Нуждается в рантайме для использования сгенерированного кода
10
![Page 11: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/11.jpg)
6to5Плюсы:• Генерирует простой и понятный для чтения код
• Не нуждается в рантайме
• Есть плагины для Grunt, Gulp, Brocolli, Browserify
Минусы:• Нельзя использовать на лету, подразумевает шаг препроцессинга
• Нет встроенных полифилов, их нужно подключать самостоятельно
11
![Page 12: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/12.jpg)
esnext
• Легкий рантайм
• Читабельный код, поддержка source maps
• Работает из коробки с Browserify browserify -t esnext index.js
• Есть плагины для Grunt, Gulp, Brocolli
12
![Page 13: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/13.jpg)
Не хочу использовать всё!
13
![Page 14: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/14.jpg)
МодулиИзолированно:• es6-module-transpiler
• Есть плагины для Grunt, Gulp, Brocolli
С зависимостями:• es6-module-loader
• systemjs
• jspm.io
14
![Page 15: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/15.jpg)
По отдельности
Let и Const
Параметры по умолчанию
Arrow функции
Генераторы
Регулярные выражения
Улучшения встроенных объектов
Ещё!
15
![Page 16: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/16.jpg)
Разработка
![Page 21: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/21.jpg)
JSCS
github.com/jscs-dev/node-jscs#--esnext
github.com/jscs-dev/node-jscs#esnext
Да!
21
![Page 24: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/24.jpg)
Песочницы
24
![Page 25: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/25.jpg)
Только ES6REPL — Traceur, 6to5, esnext• Показывает сгенерированный код
• Можно посмотреть на опции компилятора онлайн (Тraceur)
• Нельзя сохранять
ES6 Fiddle• Простой
• Есть небольшие примеры кода
• Можно сохранять, а также встраивать
25
![Page 26: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/26.jpg)
Общего назначенияTraceur• JS Bin
• Codepen
Без встроенной поддержки Traceur• JSFiddle
26
![Page 27: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/27.jpg)
Кто использует?
![Page 31: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/31.jpg)
Кто ещё?
• Lodash
• HTMLBars
• Ember extension
• Defs
Больше примеров!
31
![Page 32: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/32.jpg)
В заключение
![Page 33: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/33.jpg)
Так стоит ли использовать?Где не стоит:• Большие объемы кода на ES5/ES3 (сразу)
• Код, для которого критична производительность
• Код, для которого критичен размер
Где можно и нужно:• Изолированные модули
• Прототипы!
• Собственные библиотеки
33
![Page 34: ES6 — уровень реализации и возможности использования — Денис Тужик](https://reader033.vdocuments.site/reader033/viewer/2022052622/55937beb1a28abfb3a8b46f1/html5/thumbnails/34.jpg)
Будущее сейчаси оно прекрасно
34