by Ilya Pukhalski on Frontend DEV Conf'13 bit.ly/Ilya_Pukhalski

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
Он везде

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, 8, 12]
arr.findIndex(function(n) {return n / 2 === 4;}); // 3
Массивы
1. Array.prototype.find()
2. Array.prototype.findIndex()1. проверить

37. 37
Строки
1. String.prototype.contains()
2. String.prototype.repeat()
3. String.prototype.startsWith()
4. String.prototype.endsWith()
'string'.startsWith('s'); // true
'string'.endsWith('s'); // false
'ecmascript harmony'.contains('harmony'); // true
'keep moving '.repeat(3); // keep moving keep moving

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
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

47. 47
Модули

48. 48
module UniverseTest {};
module Universe { module MilkyWay {} };
module MilkyWay = 'Universe/MilkyWay';
module SolarSystem =
Universe.MilkyWay.SolarSystem;
module MySystem = SolarSystem;
Определение

49. 49
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';
};
Экспорт / Публичные св-ва и методы

50. 50
import drive from Car;
import {drive, miles} from Car;
Импорт

51. 51
// load(moduleURL, callback, errorCallback)
Loader.load('car.js', function(car) {
console.log(car.drive(500, 'north'));
}, function(err) {
console.log('Error:' + err);
});
Загрузчик модулей

52. 52
Классы

53. 53
module widgets {
// ...
class DropDownButton extends Widget {
constructor(attributes) {
super(attributes);
this.buildUI();
}
buildUI() {
this.domNode.onclick = function(){
// ...
};
}
}
}
Пример использования

54. 54
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

55. 55
А как же AMD?

56. 56
— Джеймс Бурке
«Я хочу, чтобы AMD и RequireJS остались в
«прошлом... Сам язык будет покрывать 80%
«функционала RequireJS, как минимум для
«браузера»

57. 57
Поддержка возможностей ES 5-6 на сегодня
ECMAScript 5-6: таблицы совместимости

58. Будущее
58

59. 59
ECMA-262 7.0
1. Promises
2. Перегрузка операторов
3. Типажи
4. Ваши предложения?

60. Миссия
60

61. 61
Я ♥

62. 62
1. JS FIXED
2. ES-DISCUSS.ORG

63. Вопросы?
63

64. @witchfinderx
64

65. @witchfinderx
64