ECMAScript	  HarmonyИлья	  Пухальский,EPAM	  SystemsИЛИПОЧЕМУ Я ВЕРЮ ВБУДУЩЕЕ JAVASCRIPT
@witchfinderx2Илья Пухальский,EPAM Mobile Competency Center
На повестке дня3
1. Как самый непонятый язык в мире стал самымпопулярным2. Чем плох JavaScript?3. Новые возможности4. Взгляд в будущее5. На...
Чего не будет?5
1. Объектная модель браузера (DOM)2. Объектная модель документа (BOM)3. "Новых фишечек HTML5"6
История JavaScript в картинках7
8ECMA-262 — стандарт языка ECMAScriptСтандарт ECMA-262
9TC39 — технический коммитет ECMA-262TC39
10ECMAScript — это язык.JavaScript, JScript и даже ActionScript — диалекты.Википедия
11JS 1.0 (Mocha / LiveScript)Начало 1996-гоNetscape 2.0, Брендон Айк
12Передача на стандартизацию1996ECMA International
13Портирование JS 1.0 (JScript, VBScript)Июль 1996-гоIE 3.0
14JS 1.1Август 1996-гоNetscape 3.0 + DOM Level 0
15ECMA-262 1.0Июнь 1996-гоECMA International
16JS 1.3 (ECMA-262 1.0 и 2.0)Июнь 1997-гоNetscape 4.0, DHTML
17JS 1.4 (LiveWire)1997Netscape Server-side JavaScript<H1><server>// Here we use the same technique to construct a heading...
18ECMA-262 2.0 (ISO/IEC 16262)Июнь 1998-гоECMA International
19ECMA-262 3.0Декабрь 1999-гоECMA International
20JS 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...
21— Брендон Айк«Считайте, что JavaScript спас вас«от VBScript»
22ECMA-262 4.0НЕ ВЫПУЩЕНАпо политическим причинам
23ECMA-262 5.0Декабрь 2009-гоECMA International
24JS 1.6-1.8.1С ноября 2005-го по июнь 2009-гоFireFox 1.5-3.6
25JS 1.8.2 (ECMA-262 5.0 совместимость)С ноября 2000-гоFireFox 4+, IE 9+, Opera 11.60+
26ECMA-262 5.1 (ISO/IEC 16262:2011)Июнь 2011-гоECMA International
27ECMA-262 6 / ECMAScript HarmonyДекабрь 2013-гоECMA International
Так быстро?28
29JavaScript уже не тот
30Он везде
Чем плох JavaScript?31
321. Единый глобальный неймспейс2. Прототипное наследование сложное и ресурсоемкое3. Precision проблемы4. NaN5. Проблемы с...
33— Брендон Айк«Простите, времени было мало...«Я сделаю лучше в следующей жизни»
Новые возможности34
35Новое в API
36var arr = new Array(1, 2, 3, 8, 12);arr.find(function(n) {return n % 2;}); // [2, 8, 12]arr.findIndex(function(n) {retur...
37Строки1. String.prototype.contains()2. String.prototype.repeat()3. String.prototype.startsWith()4. String.prototype.ends...
38Новое в Math1. Math.sign()2. Math.log10(), Math.log2(), Math.log1p(), Math.expm1()3. Math.cosh(), Math.sinh(), Math.tanh...
39Новое в Number1. Number.isNaN()2. Number.toInteger()3. Number.isInteger()4. Number.isFinite()5. Number.prototype.clz()
40Object1. Object.is()2. Object.assign()3. Object.mixin()Object.is(NaN, NaN); // trueObject.is(0, -0); // falseNaN === NaN...
41Object.observevar tweet = {text: #frontendconf just started. Enjoy!,username: witchfinderx,sent: false};Object.observe(t...
42function foo(a, b = 10) {}function foo(a = Frontend Conf, b = 20) {}function foo(a, b = 30, me = this) {}Стандартные зна...
43var a = 1,b = 0;let (a = a * 10, b = 5) {console.log(a + b); // 15}console.log(a + b); // 1Блочная область видимости
44let data = new Map();data.set(key, key.length); // key 3data.get(key); // 3data.size(); // 1data.has(key); // truedata.d...
45let data = new Set([1, 2, 3]);.s.has(5); // falses.add(5);s.has(5); // trues.delete(5); // trues.has(5); // falseSets
46let wdata = new WeakMap();wdata.set(key, key.length);// TypeError: Invalid value used as weak map keywdata.has(key);// T...
47Модули
48module UniverseTest {};module Universe { module MilkyWay {} };module MilkyWay = Universe/MilkyWay;module SolarSystem =Un...
49module Car {// приватныеvar licensePlateNo = 556-343;// публичныеexport function drive(speed, direction) {console.log(de...
50import 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));}, func...
52Классы
53module widgets {// ...class DropDownButton extends Widget {constructor(attributes) {super(attributes);this.buildUI();}bu...
54var widgets = (function(global) {// ...function DropDownButton(attributes) {Widget.call(this, attributes);this.buildUI()...
55А как же AMD?
56— Джеймс Бурке«Я хочу, чтобы AMD и RequireJS остались в«прошлом... Сам язык будет покрывать 80%«функционала RequireJS, к...
57Поддержка возможностей ES 5-6 на сегодняECMAScript 5-6: таблицы совместимости
Будущее58
59ECMA-262 7.01. Promises2. Перегрузка операторов3. Типажи4. Ваши предложения?
Миссия60
61Я ♥
621. JS FIXED2. ES-DISCUSS.ORG
Вопросы?63
@witchfinderx64
@witchfinderx64
Upcoming SlideShare
Loading in …5
×

ECMAscript harmony

555 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
555
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

ECMAscript harmony

  1. 1. ECMAScript  HarmonyИлья  Пухальский,EPAM  SystemsИЛИПОЧЕМУ Я ВЕРЮ ВБУДУЩЕЕ JAVASCRIPT
  2. 2. @witchfinderx2Илья Пухальский,EPAM Mobile Competency Center
  3. 3. На повестке дня3
  4. 4. 1. Как самый непонятый язык в мире стал самымпопулярным2. Чем плох JavaScript?3. Новые возможности4. Взгляд в будущее5. Наша миссия4
  5. 5. Чего не будет?5
  6. 6. 1. Объектная модель браузера (DOM)2. Объектная модель документа (BOM)3. "Новых фишечек HTML5"6
  7. 7. История JavaScript в картинках7
  8. 8. 8ECMA-262 — стандарт языка ECMAScriptСтандарт ECMA-262
  9. 9. 9TC39 — технический коммитет ECMA-262TC39
  10. 10. 10ECMAScript — это язык.JavaScript, JScript и даже ActionScript — диалекты.Википедия
  11. 11. 11JS 1.0 (Mocha / LiveScript)Начало 1996-гоNetscape 2.0, Брендон Айк
  12. 12. 12Передача на стандартизацию1996ECMA International
  13. 13. 13Портирование JS 1.0 (JScript, VBScript)Июль 1996-гоIE 3.0
  14. 14. 14JS 1.1Август 1996-гоNetscape 3.0 + DOM Level 0
  15. 15. 15ECMA-262 1.0Июнь 1996-гоECMA International
  16. 16. 16JS 1.3 (ECMA-262 1.0 и 2.0)Июнь 1997-гоNetscape 4.0, DHTML
  17. 17. 17JS 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");elsewrite("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");elseckDatabaseConnected("emps.html" + "?deptno=" + request.deptno);</server>
  18. 18. 18ECMA-262 2.0 (ISO/IEC 16262)Июнь 1998-гоECMA International
  19. 19. 19ECMA-262 3.0Декабрь 1999-гоECMA International
  20. 20. 20JS 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. 21— Брендон Айк«Считайте, что JavaScript спас вас«от VBScript»
  22. 22. 22ECMA-262 4.0НЕ ВЫПУЩЕНАпо политическим причинам
  23. 23. 23ECMA-262 5.0Декабрь 2009-гоECMA International
  24. 24. 24JS 1.6-1.8.1С ноября 2005-го по июнь 2009-гоFireFox 1.5-3.6
  25. 25. 25JS 1.8.2 (ECMA-262 5.0 совместимость)С ноября 2000-гоFireFox 4+, IE 9+, Opera 11.60+
  26. 26. 26ECMA-262 5.1 (ISO/IEC 16262:2011)Июнь 2011-гоECMA International
  27. 27. 27ECMA-262 6 / ECMAScript HarmonyДекабрь 2013-гоECMA International
  28. 28. Так быстро?28
  29. 29. 29JavaScript уже не тот
  30. 30. 30Он везде
  31. 31. Чем плох JavaScript?31
  32. 32. 321. Единый глобальный неймспейс2. Прототипное наследование сложное и ресурсоемкое3. Precision проблемы4. NaN5. Проблемы с регулярными выражениями6. =, ==, ===7. for ... in8. Ваш вариант
  33. 33. 33— Брендон Айк«Простите, времени было мало...«Я сделаю лучше в следующей жизни»
  34. 34. Новые возможности34
  35. 35. 35Новое в API
  36. 36. 36var 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. 37Строки1. String.prototype.contains()2. String.prototype.repeat()3. String.prototype.startsWith()4. String.prototype.endsWith()string.startsWith(s); // truestring.endsWith(s); // falseecmascript harmony.contains(harmony); // truekeep moving .repeat(3); // keep moving keep moving
  38. 38. 38Новое в Math1. 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. 39. 39Новое в Number1. Number.isNaN()2. Number.toInteger()3. Number.isInteger()4. Number.isFinite()5. Number.prototype.clz()
  40. 40. 40Object1. 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. 41. 41Object.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. 42. 42function foo(a, b = 10) {}function foo(a = Frontend Conf, b = 20) {}function foo(a, b = 30, me = this) {}Стандартные значения параметров функции
  43. 43. 43var a = 1,b = 0;let (a = a * 10, b = 5) {console.log(a + b); // 15}console.log(a + b); // 1Блочная область видимости
  44. 44. 44let data = new Map();data.set(key, key.length); // key 3data.get(key); // 3data.size(); // 1data.has(key); // truedata.delete(key); // truedata.has(key); // falseMaps
  45. 45. 45let data = new Set([1, 2, 3]);.s.has(5); // falses.add(5);s.has(5); // trues.delete(5); // trues.has(5); // falseSets
  46. 46. 46let wdata = new WeakMap();wdata.set(key, key.length);// TypeError: Invalid value used as weak map keywdata.has(key);// TypeError: Invalid value used as weak map keylet wmk = {};wdata.set(wmk, value); // wmk valuewdata.get(wmk); // valuewdata.has(wmk); // truewdata.delete(wmk); // truewdata.has(wmk); // falseWeakMaps
  47. 47. 47Модули
  48. 48. 48module UniverseTest {};module Universe { module MilkyWay {} };module MilkyWay = Universe/MilkyWay;module SolarSystem =Universe.MilkyWay.SolarSystem;module MySystem = SolarSystem;Определение
  49. 49. 49module 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. 50import drive from Car;import {drive, miles} from Car;Импорт
  51. 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. 52Классы
  53. 53. 53module widgets {// ...class DropDownButton extends Widget {constructor(attributes) {super(attributes);this.buildUI();}buildUI() {this.domNode.onclick = function(){// ...};}}}Пример использования
  54. 54. 54var 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. 55А как же AMD?
  56. 56. 56— Джеймс Бурке«Я хочу, чтобы AMD и RequireJS остались в«прошлом... Сам язык будет покрывать 80%«функционала RequireJS, как минимум для«браузера»
  57. 57. 57Поддержка возможностей ES 5-6 на сегодняECMAScript 5-6: таблицы совместимости
  58. 58. Будущее58
  59. 59. 59ECMA-262 7.01. Promises2. Перегрузка операторов3. Типажи4. Ваши предложения?
  60. 60. Миссия60
  61. 61. 61Я ♥
  62. 62. 621. JS FIXED2. ES-DISCUSS.ORG
  63. 63. Вопросы?63
  64. 64. @witchfinderx64
  65. 65. @witchfinderx64

×