ECMAScript Harmony: Будущее JavaScript, или почему я верю в JS?

В последнее время HTML5-мания захватила весь мир! Пока разработчики изменяют размер окна браузера, открывая очередной сайт, заказчики пытаются ассимилироваться к текущим трендам, добавляя к каждому слову HTML5. Многие забыли об одном из самых мощных инструментов, который присутствует в каждом браузере — о JavaScript.

Илья расскажет об истории JavaScript, текущих и будущих возможностях языка, включая нововведения ECMAScript 6 Harmony.

Transcript

1. ECMAScript  Harmony Илья  Пухальский, EPAM  Systems ИЛИ ПОЧЕМУ Я ВЕРЮ В БУДУЩЕЕ JAVASCRIPT
2. @witchfinderx 2 Илья Пухальский, EPAM Mobile Competency Center
3. На повестке дня 3
4. 1. Как самый непонятый язык в мире стал самым популярным 2. Чем плох JavaScript? 3. Новые возможности 4. Взгляд в будущее 5. Наша миссия 4
5. Чего не будет? 5
6. 1. Объектная модель браузера (DOM) 2. Объектная модель документа (BOM) 3. "Новых фишечек HTML5" 6
7. История JavaScript в картинках 7
8. 8 ECMA-262 — стандарт языка ECMAScript Стандарт ECMA-262
9. 9 TC39 — технический коммитет ECMA-262 TC39
10. 10 ECMAScript — это язык. JavaScript, JScript и даже ActionScript — диалекты. Википедия
11. 11 JS 1.0 (Mocha / LiveScript) Начало 1996-го Netscape 2.0, Брендон Айк
12. 12 Передача на стандартизацию 1996 ECMA International
13. 13 Портирование JS 1.0 (JScript, VBScript) Июль 1996-го IE 3.0
14. 14 JS 1.1 Август 1996-го Netscape 3.0 + DOM Level 0
15. 15 ECMA-262 1.0 Июнь 1996-го ECMA International
16. 16 JS 1.3 (ECMA-262 1.0 и 2.0) Июнь 1997-го Netscape 4.0, DHTML
17. 17 JS 1.4 (LiveWire) 1997 Netscape Server-side JavaScript <H1> <server> // Here we use the same technique to construct a heading on the page. if ( request.deptno != null ) write("Department " + request.deptno + " Staff"); else write("All Staff"); </server> </H1> <server> // Call a programmer-defined function (see below) to verify the database // connection. Note that this ckDatabaseConnected function may redirect to a // login page; if that happens, we want to return here once the user logs in // successfully. So we have to send the URL as a parameter. if ( request.deptno == null ) ckDatabaseConnected("emps.html"); else ckDatabaseConnected("emps.html" + "?deptno=" + request.deptno); </server>
18. 18 ECMA-262 2.0 (ISO/IEC 16262) Июнь 1998-го ECMA International
19. 19 ECMA-262 3.0 Декабрь 1999-го ECMA International
20. 20 JS 1.5 (ECMA-262 3.0) С ноября 2000-го Netscape 6.0, FireFox 1.0, IE 5.5-8.0 (JScript 5.5-8.0), Opera 7.5-11.50, Safari 3-5, Chrome 1-10.0.666
21. 21 — Брендон Айк «Считайте, что JavaScript спас вас «от VBScript»
22. 22 ECMA-262 4.0 НЕ ВЫПУЩЕНА по политическим причинам
23. 23 ECMA-262 5.0 Декабрь 2009-го ECMA International
24. 24 JS 1.6-1.8.1 С ноября 2005-го по июнь 2009-го FireFox 1.5-3.6
25. 25 JS 1.8.2 (ECMA-262 5.0 совместимость) С ноября 2000-го FireFox 4+, IE 9+, Opera 11.60+
26. 26 ECMA-262 5.1 (ISO/IEC 16262:2011) Июнь 2011-го ECMA International
27. 27 ECMA-262 6 / ECMAScript Harmony Декабрь 2013-го ECMA International
28. Так быстро? 28
29. 29 JavaScript уже не тот
30. 30 JavaScript везде
31. Чем плох JavaScript? 31
32. 32 1. Единый глобальный неймспейс 2. Прототипное наследование сложное и ресурсоемкое 3. Precision проблемы 4. NaN 5. Проблемы с регулярными выражениями 6. =, ==, === 7. for ... in 8. Ваш вариант
33. 33 — Брендон Айк «Простите, времени было мало... «Я сделаю лучше в следующей жизни»
34. Новые возможности 34
35. 35 Новое в API
36. 36 var arr = new Array(1, 2, 3, 8, 12); arr.find(function(n) {return n % 2;}); // 2 arr.findIndex(function(n) {return n / 2 === 4;}); // 3 Массивы 1. Array.prototype.find() 2. Array.prototype.findIndex()
37. 37 Строки 1. String.prototype.contains() 2. String.prototype.repeat() 3. String.prototype.startsWith() 4. String.prototype.endsWith() 'ecmascript harmony'.contains('harmony'); // true 'keep moving '.repeat(2); // keep moving keep moving 'string'.startsWith('s'); // true 'string'.endsWith('s'); // false
38. 38 Новое в Math 1. Math.sign() 2. Math.log10(), Math.log2(), Math.log1p(), Math.expm1() 3. Math.cosh(), Math.sinh(), Math.tanh() 4. Math.acosh(), Math.asinh(), Math.atanh() 5. Math.hypot(), Math.trunc() // Варианты результата // в зависимости от знака: 1, 0 и -1 Math.sign(365) // 1
39. 39 Новое в Number 1. Number.isNaN() 2. Number.toInteger() 3. Number.isInteger() 4. Number.isFinite() 5. Number.prototype.clz()
40. 40 Object 1. Object.is() 2. Object.assign() 3. Object.mixin() Object.is(NaN, NaN); // true Object.is(0, -0); // false NaN === NaN; // false 0 === -0; // true // {a: 1, b: 2} Object.assign({a: 1}, {b: 2}); // {a: 1, b: getter} Object.mixin( {a: 1}, {get b: function() {return 2;}} );
41. 41 Object.observe* var tweet = { text: '#frontendconf just started. Enjoy!', username: 'witchfinderx', sent: false }; Object.observe(tweet, function(changes) { changes.forEach(function(change, i) { console.log(change); }); }); // Изменяем, добавляем и удаляем свойство tweet.text = 'So boring. Waiting for a coffee...'; tweet.date = new Date(); delete tweet.completed;
42. 42 function foo(a, b = 10) {} function foo(a = 'Frontend Conf', b = 20) {} function foo(a, b = 30, me = this) {} Стандартные значения параметров функции
43. 43 var a = 1, b = 0; let (a = a * 10, b = 5) { console.log(a + b); // 15 } console.log(a + b); // 1 Блочная область видимости
44. 44 let data = new Map(); data.set('key', 'key'.length); // key 3 data.get('key'); // 3 data.size(); // 1 data.has('key'); // true data.delete('key'); // true data.has('key'); // false Maps
45. 45 let data = new Set([1, 2, 3]);. s.has(5); // false s.add(5); s.has(5); // true s.delete(5); // true s.has(5); // false Sets
46. 46 For ... of for (let word of ["one", "two", "three"]) alert(word); let s = new Set([3, 4, 5]); for (let value of s) alert(value); let m = new Map([['red', 'rojo'], ['blue', 'azul']]); for (let [name, value] of m) alert(name + " = " + value);
47. 47 let wdata = new WeakMap(); wdata.set('key', 'key'.length); // TypeError: Invalid value used as weak map key wdata.has('key'); // TypeError: Invalid value used as weak map key let wmk = {}; wdata.set(wmk, 'value'); // wmk 'value' wdata.get(wmk); // 'value' wdata.has(wmk); // true wdata.delete(wmk); // true wdata.has(wmk); // false WeakMaps
48. 48 Модули
49. 49 module UniverseTest {}; module Universe { module MilkyWay {} }; module MilkyWay = 'Universe/MilkyWay'; module SolarSystem = Universe.MilkyWay.SolarSystem; module MySystem = SolarSystem; Определение
50. 50 module Car { // приватные var licensePlateNo = '556-343'; // публичные export function drive(speed, direction) { console.log('details:', speed, direction); } export module engine{ export function check() { } } export var miles = 5000; export var color = 'silver'; }; Экспорт
51. 51 import drive from Car; import {drive, miles} from Car; Импорт
52. 52 // load(moduleURL, callback, errorCallback) Loader.load('car.js', function(car) { console.log(car.drive(500, 'north')); }, function(err) { console.log('Error:' + err); }); Загрузчик модулей
53. 53 Классы
54. 54 module widgets { // ... class DropDownButton extends Widget { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } } } Пример использования
55. 55 var widgets = (function(global) { // ... function DropDownButton(attributes) { Widget.call(this, attributes); this.buildUI(); } DropDownButton.prototype = Object.create(Widget.prototype, { constructor: { value: DropDownButton }, buildUI: { value: function(e) { this.domNode.onclick = function(e) { // ... } } } }); })(this); class == function
56. 56 А как же AMD?
57. 57 — Джеймс Бурке «Я хочу, чтобы AMD и RequireJS остались в «прошлом... Сам язык будет покрывать 80% «функционала RequireJS, как минимум для «браузера»
58. 58 Поддержка возможностей ES 5-6 на сегодня ECMAScript 5-6: таблицы совместимости
59. Будущее 59
60. 60 ECMA-262 7.0 1. Promises 2. Перегрузка операторов 3. Типажи 4. Ваши предложения?
61. Миссия 61
62. 62 Я ♥
63. 63 1. JS FIXED 2. ES-DISCUSS.ORG
64. Вопросы? 64
65. @witchfinderx 65
66. @witchfinderx 65