ECMAScript
Harmony
Илья
Пухальский,
EPAM
Systems
ИЛИ
ПОЧЕМУ Я ВЕРЮ В
БУДУЩЕЕ JAVASCRIPT

@witchfinderx
2
Илья Пухальский,
EPAM Mobile Competency Center

На повестке дня
3

1. Как самый непонятый язык в мире стал самым
популярным
2. Чем плох JavaScript?
3. Новые возможности
4. Взгляд в будущее
5. Наша миссия
4

Чего не будет?
5

1. Объектная модель браузера (DOM)
2. Объектная модель документа (BOM)
3. "Новых фишечек HTML5"
6

История JavaScript в картинках
7

8
ECMA-262 — стандарт языка ECMAScript
Стандарт ECMA-262

9
TC39 — технический коммитет ECMA-262
TC39

10
ECMAScript — это язык.
JavaScript, JScript и даже ActionScript — диалекты.
Википедия

11
JS 1.0 (Mocha / LiveScript)
Начало 1996-го
Netscape 2.0, Брендон Айк

12
Передача на стандартизацию
1996
ECMA International

13
Портирование JS 1.0 (JScript, VBScript)
Июль 1996-го
IE 3.0

14
JS 1.1
Август 1996-го
Netscape 3.0 + DOM Level 0

15
ECMA-262 1.0
Июнь 1996-го
ECMA International

16
JS 1.3 (ECMA-262 1.0 и 2.0)
Июнь 1997-го
Netscape 4.0, DHTML

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
ECMA-262 2.0 (ISO/IEC 16262)
Июнь 1998-го
ECMA International

19
ECMA-262 3.0
Декабрь 1999-го
ECMA International

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
— Брендон Айк
«Считайте, что JavaScript спас вас
«от VBScript»

22
ECMA-262 4.0
НЕ ВЫПУЩЕНА
по политическим причинам

23
ECMA-262 5.0
Декабрь 2009-го
ECMA International

24
JS 1.6-1.8.1
С ноября 2005-го по июнь 2009-го
FireFox 1.5-3.6

25
JS 1.8.2 (ECMA-262 5.0 совместимость)
С ноября 2000-го
FireFox 4+, IE 9+, Opera 11.60+

26
ECMA-262 5.1 (ISO/IEC 16262:2011)
Июнь 2011-го
ECMA International

27
ECMA-262 6 / ECMAScript Harmony
Декабрь 2013-го
ECMA International

Так быстро?
28

29
JavaScript уже не тот

30
Он везде

Чем плох JavaScript?
31

32
1. Единый глобальный неймспейс
2. Прототипное наследование сложное и ресурсоемкое
3. Precision проблемы
4. NaN
5. Проблемы с регулярными выражениями
6. =, ==, ===
7. for ... in
8. Ваш вариант

33
— Брендон Айк
«Простите, времени было мало...
«Я сделаю лучше в следующей жизни»

Новые возможности
34

35
Новое в API

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
Строки
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
Новое в 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
Новое в Number
1. Number.isNaN()
2. Number.toInteger()
3. Number.isInteger()
4. Number.isFinite()
5. Number.prototype.clz()

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
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
function foo(a, b = 10) {}
function foo(a = 'Frontend Conf', b = 20) {}
function foo(a, b = 30, me = this) {}
Стандартные значения параметров функции

43
var a = 1,
b = 0;
let (a = a * 10, b = 5) {
console.log(a + b); // 15
}
console.log(a + b); // 1
Блочная область видимости

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
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
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
Модули

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

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
import drive from Car;
import {drive, miles} from Car;
Импорт

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

52
Классы

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

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
А как же AMD?

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

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

Будущее
58

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

Миссия
60

61
Я ♥

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

Вопросы?
63

@witchfinderx
64

@witchfinderx
64