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

Передача на стандартизацию

1996ECMA 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)

1997Netscape 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 и -1Math.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); // trueObject.is(0, -0); // falseNaN === NaN; // false0 === -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.observevar 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 3data.get('key'); // 3data.size(); // 1data.has('key'); // truedata.delete('key'); // truedata.has('key'); // false

Maps

45

let data = new Set([1, 2, 3]);.s.has(5); // falses.add(5);s.has(5); // trues.delete(5); // trues.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); // truewdata.delete(wmk); // truewdata.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