Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 JS 1.4 (LiveWire) 1997 Netscape Server-side JavaScript

// 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");

// 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);

Slide 18

Slide 18 text

18 ECMA-262 2.0 (ISO/IEC 16262) Июнь 1998-го ECMA International

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 — Брендон Айк «Считайте, что JavaScript спас вас «от VBScript»

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Так быстро? 28

Slide 29

Slide 29 text

29 JavaScript уже не тот

Slide 30

Slide 30 text

30 JavaScript везде

Slide 31

Slide 31 text

Чем плох JavaScript? 31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

35 Новое в API

Slide 36

Slide 36 text

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.ﬁnd() 2. Array.prototype.ﬁndIndex()

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

39 Новое в Number 1. Number.isNaN() 2. Number.toInteger() 3. Number.isInteger() 4. Number.isFinite() 5. Number.prototype.clz()

Slide 40

Slide 40 text

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;}} );

Slide 41

Slide 41 text

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;

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

48 Модули

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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'; }; Экспорт

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

53 Классы

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

56 А как же AMD?

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Будущее 59

Slide 60

Slide 60 text

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