Баба-яга против!

Екатеринбург, 19 cентября 2014

Роман Дворнов

О себе• Работал в ostrovok.ru, Единный кошелек

• Автор basis.js

2

О себе

3

• Работал в ostrovok.ru, Единный кошелек

• Автор basis.js

Сказка4

Сначала был Интернет…

5

Microsoft vs. Netscape

6

7

IE68

9

IE, ты все делаешь не так – уходи!

10

Победила дружба…

11

любовь к стандартам

12

* …зуда, запора, вопросов о смысле жизни

Стандарты Средство от мигреней*

“Проприетарные фичи, которые не прошли процесс стандартизации обычно имеют плохой дизайн,

даже когда идея была хорошей.”

13

– Lea Verou

http://habrahabr.ru/post/138252/Каждый раз, когда вы выдаете проприетарную фичу за CSS3 — умирает котенок

В идеале• предложение и обсуждение

• черновик стандарта

• пробные реализации

• стандарт

• официальные реализации

14

В идеале• предложение и обсуждение

• черновик стандарта

• пробные реализации

• стандарт

• официальные реализации

14

с префиксом или «за флагом»

В идеале• предложение и обсуждение

• черновик стандарта

• пробные реализации

• стандарт

• официальные реализации

14

с префиксом или «за флагом»

можно безопасно

использовать

В действительности• предложение и обсуждение

• черновик стандарта

• пробные реализации

• стандарт

• официальные реализации

15

16

Promise Я обещаю быть лапочкой

17

Promise – "лекарство" от callback-hell

18

fronttalks.ru/events/2013-07/presentations/davydov/index.html Михаил Давыдов «Promise – это не больно»

Множество реализаций

19

Официальная спецификация

Promises/A+ promisesaplus.com

20

Давайте сделаем частью JavaScript!

21

* стало частью ES6

Мы знаем как надо – префиксы не нужны!

22

Должно было быть

23

!

var promiseSupported = 'Promise' in window;

В действительности

24

var NativePromise = window['Promise']; var nativePromiseSupported = NativePromise && // Some of these methods are missing from // Firefox/Chrome experimental implementations 'resolve' in NativePromise && 'reject' in NativePromise && 'all' in NativePromise && 'race' in NativePromise && // Older version of the spec had a resolver object // as the arg rather than a function (function(){ var resolve; new NativePromise(function(r){ resolve = r; }); return typeof resolve === 'function'; })();

– Bill Gates

“Успех – паршивый учитель. Он заставляет умных людей думать, что они не могут

проиграть.”

25

Хотите использовать сегодня – готовьте полифил

26

Например, github.com/lahmatiy/es6-promise-polyfill

Зато нативные реализации лучше!

27

Правда?

28

BrowserTime, ms Memory, MB

Native Polyfill Native Polyfill

Chrome 35 162 50 10,5 2,7

Firefox 30 161 39 – –

IE11 – 12 – 2,8

gist.github.com/lahmatiy/d4d6316418fe349537dc

Promise-истерия

29

Применяй с умом!

Promise anti-patterns taoofcode.net/promise-anti-patterns/

30

Promise проникают в стандарты

31

DOM4

32

DOM4• декабрь 2013:

«Черновик стандарта DOM4 включает в себя Promises как примитив языка...»WSD: Сергей Константинов — Что интересного готовит нам W3Cwww.slideshare.net/yandex/w3c-28967881

32

DOM4• декабрь 2013:

«Черновик стандарта DOM4 включает в себя Promises как примитив языка...»WSD: Сергей Константинов — Что интересного готовит нам W3Cwww.slideshare.net/yandex/w3c-28967881

• январь 2014: Promise исключены из DOM4 – теперь просто часть ES6

32

Ссылаются на DOM4• Web NFC

• Quota Management

• Web Cryptography

• Web MIDI

• Device Capabilities

• Messaging

• Contacts Manager

• Web Telephony

33

Вот так одна спецификация может

"отравить" другие

Ссылаются на ES6

34

• CSS Font Loading

• Web animations (с июля 2014)

• Service Workers

• TCP and UDP Socket

• Streams

• Battery Status

• Task Scheduler

Народное творчество:

FontStatusPromise ResponsePromise

AbortableProgressPromise …

35

“Promises should be for one-and-done, non-interruptible,

atomic-ish operations.”

36

– Domenic DenicolaАвтор Q, Promises/A+, ES6 promise spec

Да вы упоролись!

“Promises should be for one-and-done, non-interruptible,

atomic-ish operations.”

36

– Domenic DenicolaАвтор Q, Promises/A+, ES6 promise spec

37

Один подход не может быть применен везде и всегда.У каждой задачи – свое

решение.

Insight #1

38

element.animate() Я заанимирую все

39

Часть крутой спеки

Web Animations dev.w3.org/fxtf/web-animations/

40

41

Интерфейсы ! AnimationTimeline AnimationPlayer AnimationNode AnimationTimingReadOnly AnimationTiming ComputedAnimationTiming AnimationGroup AnimationNodeList AnimationSequence Animation Animatable AnimationEffect KeyframeEffect MotionPathEffect

Расширения ! Document timeline Element animate() getCurrentAnimations() getAnimationPlayers() ! PseudoElement (возможно) animate() getCurrentAnimations() getAnimationPlayers()

Web animations

42

Интерфейсы ! AnimationTimeline AnimationPlayer AnimationNode AnimationTimingReadOnly AnimationTiming ComputedAnimationTiming AnimationGroup AnimationNodeList AnimationSequence Animation Animatable AnimationEffect KeyframeEffect MotionPathEffect

Расширения ! Document timeline Element animate() getCurrentAnimations() getAnimationPlayers() ! PseudoElement (возможно) animate() getCurrentAnimations() getAnimationPlayers()

Реализация в Blink AnimationPlayer ! source timeline startTime currentTime playbackRate playState ready finished cancel()! finish() play() pause() reverse() onfinish (уже нет в спеке)

43

caniuseчто ты делаешь?

прекрати!

Какой будет стиль?

44

<div id="wat" style="background: green !important"> ... </div>

Добавим непредсказуемости

45

document.getElementById('wat').animate([ { backgroundColor: 'red' }, { backgroundColor: 'blue' }], { duration: 123});

А теперь и ты испытай неизведанное ...

Проблемы

• нет реализации остальной части спецификации (достаточно критичной)

• нет инфраструктуры

• нет инструментов

46

47

Запилить новую штуку – мало! Нужны: завершенность, контроль и инструменты.

48

Insight #2

Web Components Я переверну веб

49

Совокупность технологий

• HTML imports

• <template>

• Custom elements

• Shadow DOM

50

Html imports w3c.github.io/webcomponents/spec/imports/

51

<link rel="import" href="foo.html">

52

53

Кажется хорошей идеей, но сложно, проблемы с

производительностью…

54

<template>www.w3.org/TR/html5/scripting-1.html#the-template-element

55

Часть HTML5, самое безобидное в

Web Components

56

Название вводит в заблуждение

57

“<template> provide a method for declaring inert

DOM subtrees…”

58

– HTML5

В действии

59

<template id="row"> <tr><td><td></template>!

var template = document.querySelector('#row');var row = template.content.cloneNode(true);

С <template> не нужно

• ... костылей вроде:<script type="text/template" id="foo">..</script>

• ... делать преобразование:innerHTML → DOM

60

Custom elementsw3c.github.io/webcomponents/spec/custom/

61

document.registerElement('custom-tag', { .. })

<custom-tag></custom-tag>

62

В простых случаях может быть полезно,

хорошо полифилится

63

асинхронность, бесконечное наследование

= мерцания при загрузке*

64

* FOUC (flash of unstyled content )

Shadow DOMw3c.github.io/webcomponents/spec/shadow/

65

Кажется все начиналось с<style scoped>

66

* пока только в Firefox, удалено в Chrome 35

Инкапсуляция DOM-фрагментов

67

68

Shadow treeИмеют собственные стили, которые не пересекаются с другими shadow tree и с основным документом

ад, ад, ад... и еще немного ада!

69

Например – события

70

71

Shadow root

Node

Insertion point

Берем «обычное» дерево

72

То же дерево «в профиль»

73

Путь события

73

Путь события

73

Путь события

Поэтому теперь есть event.path

Все тривиально!

74

* на самом деле нет

Web Components кажутся очень сложными

75

76

Веб-технологии всегда стремились быть простыми – это обеспечило им развитие

и популярность.77

Insight #3

и тд и тп…

78

Почему это имеет значение?

79

Все, что попадает в веб-платформу остается в

веб-платформе

80

Цена ошибки очень высока

81

<!doctype HTML>

82

<blink>, <marquee>, <font>, …

83

"FrontTalks".bold().italics()

> "<i><b>FrontTalks</b></i>"

84

Flexbox

85

3 спецификации

.block { display: -webkit-box; /* OLD */ display: -moz-box; /* OLD */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec */}

.block { display: flex;}

Должно быть Реальность

Прогресс!

86

Больше API, больше функций, больше возможностей!

87

А что же с тем что есть?

88

border-radius

89

Chrome 5 Firefox 3.6 Opera 10.5 IE 8

2009

Угадай браузер

90

2010

3 4

1 2

Угадай браузер

90

Opera IE9

Firefox Chrome, Safari

2010

Проходят годы…

91

IE

FirefoxChrome, Safari, Opera

2014

SVG – баг на баге и багом погоняет

92

DOM Level 2 Traversal and Range

• 2000й год выпуска! • основа для работы с текстом • все браузеры ведут себя по разному, свои баги • не используется из-за нестабильности и неконсистености

• лучшая альтернатива – <canvas>93

80/20

94

80% задачи – 20% времени 20% задачи – 80% времени

95

80% задачи – 20% времени 20% задачи – 80% времени

96

никогда

97

К чему все это?

98

Интересуйтесь новым

99

Читайте твитеры докладчиков, блоги браузеров, новости W3C

Пробуйте

100

Формируйте свое мнение

101

Будьте осторожны

102

Критикуйте ;)

103

No bullshit!104

Save the Web!105

Спасибо!

106

Роман Дворнов @rdvornov rdvornov@gmail.com

basis.js basisjs.com

github.com/basisjs