Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ECMAScript Harmony: Будущее JavaScript, или поч...

ECMAScript Harmony: Будущее JavaScript, или почему я верю в JS?

В последнее время HTML5-мания захватила весь мир! Пока разработчики изменяют размер окна браузера, открывая очередной сайт, заказчики пытаются ассимилироваться к текущим трендам, добавляя к каждому слову HTML5. Многие забыли об одном из самых мощных инструментов, который присутствует в каждом браузере — о JavaScript.

Илья расскажет об истории JavaScript, текущих и будущих возможностях языка, включая нововведения ECMAScript 6 Harmony.

Ilya Pukhalski

April 20, 2013
Tweet

More Decks by Ilya Pukhalski

Other Decks in Technology

Transcript

  1. 1. Как самый непонятый язык в мире стал самым популярным

    2. Чем плох JavaScript? 3. Новые возможности 4. Взгляд в будущее 5. Наша миссия 4
  2. 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>
  3. 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
  4. 32 1. Единый глобальный неймспейс 2. Прототипное наследование сложное и

    ресурсоемкое 3. Precision проблемы 4. NaN 5. Проблемы с регулярными выражениями 6. =, ==, === 7. for ... in 8. Ваш вариант
  5. 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.find() 2. Array.prototype.findIndex()
  6. 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
  7. 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
  8. 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;}} );
  9. 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;
  10. 42 function foo(a, b = 10) {} function foo(a =

    'Frontend Conf', b = 20) {} function foo(a, b = 30, me = this) {} Стандартные значения параметров функции
  11. 43 var a = 1, b = 0; let (a

    = a * 10, b = 5) { console.log(a + b); // 15 } console.log(a + b); // 1 Блочная область видимости
  12. 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
  13. 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
  14. 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);
  15. 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
  16. 49 module UniverseTest {}; module Universe { module MilkyWay {}

    }; module MilkyWay = 'Universe/MilkyWay'; module SolarSystem = Universe.MilkyWay.SolarSystem; module MySystem = SolarSystem; Определение
  17. 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'; }; Экспорт
  18. 52 // load(moduleURL, callback, errorCallback) Loader.load('car.js', function(car) { console.log(car.drive(500, 'north'));

    }, function(err) { console.log('Error:' + err); }); Загрузчик модулей
  19. 54 module widgets { // ... class DropDownButton extends Widget

    { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } } } Пример использования
  20. 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
  21. 57 — Джеймс Бурке «Я хочу, чтобы AMD и RequireJS

    остались в «прошлом... Сам язык будет покрывать 80% «функционала RequireJS, как минимум для «браузера»