Документ обсуждает использование Web Components и их интеграцию с Vue, подчеркивая различия между Shadow DOM и Virtual DOM. Он также выделяет проблемы, связанные с медленным обновлением DOM и поддержкой серверного рендеринга. В заключение упоминается важность соблюдения спецификаций для успешного существования технологий.

1. Vue: Web Components
1
Виталий Ратушный, YouWe

2. About me
Front-end developer at YouWe
2

3. В чем проблема?
3

4. Что происходит при изменении
4
Changes
in DOM
CSS
Recalc
Layout
repaint
Layout
recomposition
ACTUAL
REDRAW

5. Медленный DOM

6. Проблема не только в этом
6

7. 7

8. Изоляция стилей
8

9. 9

10. Мы уже их используем
10
<audio controls="controls" src=“….">
<source src=“…">
</audio>

11. Мы уже их используем
11

12. Shadow DOM !== Virtual DOM
12

13. Какую проблему решает Virtual DOM?
13

14. Контроль изменения DOM
14

15. Какую проблему решает Shadow DOM?
15

16. Инкапсуляция
16

17. А причем тут Vue?
17

18. Найдите различия
18
Vue:
beforeCreate
create
beforeMount
mounted
beforeUpdate
Updated
beforeDestroy
destroyed
WebComponents:
connectedCallback
disconnectedCallback
adoptedCallback
attributeChangedCallback

19. Vue взял идеи со спецификации
19

20. Vue CLI 3.0 умеет компилировать в
WebComponents
20

21. Скомпилировать, как WebComponent
21

22. Компиляция в lazy-loading WebComponents
22

23. Ложка дегтя в этом всем
23

24. Server-side rendering не
предусмотрен спецификацией
24

25. Проблема поддержки
25

26. Проблема поддержки
26

27. Почему поддержка WebComponens важна
• Выживет тот, кто будет ближе к спеке
• Vue следует спецификациям и здравому смыслу
27

28. Real talk
• https://medium.freecodecamp.org/between-the-wires-an-
interview-with-vue-js-creator-evan-you-e383cbf57cc4
28

29. 29

30. Contacts
30
Vitalii Ratushnyi
Email: v.ratyshnij@gmail.com
SkypeId: misreadable
Kyiv-meetup chat: https://t.me/vuejs_kyiv