es6-use-today

К сожалению этот сервис съел все ссылки в моих слайдах.
Вот здесь можно посмотреть версию с рабочими ссылками:
http://dentuzhik.github.io/es6-use-today

Transcript

1. ESNext: Сколько можно ждать? (или как начать пользоваться уже сегодня)
2. http://bit.ly/1ru9A8z 2
3. ECMAScript •  Август 2014 — Список нововведений заморожен •  Октябрь 2014 — Последний черновик стандарта •  Cередина 2015 — Ожидаемая дата утверждения •  За прогрессом можно следить на: esdiscuss.org сейчас 3
4. Нововведения (некоторые)
5. Let и Const 5
6. Let // Ошибка: `x` не определена console.log(x); let x; // undefined console.log(x); if (true) { let z = 3; } // Ошибка: `z` не определена console.log(z); let y = 1; // Ошибка: `y` уже объявлена в текущей области видимости let y = 2; 6
7. Const // Ошибка: `x` не определена console.log(x); const x = 0; // Ошибка: объявление константы без значения const y; // Ошибка: попытка переопределения константы y = 1; 7
8. Числа 8
9. Числа // Двоичные 0b1001 === 9 // true 0B10010 === 18 // true // Восьмеричные 0o755 === 493 // true 0O451 === 297 // true // Шестнадцатеричные 0xFF === 255 // true 0X7C9D === 31901 // true Новые литералы 9
10. Числа // Исправленные isNaN(), isFinite() Number.isNaN(value) Number.isFinite(value) Number.MIN_SAFE_INTEGER // -2^53 + 1 Number.MAX_SAFE_INTEGER // 2^53 - 1 Number.isInteger(value) Number.isSafeInteger(value) Number.EPSILON // ≈ 2.22e-16 0.1 + 0.2 === 0.3 // false 0.3 - (0.1 + 0.2) < Number.EPSILON // true Улучшения конструктора 10
11. Объекты 11
12. Объекты ES5 var value = 42; var obj = { value: value, getValue: function() { return this.value; } }; obj['foo' + 'bar'] = value; ES6 var value = 42; var obj = { value, getValue() { return this.value; }, ['foo' + 'bar']: value }; Сокращенная нотация 12
13. Объекты // Исправленное === Object.is(NaN, NaN); // true Object.is(-0, 0); // false // Присваивает собственные перечисляемые свойства Object.assign({ foo: 'foo' }, { foo: 'bar'}, { foo: 'baz' }); // { foo: 'baz' } Улучшения конструктора 13
14. Объекты // Использует геттеры let bar = { get foo() { return 'bar'; } }; Object.assign({}, foo); // { foo: 'bar' } Улучшения конструктора 14
15. Объекты // И сеттеры let baz = { _foo: 'foo', set foo(val) { this._foo = val + 'baz'; } }; Object.assign(baz, { foo: 'bar' }); // { _foo: 'barbaz', ... } Улучшения конструктора 15
16. Функции 16
17. Функции Аналогичны анонимным функциям с bind(this) let empty = () => {}; let identify = x => x; // Объект необходимо заворачивать в () let objectify = value => ({ key: value }); let squares = [1, 2, 3].map(x => x * x); let odds = [1, 2, 3].filter(x => { let isOdd = x % 2 === 0; return isOdd; }); Arrow функции => 17
18. Функции •  Упрощенный синтаксис •  Полезны в местах где меняется контекст: таймеры, обработчики событий •   this привязан лексически, невозможно использовать в качестве конструктора •  Функции анонимны, нет информации для отладки Arrow функции 18
19. Функции || function log(message) { message = message || 'Default message'; console.log(message); } Параметры по умолчанию 19
20. Функции typeof function substr(str, start, count) { start = (typeof start !== 'undefined') ? start : 0; count = (typeof count !== 'undefined') ? count : str.length - start; return str.slice(start, end); } Параметры по умолчанию 20
21. Функции arguments function substr(str, start, count) { var len = arguments.length; start = (len > 1) ? start : 0; count = (len > 2) ? count : str.length - start; return str.slice(start, end); } Параметры по умолчанию 21
22. Параметры по умолчанию ES6 function log(message = 'Default message') { console.log(message); } function substr(str, start = 0, count = str.length - start) { return str.substr(start, count); } 22
23. Функции ES5 function f(head) { var tail = Array.prototype.slice.call(arguments, f.length); return tail; } ES6 function f(head, ...tail) { return tail; } f(1, 2, 3); // [2, 3] f(1); // [] Rest параметры 23
24. Функции function sum(...numbers) { return numbers.reduce(function(memo, n) { return memo + n; }); } console.log(sum(1, 2, 3, 4, 5)); // 15 Rest параметры 24
25. Функции Обычная рекурсия function factorial(n) { if (n === 0) return 1; // Результат рекурсивного вызова модифицируется return n * factorial(n - 1); } console.log(factorial(100000)); Оптимизация хвостовой рекурсии 25
26. Функции Стек вызовов call factorial(3) // Фрэйм 1 call factorial(2) // Фрэйм 2 call factorial(1) // Фрэйм 3 call factorial(0) // Фрэйм 4 и т.д. return 6 return 6 return 6 return 6 Оптимизация хвостовой рекурсии 26
27. Функции Оптимизация хвостовой рекурсии 27
28. Функции Хвостовая рекурсия function tailFactorial(n, acc = 1) { if (n === 0) return acc; // Возвращается чистый вызов рекурсии return tailFactorial(n - 1, n * acc); } // C оптимизацией хвостовой рекурсии ошибки не будет console.log(tailFactorial(100000)); Оптимизация хвостовой рекурсии 28
29. Функции Стек вызовов call tailFactorial(3, 1) // Фрэйм 1 replace args with (2, 3) jump tailFactorial // Использовать фрэйм 1 replace args with (1, 6) jump tailFactorial // Использовать фрэйм 1 replace args with (0, 6) jump tailFactorial // Использовать фрэйм 1 Оптимизация хвостовой рекурсии 29
30. Строки 30
31. Строки String.prototype.repeat(value) String.prototype.startsWith(value) String.prototype.endsWith(value) String.prototype.contains(value) Улучшения прототипа 31
32. Строки Простой пример let evt = { name: 'WSD', desc: 'awesome' }; console.log(`${evt.name} is ${evt.desc}`); // WSD is awesome Многострочные литералы let multiline = `This string is mutiline actually`; Template literals ` 32
33. Строки Сигнатура тега function tag(strings, ...values) { // Преобразует строки // Преобразует значения // Возвращает строку } // Использование tag `Template literal`; tag(strings, ...values); Стандартный тег конкатенации String.raw(strings, values1, ..., valueN) Tags 33
34. Строки Простой пример function echo() { return 'You shall not pass!'; } let naive = echo `I'm the mighty string!`; console.log(naive); // You shall not pass! Tagged template literals 34
35. Строки Полезный пример function shoutify(strings, ...values) { values = values.map(function(val) { return val.toUpperCase(); }); return String.raw(strings, ...values); } let loudly = shoutify `You, ${'shall'} not ${'pass'}!` console.log(loudly); // You, SHALL not PASS! Tagged template literals 35
36. Массивы 36
37. Массивы Array.of // Произвольное число аргументов -> Массив Array.of(element0, ..., elementN) // Реализация с помощью rest параметров Array.of = function(...args) { return args; }; Улучшения конструктора 37
38. Массивы Array.from // arguments, NodeList -> Массив Array.from(arrayLike, mapFn, thisArg) function f() { return Array.from(arguments); } f(1, 2, 3); // [1, 2, 3] Array.from('1234'); // ['1', '2', '3', '4'] Array.from(document.querySelectorAll('div')); // [<div>, ...] Улучшения конструктора 38
39. Массивы fill Array.prototype.fill(value, start = 0, end = this.length) let arr = [0, 0, 0].fill(1, 0, 3); // [1, 1, 1] copyWithin Array.prototype.copyWithin(targetStart, sourceStart, sourceEnd) Улучшения прототипа 39
40. Массивы find и findIndex // Возвращает элемент либо undefined Array.prototype.find(callback, thisArg]) // Возвращает индекс либо -1 Array.prototype.findIndex(callback, thisArg]) Улучшения прототипа 40
41. Массивы Вызовы функций let arr = [1]; let missing = [2, 3, 4]; arr.push(...missing); console.log(arr); // [1, 2, 3, 4]; Массивы let missing = [2, 3]; let arr = [1, ...missing, 4]; console.log(arr); // [1, 2, 3, 4] Spread оператор 41
42. Массивы apply для конструктора let parts = [2014, 9, 26]; console.log(new Date(...parts)); Любое выражение после ... console.log([1, ...'23'.split('').map(Number), 4]); Spread оператор 42
43. Destructive assignment 43
44. Destructive assignment ES5 var arr = [1, 2, 3]; var first = arr[0]; var second = arr[1]; var third = arr[2]; ES6 let arr = [1, 2, 3]; let [first, second, third] = arr; // Перестановка без дополнительной переменной [second, first] = [first, second]; Массивы 44
45. Destructive assignment ES5 var nums = [1, 2, 3, 4, 5]; var head = nums[0]; var tail = nums.slice(1); var fourth = nums[3]; ES6 let nums = [1, 2, 3, 4, 5]; let [head, ...tail] = nums; // Можно игнорировать элементы let [,,, fourth] = nums; Массивы 45
46. Destructive assignment ES5 var M = [[1, 2], [3, 4]]; var m12 = M[0][1]; var m21 = M[1][0]; ES6 let M = [[1, 3], [2, 4]]; // Любая вложенность let [, m12, [, m22]] = M; Массивы 46
47. Destructive assignment ES5 var event = { name: 'WSD', desc: 'awesome' }; var evtName = event.name; var evtDesc = event.desc; var name = event.name; var desc = event.desc; ES6 let event = { name: 'WSD', desc: 'awesome' }; let { name: evtName, desc: evtDesc } = event; let { name, desc } = event; Объекты 47
48. Destructive assignment ES5 var deep = { arr: [ 'first', { second: 'second' }, 'third' ] }; var second = deep.arr[1].second; var third = deep.arr[2]; ES6 let deep = { arr: [ 'first', { second: 'second' }, 'third' ] }; let { arr: [, { second }, third] } = deep; Объекты 48
49. Destructive assignment ES5 var missing = [][0]; // undefined var found = missing || 1; // 1 ES6 let [missing] = []; // undefined let [found = 1] = []; // 1 Значения по умолчанию 49
50. Destructive assignment ES5 var missing = {}['missing']; // undefined var found = missing || 1; // 1 ES6 let { missing } = {}; // undefined let { found = 1 } = {}; // 1 Значения по умолчанию 50
51. Destructive assignment Определение параметров функций function ajax({ url, method = 'GET', callback = () => {} }) { // Make a request } Применение 51
52. Destructive assignment Множественные возвращаемые значения function getDimensions() { return { width: 10, height: 5 }; }; let { width: w, height: h } = getDimensions(); console.log(w, h); // 10 5 function getCoordinates() { return [-10, 10]; }; let [x, y] = getCoordinates(); console.log(x, y) // -10 10 Применение 52
53. Модули 53
54. Модули AMD — Require.js •  Асинхронная загрузка •  Громоздкий синтаксис CommonJS — Node.js, Browserify •  Компактный синтаксис •  Синхронная загрузка Сейчас 54
55. Модули •  Компактный декларативный синтаксис •  Поддержка синхронной и асинхронной загрузки •  Июль 2014 — синтаксис был окончательно утвержден ES6 55
56. Модули utils.js export default function (msg) { console.log(msg); }; main.js import log from 'utils'; log('Hello, World!') Импорт и экспорт по умолчанию 56
57. Модули utils.js export function logMessage(msg) { console.log(msg); } function makeAssertion(expr, message) { console.assert(expr, message); } export { logMessage as log, makeAssertion as assert }; Именованный импорт и экспорт 57
58. Модули math.js export function isOdd(n) { return n % 2 > 0; } function randomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } // Экспорт по умолчанию также именованный export { randomInt as default }; Именованный импорт и экспорт 58
59. Модули math.js import { log, error } from 'utils'; // Импорт по умолчанию вместе с именованным import random_int, { isOdd as is_odd } from 'math'; log(random_int(1, 5)); assert(is_odd(2), '2 это четное число!'); app.js import { default as random_int } from 'math'; Именованный импорт и экспорт 59
60. Модули utils.js export function log(msg) { console.log(msg); } export function assert(msg) { console.assert(expr, message); } main.js import * as logger from 'logger'; logger.log('Hello, World!'); logger.assert(true === false, 'True это не false!') Импорт в качестве объекта 60
61. Модули •  Циклические зависимости •  Реэкспортирование •  API: System.import , System.module , System.set , System.define •  Загрузчик модулей: es6-module-loader •  Элемент <module> Недосказанное 61
62. Модули Изолированно: •  es6-module-transpiler •  Есть плагины для Grunt, Gulp, Brocolli С зависимостями: •  es6-module-loader •  systemjs •  jspm.io Использование 62
63. И это все?! 63
64. Нет конечно! •  Классы •  Итераторы •  Map + WeakMap •  Set + WeakSet •  Цикл for...of •  Promises •  Генераторы •  Прокси •  Символы •  Math, RegExp •  Улучшенный Юникод И многое другое 64
65. ES7 65
66. Object.observe Что используется сейчас: •  Dirty checking — Angular.js •  Объекты-контейнеры — Ember.js, Knockout.js let event = Ember.Object.create({ name: 'WSD', desc: 'awesome' }); event.get('name'); event.set('desc', 'super awesome'); Object.observe •  Позволяет асинхронно наблюдать за изменениями объектов •  Без дополнительных танцев с бубном 66
67. Object.observe Object.observe let obj = {}; // Начать наблюдение Object.observe(obj, function(changes) { changes.forEach(function({ type, name, oldValue }) { console.log(type, name, oldValue); }); }); // Оставить в покое Object.unobserve(obj); Применение 67
68. Object.observe Можно наблюдать только интересующие изменения let obj = {}; let interest = ['add', 'update', 'delete']; // Начать наблюдение Object.observe(obj, (changes) => { // Использовать изменения }, interest); Применение 68
69. Object.observe Пользовательские события let obj = { _foo: 'foo', set foo(value) { let event = { type: 'special-event', name: 'set-value', oldValue: this._foo, value: value }; Object.getNotifier(this).notify(event); } }; Применение 69
70. Object.observe Пользовательские события let interest = ['special-event']; Object.observe(obj, (changes) => { console.log(changes[0]); }, interest); obj.foo = 'bar'; Применение 70
71. Object.observe •  Включен по умолчанию в Chrome 36 •  Доступен в Node.js (с флагом --harmony ) •  Есть полифил Поддержка 71
72. Что ещё? •  SIMD •  Литералы построения массивов и генераторов •  Параллельный JavaScript •  Типизированные объекты (Typed objects) •  Улучшения событийного цикла •  и многое другое ... Можно искать по запросу es7 strawman И следить на esdiscuss.org 72
73. Поддержка
74. Где смотреть? 74
75. Таблица совместимости 75
76. Caniuse 76
77. Окружения 77
78. Современные браузеры •  12 / 106 — IE 11 •  39 / 106 — Safari 7.1, 8 •  63 / 106 — Opera 24 * •  69 / 106 — Chrome 39 * •  80 / 106 — Firefox 34 * с флагом --enable-javascript-harmony 78
79. Node.js 50 / 101 c флагом --harmony 79
80. Всё плохо?
81. Не совсем ... 81
82. Traceur Плюсы: •  Весь в себе, не нуждается в полифилах •  Очень быстро можно начать использовать, подключив на страницу •  Есть плагины для Grunt, Gulp, Brocolli, Browserify Минусы: •  Производит нечитаемый код, но есть поддежка source maps •  Нуждается в рантайме для использования сгенерированного кода 82
83. 6to5 Плюсы: •  Генерирует простой и понятный для чтения код •  Не нуждается в рантайме •  Есть плагины для Grunt, Gulp, Brocolli, Browserify Минусы: •  Нельзя использовать на лету, подразумевает шаг препроцессинга •  Нет встроенных полифилов, их нужно подключать самостоятельно 83
84. Не хочу использовать всё! Let и Const Spread оператор Параметры по умолчанию Template literals Arrow функции Улучшения встроенных объектов Многое другое 84
85. Разработка
86. Текстовые редакторы 86
87. Sublime Text 87
88. Webstorm 88
89. Vim 89
90. Инструменты 90
91. JSHint jshint.com/docs/options/#esnext Да! 91
92. JSCS github.com/jscs-dev/node-jscs#--esnext github.com/jscs-dev/node-jscs#esnext Да! 92
93. UglifyJS Тикет Пока нет 93
94. Tern Тикет Пока нет, но 94
95. Esprima Экспериментальная ветка В разрабоке 95
96. Песочницы 96
97. Только ES6 Traceur REPL •  Показывает сгенерированный код •  Можно посмотреть на все опции компилятора онлайн •  Нельзя сохранять ES6 Fiddle •  Простой •  Есть небольшие примеры кода •  Можно сохранять, а также встраивать 97
98. Общего назначения Traceur из коробки •  JS Bin •  Codepen Без встроенной поддержки Traceur •  JSFiddle 98
99. Кто использует?
100. Traceur 100
101. AngularJS 2.0 101
102. Ember.js 102
103. RSVP.js 103
104. Кто ещё? •  Lodash •  HTMLBars •  Ember extension •  Defs Больше примеров! 104
105. В заключение
106. Так стоит ли использовать? Где не стоит: •  Большие объемы кода на ES5/ES3 (сразу) •  Код, для которого критична производительность •  Код, для которого критичен размер Где можно и нужно: •  Изолированные модули •  Прототипы! •  Собственные библиотеки 106
107. Будущее сейчас и оно прекрасно 107
108. Вопросы? @dentuzhik dentuzhik Ссылки http://bit.ly/1ru9A8z 108