Евгений Курышев (Ostrovok.ru) - “Анатомия биддинга: превращение данных в деньги и обратно"
Баба-Яга против! — Роман Дворнов, Ostrovok.ru
-
Upload
yandex -
Category
Technology
-
view
512 -
download
2
description
Transcript of Баба-Яга против! — Роман Дворнов, Ostrovok.ru
Баба-яга против!
Екатеринбург, 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
Давайте сделаем частью 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