Your SlideShare is downloading. ×
0
Что интересного
нам готовит W3C
Сергей Константинов
Web Standards Days, 7 декабря 2013
Обо мне

– В Яндексе с 2008 года
– Руковожу разработкой
API Яндекс.Карт
– С июля 2013 года являюсь
участником Технической
...
В последние годы
появилось много разных
стандартов
Но ядро JavaScript ECMAScript
практически не затронуто
В 2014 всё изменится*
* Если успеем, конечно
Тема дня

– Promises
– Modules
– Service Workers
– @@create
Promises
Promises

Promises (aka Futures) в вебе уже давно
На всякий случай, напомню:
someOperation.then(
successCallback,
errorCal...
Promises

Существует несколько стандартов Promises:
A, A+, B, KISS, C, D, …
И множество реалиазаций:
Q, jQuery Deferred, V...
Promises

Черновик стандарта DOM Level 4 включает в
себя Promises как примитив языка:
http://dom.spec.whatwg.org/#promises...
Promise with resolver

В отличие от большинства существующих
реализаций, в DOM Promises функции
подтверждения и отклонения...
Promise with resolver

Vow:
function asyncOperation () {
var p = vow.promise();
…
return p;
}
…
asyncOperation().fulfill('...
Promise with resolver
Теперь будет так:
function asyncOperation () {
var p = new Promise(
function (resolve, reject) {
…
r...
Promises
Используйте промисы для:
– возврата статуса асинхронной операции
file.open('path').then(
function (handle) {
// d...
Promises

Не используйте промисы для:
– передачи больших объёмов данных,
– как замену событиям.

15
Модули
Модули

Долгое время в JavaScript/ECMAScript не
было никакой модульности.
Это привело к бардаку в global и десяткам
имплем...
Модули

Теперь вы можете объявлять модули:
module 'math' {
export function sum(x, y) {
return x + y;
}
export var pi = 3.1...
Модули

… импортировать модули:
import foo from "foo";
import {sum, pi} from 'math';
import "fs" as fs;
import { draw as d...
Конвейер компиляции модулей

– normalize
– resolve
– fetch
– translate
– link

20
Этап resolve

Вы можете задавать свои правила резолва
имён модулей:
System.ondemand({
"https://yandex.st/jquery/2.4/jquery...
Этап translate
Вы можете совершать операции над кодом
модуля до его исполнения.
Например, проверить jshint-ом:
import { JS...
Этап translate
Вы можете совершать операции над кодом
модуля до его исполнения.
Например, транслировать CoffeeScript
Syste...
Этап link

Можно контролировать, что попадёт в модуль
в качестве global, и можно выбрать, что
экспортировать из модуля.
ht...
Конвейер компиляции модулей

В итоге, мы можем:
– писать и использовать модули;
– написать хук для текущих реализаций
моду...
Конвейер компиляции модулей

Мы не можем из коробки:
– грузить код on demand L

26
Service Workers
(nee Navigation
Controllers)
Service Workers – что это?

– Это возможность для определённого
набора URL домена установить "контроллер",
который будет о...
Service Worker

Инсталлируем:
navigator.registerServiceWorker(
"/*", "/v1/ctrl.js"
).then(function (serviceWorker) {
conso...
Service Worker – зачем?
Service Worker умеет:
– перехватывать запросы за сетевыми
ресурсами и отвечать на них
this.addEven...
Service Worker – зачем?
Service Worker имеет доступ:
– ко всем открытым в браузере страницам, на
которые матчится
this.win...
Service Worker – зачем?

Service Worker научится (?):
– получать push уведомления;
– открывать новые страницы.

32
Магический символ
@@create
Наследование в JS

Как выглядит наследование в JS?
function ChildClass () {
ParentClass.call(this);
}
ChildClass.prototype...
Наследование в JS

Что происходит при вызове new ChildClass()?
– создаётся пустой объект,
– записывается скрытая ссылка на...
Наследование в JS

Но этот метод не работает, если в this
должен быть не Object, а другой примитив
языка, например, Array,...
Наследование в JS
Разрешение наследоваться от встроенных
объектов приводит к неразрешимым
противоречиям.
function ChildArr...
Наследование в JS

К тому же, в большинстве случаев
внутренняя логика встроенных типов
реализованы на C++ из соображений
п...
Наследование в JS

Решение: отделить создание объекта
(allocation) от его инициализации
(initialization).
Функция-конструк...
Наследование в JS
Функция-аллокатор прячется за специальным
символом @@create ("эт-эт-криэйт", ага).
// именно так, без ка...
Наследование в JS
new ChildClass() теперь эквивалентен вот
такой конструкции:
ChildClass.call(
typeof ChildClass[@@create]...
Наследование в JS

Обещают поддержку наследования от:
– стандартных типов Array, Date, RegExp;
– TypedArray;
– новых ES6-т...
Наследование в JS

Вот так:
function ChildClass () {
Array.call(this);
}
ChildClass[@@create] = Array[@@create];
ChildClas...
Главный вопрос:
– Когда?
Обещают весной
Обещают весной
(год не уточняют)
Обещают весной
(год не уточняют)
(но хотя бы при нашей жизни)
Сергей Константинов
Руководитель группы
разработки API Карт
W3C TAG Member

twirl@yandex-team.ru

Спасибо!
Upcoming SlideShare
Loading in...5
×

Сергей Константинов — Что интересного готовит нам W3C

2,453

Published on

2014 год обещает нам множество интересных нововведений. Помимо новинок в HTML5, нас ждут глобальные изменения в самой веб-платформе. Promises и модули — революция в стандартах разработки стандартов. Service Workers — новый подход к решению проблемы офлайновых веб-приложений. @@create — отнаследуйся от HTMLElement! Обо всём этом и пойдёт речь в докладе.

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

No Downloads
Views
Total Views
2,453
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Сергей Константинов — Что интересного готовит нам W3C"

  1. 1. Что интересного нам готовит W3C Сергей Константинов Web Standards Days, 7 декабря 2013
  2. 2. Обо мне – В Яндексе с 2008 года – Руковожу разработкой API Яндекс.Карт – С июля 2013 года являюсь участником Технической архитектурной группы W3C www.w3.org/2001/tag/ – @blogovodoved
  3. 3. В последние годы появилось много разных стандартов
  4. 4. Но ядро JavaScript ECMAScript практически не затронуто
  5. 5. В 2014 всё изменится* * Если успеем, конечно
  6. 6. Тема дня – Promises – Modules – Service Workers – @@create
  7. 7. Promises
  8. 8. Promises Promises (aka Futures) в вебе уже давно На всякий случай, напомню: someOperation.then( successCallback, errorCalback ); 8
  9. 9. Promises Существует несколько стандартов Promises: A, A+, B, KISS, C, D, … И множество реалиазаций: Q, jQuery Deferred, Vow, … (см. http://wiki.commonjs.org/wiki/Promises) 9
  10. 10. Promises Черновик стандарта DOM Level 4 включает в себя Promises как примитив языка: http://dom.spec.whatwg.org/#promises https://github.com/domenic/promises-unwrapping/blob/master/README.md 10
  11. 11. Promise with resolver В отличие от большинства существующих реализаций, в DOM Promises функции подтверждения и отклонения промиса отделены от самого промиса и сам промис неизменяем. 11
  12. 12. Promise with resolver Vow: function asyncOperation () { var p = vow.promise(); … return p; } … asyncOperation().fulfill('some value'); 12
  13. 13. Promise with resolver Теперь будет так: function asyncOperation () { var p = new Promise( function (resolve, reject) { … resolve('some value'); … }); return p; } 13
  14. 14. Promises Используйте промисы для: – возврата статуса асинхронной операции file.open('path').then( function (handle) { // do something valueable }, function (error) { // handle error } ); 14
  15. 15. Promises Не используйте промисы для: – передачи больших объёмов данных, – как замену событиям. 15
  16. 16. Модули
  17. 17. Модули Долгое время в JavaScript/ECMAScript не было никакой модульности. Это привело к бардаку в global и десяткам имплементаций (псевдо)модульных систем. http://wiki.ecmascript.org/doku.php?id=harmony:modules 17
  18. 18. Модули Теперь вы можете объявлять модули: module 'math' { export function sum(x, y) { return x + y; } export var pi = 3.141593; } 18
  19. 19. Модули … импортировать модули: import foo from "foo"; import {sum, pi} from 'math'; import "fs" as fs; import { draw as drawShape } from 'shape'; import { draw as drawGun } from 'cowboy'; module YUI from 'http://developer.yahoo.com/ modules/yui3.js'; 19
  20. 20. Конвейер компиляции модулей – normalize – resolve – fetch – translate – link 20
  21. 21. Этап resolve Вы можете задавать свои правила резолва имён модулей: System.ondemand({ "https://yandex.st/jquery/2.4/jquery.module.js": "jquery", "backbone.js": ["backbone/events", "backbone/model"] }); 21
  22. 22. Этап translate Вы можете совершать операции над кодом модуля до его исполнения. Например, проверить jshint-ом: import { JSHINT } from "jshint"; import { options } from "app/jshintrc"; System.translate = function (source, options) { var errors = JSHINT(source, options), messages = [options.actualAddress]; if (errors) { throw new SyntaxError(errors); } return source; }; 22
  23. 23. Этап translate Вы можете совершать операции над кодом модуля до его исполнения. Например, транслировать CoffeeScript System.translate = function (source, options) { if (!options.path.match(/.coffee$/)) { return; } return CoffeeScript.translate(source); }; 23
  24. 24. Этап link Можно контролировать, что попадёт в модуль в качестве global, и можно выбрать, что экспортировать из модуля. https://gist.github.com/wycats/51c96e3adcdb3a68cbc3 24
  25. 25. Конвейер компиляции модулей В итоге, мы можем: – писать и использовать модули; – написать хук для текущих реализаций модулей (requirejs, amd); – написать вообще свой кастомный Loader и/ или отнаследоваться от системного. 25
  26. 26. Конвейер компиляции модулей Мы не можем из коробки: – грузить код on demand L 26
  27. 27. Service Workers (nee Navigation Controllers)
  28. 28. Service Workers – что это? – Это возможность для определённого набора URL домена установить "контроллер", который будет обрабатывать все запросы с открытых браузером страниц, матчащихся на этот набор URL-ов https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md 28
  29. 29. Service Worker Инсталлируем: navigator.registerServiceWorker( "/*", "/v1/ctrl.js" ).then(function (serviceWorker) { console.log("success!"); // Чтобы использовать Service Worker сразу, // можно выполнить window.location.reload() }); 29
  30. 30. Service Worker – зачем? Service Worker умеет: – перехватывать запросы за сетевыми ресурсами и отвечать на них this.addEventListener("fetch", callback); – кэшировать ресурсы var resources = new Cache( base + "/assets/v1/base.css" ); – редиректить запросы – версионироваться. 30
  31. 31. Service Worker – зачем? Service Worker имеет доступ: – ко всем открытым в браузере страницам, на которые матчится this.windows.forEach(function (w) { … }); – ко всем разедляемым ресурсам: WebStorage, IndexedDB, cookies, … 31
  32. 32. Service Worker – зачем? Service Worker научится (?): – получать push уведомления; – открывать новые страницы. 32
  33. 33. Магический символ @@create
  34. 34. Наследование в JS Как выглядит наследование в JS? function ChildClass () { ParentClass.call(this); } ChildClass.prototype = new ParentClass(); // На самом деле не так, обычно делают магию // чтобы не вызывать конструктор ParentClass 34
  35. 35. Наследование в JS Что происходит при вызове new ChildClass()? – создаётся пустой объект, – записывается скрытая ссылка на ChildClass.prototype, если он есть, – передаётся в качестве this в функциюконструктор. 35
  36. 36. Наследование в JS Но этот метод не работает, если в this должен быть не Object, а другой примитив языка, например, Array, Date, RegExp, … // Так не работает function ChildArray () { Array.call(this); } ChildArray.prototype = new Array(); 36
  37. 37. Наследование в JS Разрешение наследоваться от встроенных объектов приводит к неразрешимым противоречиям. function ChildArray () { Array.call(this); Date.call(this); this.length = 100500; // И что мы получим в итоге? о_О } 37
  38. 38. Наследование в JS К тому же, в большинстве случаев внутренняя логика встроенных типов реализованы на C++ из соображений производительности. 38
  39. 39. Наследование в JS Решение: отделить создание объекта (allocation) от его инициализации (initialization). Функция-конструктор инициализирует созданный объект, а вот само создание спрятано за другой функцией. 39
  40. 40. Наследование в JS Функция-аллокатор прячется за специальным символом @@create ("эт-эт-криэйт", ага). // именно так, без кавычек // возвращает инстанцию объекта // для передачи в инициализирующий конструктор Function[@@create]() @@create – не единственный специальный символ, есть ещё несколько полезных штук. http://people.mozilla.org/~jorendorff/es6-draft.html#sec-ecmascript-language-types-symbol-type 40
  41. 41. Наследование в JS new ChildClass() теперь эквивалентен вот такой конструкции: ChildClass.call( typeof ChildClass[@@create] != 'undefined' ? ChildClass[@@create]() : // Это некоторое упрощение ;) ObjectCreate(ChildClass.prototype) ); http://people.mozilla.org/~jorendorff/es6-draft.html#sec-construct-argumentslist 41
  42. 42. Наследование в JS Обещают поддержку наследования от: – стандартных типов Array, Date, RegExp; – TypedArray; – новых ES6-типов Set, WeakSet, Map, WeakMap; – и даже HTMLElement! 42
  43. 43. Наследование в JS Вот так: function ChildClass () { Array.call(this); } ChildClass[@@create] = Array[@@create]; ChildClass.prototype = new Array(); 43
  44. 44. Главный вопрос: – Когда?
  45. 45. Обещают весной
  46. 46. Обещают весной (год не уточняют)
  47. 47. Обещают весной (год не уточняют) (но хотя бы при нашей жизни)
  48. 48. Сергей Константинов Руководитель группы разработки API Карт W3C TAG Member twirl@yandex-team.ru Спасибо!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×