Не так давно случился значимый прецедент в истории W3C. Были приняты две конфликтующие спецификации, решающие одну проблему: Touch Events и Pointer Events. Почему так получилось, что это значит и что с этим делать? Конференция WSD, Минск, 26 октября 2014 Видео: http://www.youtube.com/watch?v=dQoz5KZUH2M Mobile Frontend Meetup, Москва, 4 июля 2015

1. Карточный домик
Роман Дворнов
Avito
Москва, июль 2015
Touch Events vs. Pointer Events

2. 2

3. Работаю в Avito
Делаю SPA
Автор basis.js
Я…
За любую движуху,
кроме голодовки ;)

4. 4
tinyurl.com/baba-yaga-protiv
Баба-яга против!
Екатеринбург, 19 cентября 2014

5. Touch Events vs. Pointer Events

6. 6
Часть первая+
Урок истории
Самая скучная часть доклада

7. Touch Events
7

8. 8

9. Mobile Safari –
рождение Touch Events
9
июнь 2007

10. Apple не стала вносить
реализацию в WebKit
10
июнь 2007

11. в WebKit появилась
реализация Touch Events
(от Android)
11
конец 2009

12. А как же стандарт?
12

13. W3C начал работать
над Touch Events
13
май 2011

14. Candidate
Recommendation
14
декабрь 2011

17. Apple раскрыла* свои
патенты
16
декабрь 2011
* Члены W3C обязаны это делать согласно Patent Policy
www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure

18. W3C гарантирует
«юридическую чистоту»*
спецификации
17
Знаете ли вы?
* нет нарушения патентов или авторских прав

19. W3C не требует от держателей
патентов отказываться от их
конкурентного преимущества
18

20. Для W3C приемлема
‟Royalty-free” лицензия,
разрешающая реализацию
только в браузерах
19

21. – Не вариант, – сказала Apple

22. – Не вариант, – сказала Apple

23. TE PAG
21
www.w3.org/2012/01/touch-pag-charter
Touch Events Patent Advisory Group
январь 2012

26. Touch Events version 2
23

27. Touch Events version 2
23
сентябрь 2012
в пользу Pointer Events

28. Recommendation
24
октябрь 2013
www.w3.org/TR/touch-events/

29. 2007 – 2013
25

30. Pointer Events
26

31. W3C задумалась об
унифицированной модели
работы с указателями:
мышь, touch, перо и т.д.
27
2009

32. Спецификация
28
2009

33. Спецификация
28
2009
МНОГО
БУКВ

34. Спецификации должны
быть как можно проще,
чтобы быстрее доводить
до рекомендации
29
– Позиция W3C

35. 30
Вы же помните
историю с
CSS 2.1?

36. 30
Вы же помните
историю с
CSS 2.1?

37. IE10 mobile –
рождение Pointer Events
31
июнь 2012

38. 32
Опять Microsoft со своим велосипедом…

39. 32
Опять Microsoft со своим велосипедом…

40. Проясним ситуацию, в это время…
• Touch Events заблокирована патентом Apple
• Microsoft выводит на рынок новые продукты
• W3C нужна универсальная модель
33

41. Ну что ж Microsoft, давай – удиви…

42. Ну что ж Microsoft, давай – удиви…

43. Заявка от Microsoft в W3C:
Pointer Events
35
сентябрь 2012
www.w3.org/Submission/pointer-events/

44. Засчитано:
Working Draft
36
декабрь 2012
www.w3.org/TR/pointerevents/

45. Candidate
Recommendation
37
май 2013
www.w3.org/TR/pointerevents/

46. Recommendation
38
август 2014
www.w3.org/TR/pointerevents/

47. Recommendation
38
август 2014
январь 2015
www.w3.org/TR/pointerevents/

48. 39
tinyurl.com/pk8wbkd
«…16 января закончился период
комментариев… 16 членов W3C
поддержали публикацию… один –
подал официальное возражение…»

49. 40
Им оказался…

50. 40
tinyurl.com/ocfhxaj
Им оказался… Яндекс

51. 40
tinyurl.com/ocfhxaj
habrahabr.ru/company/yandex/blog/188520/
Им оказался… Яндекс
Вероятно возражение базировалось на
негативном опыте команды Яндекс.Карт
по работе с PE в IE10 в 2013м

52. Recommendation
41
август 2014
январь 2015
www.w3.org/TR/pointerevents/
февраль 2015

53. А теперь все вместе
42

54. 43
Touch Events
Pointer Events

55. 43
июль 2007
iPhone
Touch Events
Pointer Events

56. 43
июль 2007
iPhone
2009
WebKit
Touch Events
Pointer Events

57. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
Touch Events
Pointer Events

58. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
Touch Events
Pointer Events

59. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
Touch Events
Pointer Events

60. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
Touch Events
Pointer Events

61. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
июнь 2012
IE10 Mobile
Touch Events
Pointer Events

62. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
Заявка
сен 2012
июнь 2012
IE10 Mobile
Touch Events
Pointer Events

63. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
Заявка
сен 2012
июнь 2012
IE10 Mobile
Touch Events
Pointer Events
сен 2012
TE v2

64. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
Заявка
сен 2012
WD
дек 2012
июнь 2012
IE10 Mobile
Touch Events
Pointer Events
сен 2012
TE v2

65. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
Заявка
сен 2012
WD
дек 2012
CR
май 2013
июнь 2012
IE10 Mobile
Touch Events
Pointer Events
сен 2012
TE v2

66. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
REC
окт 2013
Заявка
сен 2012
WD
дек 2012
CR
май 2013
июнь 2012
IE10 Mobile
Touch Events
Pointer Events
сен 2012
TE v2

67. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
REC
окт 2013
Заявка
сен 2012
WD
дек 2012
CR
май 2013
июнь 2012
IE10 Mobile
Touch Events
Pointer Events
сен 2012
TE v2
янв 2015
протест

68. 43
июль 2007
iPhone
2009
WebKit
WD
май 2011
CR
дек 2011
янв 2012
TE PAG
REC
окт 2013
Заявка
сен 2012
WD
дек 2012
CR
май 2013
июнь 2012
IE10 Mobile
Touch Events
Pointer Events
сен 2012
TE v2
янв 2015
протест
REC
фев 2015

69. 44
Часть вторая+
Матчасть
Самая техническая

70. Touch Events и Pointer Events
разные решения одной
проблемы
45

71. Touch Events –
решает одну задачу,
работа с touch
46

72. Pointer Events –
универсальная модель,
для любых типов указателей
47

73. 48
Pointer EventsTouch Events
События
+
touchstart
touchend
touchmove
touchcancel
Интерфейсы
+
TouchEvent : UIEvent
Touch
TouchList
+
Расширения
+
Document
createTouchEvent
createTouchList
События
+
pointerdown
pointerup
pointermove
pointercancel
pointerover
pointerout
pointerenter
pointerleave
gotpointercapture
lostpointercapture
+
CSS
+
touch-action
Интерфейсы
+
PointerEvent : MouseEvent
+
Расширения
+
Element
setPointerCapture
releasePointerCapture
+
Navigator!
pointerEnabled
maxTouchPoints

74. Изучение
49
Pointer EventsTouch Events
≈ Mouse Events
совсем
другая модель

75. Touch Events
50
B
C
A Событие target

76. Touch Events
50
B
C
A Событие target

77. Touch Events
50
B
C
A Событие target
touchstart B

78. Touch Events
50
B
C
A Событие target
touchstart B
touchmove B
touchmove B
…

79. Touch Events
50
B
C
A Событие target
touchstart B
touchmove B
touchmove B
…
touchmove B
…

80. Touch Events
50
B
C
A Событие target
touchstart B
touchend B
touchmove B
touchmove B
…
touchmove B
…

81. Pointer Events
51
B
C
A Событие target

82. Pointer Events
51
B
C
A Событие target

83. Pointer Events
51
B
C
A Событие
pointerdown B
target

84. Pointer Events
51
B
C
A Событие
pointerdown B
pointermove B
pointermove A
…
target

85. Pointer Events
51
B
C
A Событие
pointerdown B
pointermove B
pointermove A
…
pointermove C
…
target

86. Pointer Events
51
B
C
A Событие
pointerdown B
pointerup C
pointermove B
pointermove A
…
pointermove C
…
target

87. Pointer Events
51
B
C
A Событие
pointerdown B
pointerup C
pointermove B
pointermove A
…
pointermove C
…
target
Hit-testing

88. Pointer Events + pointer capture
52
B
C
A Событие target

89. Pointer Events + pointer capture
52
B
C
A Событие target

90. Pointer Events + pointer capture
52
B
C
A Событие
pointerdown B
target

91. Pointer Events + pointer capture
52
B
C
A Событие
pointerdown B
B.setPointerCapture(e.pointerId)
target

92. Pointer Events + pointer capture
52
B
C
A Событие
pointerdown B
pointermove B
pointermove B
…
B.setPointerCapture(e.pointerId)
target

93. Pointer Events + pointer capture
52
B
C
A Событие
pointerdown B
pointermove B
pointermove B
…
pointermove B
…
B.setPointerCapture(e.pointerId)
target

94. Pointer Events + pointer capture
52
B
C
A Событие
pointerdown B
pointerup B
pointermove B
pointermove B
…
pointermove B
…
B.setPointerCapture(e.pointerId)
target

95. Расширяемость
53
Pointer EventsTouch Events
под любой
тип указателя
только touch

96. PointerEvent : MouseEvent
54
• pointerType
• isPrimary
• width / height
• pressure
• tiltX / tiltY

97. PointerEvent : MouseEvent
55
• pointerType
• isPrimary
• width / height
• pressure
• tiltX / tiltY
Тип указателя:
mouse, pen, touch …

98. PointerEvent : MouseEvent
56
• pointerType
• isPrimary
• width / height
• pressure
• tiltX / tiltY
Главный указатель
для своего типа

99. PointerEvent : MouseEvent
57
• pointerType
• isPrimary
• width / height
• pressure
• tiltX / tiltY
Ширина и высота
области контакта

100. PointerEvent : MouseEvent
58
• pointerType
• isPrimary
• width / height
• pressure
• tiltX / tiltY
Сила надавливания

101. PointerEvent : MouseEvent
59
• pointerType
• isPrimary
• width / height
• pressure
• tiltX / tiltY
Углы наклона (пера)
к поверхности

102. One more thing
60

103. Pointer Events (CSS)
61
touch-action: auto | none |
[ pan-x || pan-y ] |
manipulation

104. 62
Минус:
Плюс: Позволяет оптимизировать действия
(отдельный процесс, GPU)
+
Нет pointer* событий
(для касаний, участвующих в действии)

105. MSManipulationStateChanged
63
technet.microsoft.com/en-us/ie/hh771908(v=vs.71).aspx
Позволяет отслеживать состояние touch-action
Пока не в спецификации

106. Polyfill
64

107. Touch Events → Pointer Events
65
touchstart
touchend
touchmove
touchcancel
document.elementFromPoint()+

108. Touch Events → Pointer Events
65
touchstart
touchend
touchmove
touchcancel
document.elementFromPoint()+
«Ручной» hit-testing

109. Touch Events → Pointer Events
66
Нельзя заполифилить touch-action

110. 67
pointerdown
pointerup
pointermove
pointercancel
element.setPointerCapture()+
Pointer Events → Touch Events

111. В спецификациях
нет жестов (gesture)
68

112. Touch Events
пока ограничены*
69
* многое должно было быть в TEv2

113. В спецификации Touch Events
много белых пятен*
70
* многое должно было быть в TEv2

114. Pointer events могут заменить
все остальные API –
Mouse Events и Touch Events
71

115. Часть третья
Мир пополам
Самая внезапная

116. Реализации
73
Pointer EventsTouch Events
• iOS Safari
• WebKit (Android, etc)
• Blink
• Firefox mobile
• IE11 mobile (эмуляция)
• Edge
• IE10/IE11/Edge
• Firefox 41+
• Blink (в разработке)

117. Touch Events
первое решение проблемы
74

118. Pointer Events
более продуманное решение
75

119. 76
Pointer Events все встретили хорошо…

120. 76
Pointer Events все встретили хорошо…

121. 77
Кроме Apple…

122. 77
Кроме Apple…

123. Microsoft помогает
с реализацией
WebKit, Blink и Firefox
78
tinyurl.com/k8uqx8u

124. 79

125. 79

126. Google официально
отказалась реализовывать
Pointer Events в Blink
80
август 2014
tinyurl.com/nbeqpsb

127. 81
Pointer Events, вы нам больше не нужны…

128. 81
Pointer Events, вы нам больше не нужны…

129. 82
www.youtube.com/watch?v=ngBy0H_q-GY
Инженеры
оправдываются…

130. Mobile first
83
Причина №1

131. Safari поддерживает только
Touch Events, поэтому Pointer
Events не стать популярными
84

132. 85
Браво! Слова настоящих
инноваторов!

133. 85
Браво! Слова настоящих
инноваторов!

134. 86
Другие
3,73%
Firefox
3,57%
IE6
92,7%
Доля браузеров Q3 2004

135. 86
Другие
3,73%
Firefox
3,57%
IE6
92,7%
Доля браузеров Q3 2004
Mozilla изменила
Web

136. 86
Другие
3,73%
Firefox
3,57%
IE6
92,7%
Доля браузеров Q3 2004
Mozilla изменила
Web
Пришлось следовать
стандартам

137. 87
Доля мобильных браузеров Q3 2014
Другие
4%
IE
2,53%
Opera Mini
7,87%
Chrome
19,62%
Android Browser
21,11%
Safari
44,86%
Несокрушимая
сила?

138. «В мобильном вебе, Safari стал
новым IE6. Многие мобильные
сайты делаются не по стандартам,
они делаются под Safari.»
88
tinyurl.com/m3lqb43

139. Позиция Google –
укрепляет положение Safari
89

140. К черту стандарты,
делаем все как Safari?!
90

141. 91
Триумф Apple?

142. 91
Триумф Apple?

143. 92
Триумф Apple?

144. 92
Триумф Apple?

145. Быстродействие
93
Причина №2

146. Pointer Events требуют
hit-testing на движение пальца
(все как в Mouse Events)
94

147. Зато позволяют вынести часть
работы в отдельный процесс
и привлечь GPU
(scroll, zooming etc)
95

148. 96
Google
Hit-testing
big performance
issues*
~0.15 мс
Microsoft
* большие проблемы с быстродействием

149. 96
Google
Hit-testing
big performance
issues*
~0.15 мс
Microsoft
0.00015 сек
=
* большие проблемы с быстродействием

150. 96
Google
Hit-testing
big performance
issues*
~0.15 мс
Microsoft
поверьте на слово
=
0.00015 сек
=
* большие проблемы с быстродействием

151. 97
Android
Hit-testing
Заведется везде
где есть
«процессор»
Строгие
требования к
оборудованию
Windows Phone

152. 98
Вы на что-то намекаете?

153. 98
Вы на что-то намекаете?

154. 99
Android
Hit-testing
Windows Phone

155. 99
Android
Hit-testing
Windows Phone

156. 99
Android
Hit-testing
Windows Phone

157. «Нужно будет поддерживать
две событийные модели –
это ударит по быстродействию»
100
Google:

158. Making the web “just work”:
сначала в IE11 Mobile сделали
эмуляцию Touch Events
101
Microsoft:
tinyurl.com/ph4kxdr

159. Touch Events
доступно в IE11 и Edge
102
Microsoft
tinyurl.com/q7fpu2o
пока Platform Preview

160. «Мы не хотим реализовывать
ненужное API»
103
Google:

161. 104
Чтобы не случилось, все время
говори "big performance issues" –
должно сработать...

162. 104
Чтобы не случилось, все время
говори "big performance issues" –
должно сработать...

163. Функциональность
105
Причина №3

164. Pointer Events –
скролл и обработка событий
взаимоисключаются
106

165. Нельзя сделать
pull-to-refresh
107

166. 108

167. 108

168. 109
dwcares.com/pull-to-refresh-2
Решение: chained scrollers & snap points
-ms-scroll-snap
-ms-overflow-style
MSManipulationStateChanged
Хоть и с применением
проприетарных решений:
Зато – работает!

169. 110
Хорошо… как там…
big performance issues?

170. 110
Хорошо… как там…
big performance issues?

171. «pull-to-refresh» запатентован –
патент принадлежит Twitter
111
tinyurl.com/n4zsqef
Между прочим

172. 112
IPA+
Innovator’s Patent Agreement
blog.twitter.com/2013/brewing-our-first-ipa-patent-and-new-adopters

173. 112
IPA+
Innovator’s Patent Agreement
blog.twitter.com/2013/brewing-our-first-ipa-patent-and-new-adopters

174. Только мне причины
кажутся неубедительными?
113

175. 114
Ну давай, срабатывай уже…
big performance issues…
big performance issues…

176. 114
Ну давай, срабатывай уже…
big performance issues…
big performance issues…

177. Окей, Google, а что делать
с недостающими вещами
в Touch Events?
115

178. 116
Так мы это… свое запилим!
Вот например, touch – и соль в тарелке!

179. 116
Так мы это… свое запилим!
Вот например, touch – и соль в тарелке!

180. «Вместо внедрения Pointer Events,
нам кажется будет лучше для веба,
постепенная доработка API,
которое широко используется.»
117
tinyurl.com/kfwpf2d

181. План?
tinyurl.com/m7yqlrz
118

182. Стандарт?
119

183. Будут ли эти расширения
поддерживать другие
браузеры и когда?
120

184. Консистентность
реализаций?
121

185. Сейчас много расхождений в
реализациях Touch Events:
Safari, WebKit, Blink, Firefox, IE
122

186. Добро пожаловать в открытый веб!

187. Добро пожаловать в открытый веб!

188. Мнение разработчиков
124

189. «Мы (команда jQuery) считаем,
что Pointer Events проще
использовать и они больше
нацелены на будущее…»
125
tinyurl.com/kgocn4n

190. «Команда Polymer уверена,
что Pointer Events лучшее
решение для обработки
пользовательского ввода…»
126
tinyurl.com/mcctmbe

191. 127
Pointer Events Polyfill
tinyurl.com/pa5m87k
jQuery
Foundation
Google
декабрь 2014
Polymer

192. PEP 0.3.0
128
Первый официальный релиз
апрель 2015

193. PEP 0.3.0
128
Первый официальный релиз
апрель 2015

194. 129
Один из самых
«популярных» тикетов

195. 130
Google меняет позицию –
Pointer Events быть в Blink
март 2015
tinyurl.com/ogx9bkh

196. 131
А жизнь то налаживается!

197. 131
А жизнь то налаживается!

198. Часть четвертая+
Влияние на инновации

199. Используемые в браузерах
API влияют на производителей
оборудования
133

200. Что делать
с пером и стилусом?
134

201. Что делать
с новыми типами ввода?
135

202. Что если устройства
получат новые технические
возможности?
136

203. Hover
считался невозможным
для touch
137

204. 138
Sony Xperia sola
Первый смартфон с
функцией регистрации
поднесенного пальца
(на расстоянии ~20мм)

205. 139
Sony Xperia sola
Это дает возможность
реализации hover,
но без поддержки на
уровне браузерного API

206. Touch Events – не позволяют
использовать, нет механизмов
для регистрации hover
140
Pointer Events – позволяют

207. 141
Да кому это надо?

208. 141
Да кому это надо?

209. Touch Events
были разработаны для
определенного устройства и
определенного типа ввода
142

210. Pointer Events
универсальное решение
для разработчиков и
для производителей устройств
143

211. Без поддержки на уровне
браузера, иновации в
устройствах – под вопросом
144

212. 145
Инновации говорите…
Мы вот тут новый Macbook сделали…

213. 145
Инновации говорите…
Мы вот тут новый Macbook сделали…

214. 146
The Force Touch trackpad

215. 147
API?
Pointer EventsTouch Events
ничего
У событий есть
свойтво pressure

216. Решение Apple?
148
Новое API
на основе Mouse Events
tinyurl.com/o43pw9w

217. Что дальше?
(заключение)
149
Часть заключительная+
Время собирать камни
Или что с этим делать?

218. 150
Фрустрировать?

219. 150
Фрустрировать?

220. Разобраться в ситуации
151

221. Рассказать другим
152
Никому не рассказывать о Pointer Events

222. Высказывать свое мнение
разработчикам браузеров
153

223. Поддерживать
Pointer Events
154
Как минимум пробовать это делать

224. Перестать смотреть на IE
через призму прошлого
155
Нет, Microsoft мне не платит ;)

225. Все можно изменить
к лучшему, главное,
захотеть…
Иногда работает ;)

226. Все можно изменить
к лучшему, главное,
захотеть…
Иногда работает ;)

227. 157

228. 157

231. Спасибо!
159
Роман Дворнов
@rdvornov
rdvornov@gmail.com
basis.js
basisjs.com
github.com/basisjs