В далекому 2016 році світ почув про вебкомпоненти, а одна ще тоді не дуже розумна команда, якій приходилось верстати дуже багато, вирішила спробувати те все в продукті, який би допоміг зменшити верстку. Про біди вебкомпонентів відомо всім, але про те, як вижити і дійти з альфи до стабільної версії знають не багато. Використання lit-element & lit-html і вирішення наболілих проблем, ось справня ціль моєї доповіді. Happy end обіцяю.

1. WE M EN & LI -EL T INWE M EN & LI -EL T IN
P O C OP O C O
1

2. Х О ЯХ О Я
Infopulse team/tech lead
BeerJS Zhytomyr
OdessaJS / Frontend://zt
Суддя DEV Challenge
Спікер
2

3. Г У Н 2016Г У Н 2016
3

4. Г У Н 2016Г У Н 2016
Попередній стек: Coffeescript, Pug, Stylus
3

5. Г У Н 2016Г У Н 2016
Визначаємо майбутній стек
Попередній стек: Coffeescript, Pug, Stylus
3

6. Г У Н 2016Г У Н 2016
Аналізуємо ринок
Попередній стек: Coffeescript, Pug, Stylus
Визначаємо майбутній стек
3

7. Г У Н 2016Г У Н 2016
Отримуємо деталі ТЗ
Попередній стек: Coffeescript, Pug, Stylus
Визначаємо майбутній стек
Аналізуємо ринок
3

8. РЕ Т : ПО Н А ЗА ІРЕ Т : ПО Н А ЗА І
Мінімальний об’єм збірки
Підтримка ІЕ11
Перевикористання коду
Автономність
Можливість наповнення менеджерами
4

9. C 2016C 2016
Січень 2017
5

10. С Е П О ТС Е П О Т
Січень - лютий
6

11. С Е П О ТС Е П О Т
Січень - лютий
6

12. С Е П О ТС Е П О Т
Січень - лютий
6

13. С Е П О ТС Е П О Т
Січень - лютий
6

14. С Е П О ТС Е П О Т
Січень - лютий
6

15. С Е П О ТС Е П О Т
Січень - лютий
6

16. Травень 2017
ВИ ІШИ ВИ ТИ "НА НІ" ВЕВИ ІШИ ВИ ТИ "НА НІ" ВЕ
КО Н И ДО ТО , ЯК ЦЕ С АКО Н И ДО ТО , ЯК ЦЕ С А
МЕЙН РІМОМЕЙН РІМО
7

17. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8

18. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8

19. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8

20. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8

21. PO M -> LI -EL T, LI -H LPO M -> LI -EL T, LI -H L
Травень 2017, Google IO

22. 9

23. LI -H L. TE L TI NELI -H L. TE L TI NE
10

24. LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-hot');
10

25. LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-hot');
document.body.innerHTML = '<div class="conference-is-hot">Hello</div>';
10

26. LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-hot');
document.body.innerHTML = '<div class="conference-is-hot">Hello</div>';
<div ng-class="{conference-is-hot: hasHot}">{{sayHello}}</div>
10

27. LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-hot');
document.body.innerHTML = '<div class="conference-is-hot">Hello</div>';
<div ng-class="{conference-is-hot: hasHot}">{{sayHello}}</div>
<div classname="{hasHot ? 'conference-is-hot' : ''}">{this.sayHello}</div
10

28. LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-hot');
document.body.innerHTML = '<div class="conference-is-hot">Hello</div>';
<div ng-class="{conference-is-hot: hasHot}">{{sayHello}}</div>
<div classname="{hasHot ? 'conference-is-hot' : ''}">{this.sayHello}</div
const confTemplate = `
<div class="${hasHot ? 'conference-is-hot' : ''}">
${this.sayHello}
</div>
`;
10

29. LI -H LLI -H L
LIT = LITTLE
LIT = LIGHTWEIGHT
LIT = LITERALS
11

30. LI -H LLI -H L
Effecient. Native templates
Expressive. FP patterns
Extensible. Different templates, frameworks
12

31. AR .MA V RE E DI T EAR .MA V RE E DI T E
13

32. AR .MA V RE E DI T EAR .MA V RE E DI T E
const employeeList = (employees) => html`
<ul>
${repeat(employees, (employee) => employee.id, (employee, index) => h
<li>${index}: ${employee.familyName}, ${employee.givenName}</li>
`)}
</ul>
`;
13

33. AR .MA V RE E DI T EAR .MA V RE E DI T E
const employeeList = (employees) => html`
<ul>
${repeat(employees, (employee) => employee.id, (employee, index) => h
<li>${index}: ${employee.familyName}, ${employee.givenName}</li>
`)}
</ul>
`;
html`
<ul>
${items.map((item) => html`<li>${item}</li>`)}
</ul>
`;
13

34. NO NNO N
14

35. NO NNO N
import {html} from 'lit-html';
html`<slot>Sorry, no content available. I am just fallback content</slot>
14

36. NO NNO N
import {html} from 'lit-html';
html`<slot>Sorry, no content available. I am just fallback content</slot>
import {nothing, html} from 'lit-html';
html`
<shadow-element>${user.isAdmin
? html`<button>DELETE</button>`
: nothing
}</shadow-element>
`;
14

37. OTOT
15

38. OTOT
Cache
15

39. OTOT
ShadyHtml & ShadyCSS
Cache
15

40. OTOT
Asynchronous directives
Cache
ShadyHtml & ShadyCSS
15

41. OTOT
Built-in directives
Cache
ShadyHtml & ShadyCSS
Asynchronous directives
15

42. TOTO
16

43. TOTO
16

44. ВЕ М ЕНВЕ М ЕН
17

45. ВЕ М ЕНВЕ М ЕН
Інкапсуляція
Ізоляція
Комбінованість
18

46. ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
19

47. ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
Elements Custom Elements
19

48. ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
DOM Encapsulation Shadow DOM
Elements Custom Elements
19

49. ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
Style Encapsulation Shadow DOM
Elements Custom Elements
DOM Encapsulation Shadow DOM
19

50. ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
Pseudo-Elements CSS Shadow Parts
Elements Custom Elements
DOM Encapsulation Shadow DOM
Style Encapsulation Shadow DOM
19

51. ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
ARIA Accessibility Object Model
Elements Custom Elements
DOM Encapsulation Shadow DOM
Style Encapsulation Shadow DOM
Pseudo-Elements CSS Shadow Parts
19

52. Justin Fagnani
WE CO N S AR LO LE DO APWE CO N S AR LO LE DO AP
20

53. Justin Fagnani
Me :)
WE CO N S AR LO LE DO APWE CO N S AR LO LE DO AP
LI -EL T AR HI LE DO APLI -EL T AR HI LE DO AP
20

54. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
21

55. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Створення DOM з шаблону
21

56. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Ефективне оновлення DOM
Створення DOM з шаблону
21

57. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Реактивність властивостей і данних
Створення DOM з шаблону
Ефективне оновлення DOM
21

58. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Перевикористання та інкапсуляція стилів
Створення DOM з шаблону
Ефективне оновлення DOM
Реактивність властивостей і данних
21

59. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Обов’язкові дії (створення Shadow Root)
Створення DOM з шаблону
Ефективне оновлення DOM
Реактивність властивостей і данних
Перевикористання та інкапсуляція стилів
21

60. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
...
Створення DOM з шаблону
Ефективне оновлення DOM
Реактивність властивостей і данних
Перевикористання та інкапсуляція стилів
Обов’язкові дії (створення Shadow Root)
21

61. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
22

62. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Фреймворк?
22

63. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Поліфіл?
Фреймворк?
22

64. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Бібліотека?
Фреймворк?
Поліфіл?
22

65. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Лише базовий клас!
Фреймворк?
Поліфіл?
Бібліотека?
22

66. LI -EL TLI -EL T
class HelloElement extends LitElement {
static properties = {
conference: String
};
render() {
return html`<div>Hello ${this.conference}</div>`;
}
}
customElements.define('hello-world', HelloElement);
< html>
< head>
<script type="module" src="./hello-element.js"></script>
< /head>
< body>
<hello-world conference="JSFest"></hello-world>
<hello-world conference="Kyiv"></hello-world>
< /body>
< /html>
23

67. CC
class HelloElement extends LitElement {
static properties = {
conference: String
};
static styles = css`
:host {
background: purple;
}
div {
color: yellow;
}
`;
render() {
return html`<div>Hello ${this.conference}</div>`;
}
}
customElements.define('hello-world', HelloElement);
<hello-world conference="JSFest"></hello-world>
<div>Zhytomyr</div>
<hello-world conference="Kyiv"></hello-world>
24

68. **
СУПЕР УНІВЕРСАЛЬНИЙ СЕЛЕКТОРСУПЕР УНІВЕРСАЛЬНИЙ СЕЛЕКТОР
25

69. В А Т ТІВ А Т ТІ
26

70. В А Т ТІВ А Т ТІ
ТИПТИП
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type: String,
},
};
}
26

71. В А Т ТІВ А Т ТІ
ІМ’ЯІМ’Я
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type: String,
attributeName: 'font-family'
},
};
}
26

72. В А Т ТІВ А Т ТІ
РЕФЛЕКЦІЯРЕФЛЕКЦІЯ
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type: String,
attributeName: 'font-family',
reflect: true
},
};
}
26

73. В А Т ТІВ А Т ТІ
ВЛАСНА УМОВАВЛАСНА УМОВА
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type: String,
attributeName: 'font-family',
reflect: true,
hasChanged(value, oldValue) {
return value.type !== 'ttf'
}
},
};
}
26

74. В А Т ТІВ А Т ТІ
КОНВЕРТЕРКОНВЕРТЕР
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type: String,
attributeName: 'font-family',
reflect: true,
hasChanged(value, oldValue) {
return value.type !== 'ttf'
},
converter: {
fromAttribute: (value, type) => { }
toAttribute: (value, type) => { }
}
},
};
}
26

75. ЖИ ЄВИЙ ЦИЖИ ЄВИЙ ЦИ
API постійно змінюється
@todo updateComplete
27

76. RE TU TRE TU T
28

77. UP CO LUP CO L
// `async` makes the function return a Promise & lets you use `await`
async myFunc(data) {
// Set a property, triggering an update
this.myProp = data;
// Wait for the updateComplete promise to resolve
await this.updateComplete;
// ...do stuff...
return 'done';
}
29

78. ВИ С А Н З ДЕ ТО ТАВИ С А Н З ДЕ ТО ТА
TT
@customElement('hello-world')
class HelloElement extends LitElement {
@property() name;
render() {
return html`<div>Hello ${this.conference}</div>`;
}
}
30

79. MO / NO LEMO / NO LE
<script type="module" src="component.js"></script>
<script nomodule="" src="component-die-ie.js"></script>
31

80. ІН Е Р ІЯ КО Н ІВ ІІН Е Р ІЯ КО Н ІВ І
ПЕ КО Т Я У VU /REПЕ КО Т Я У VU /RE
[ТУТ МАВ БУДЕ КОД, АЛЕ ЦЕ НЕ ПОТРІБНО][ТУТ МАВ БУДЕ КОД, АЛЕ ЦЕ НЕ ПОТРІБНО]
32

81. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
33

82. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
Вебкомпоненти всюди
33

83. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
Продано першим трьом замовникам
Вебкомпоненти всюди
33

84. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
Більше ніхто не звільняється
Вебкомпоненти всюди
Продано першим трьом замовникам
33

85. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML
34

86. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML
Літ елемент буде зменшуватись до повного знищення
34

87. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML
Літ хтмл буде інтегруватись в стандарт
Літ елемент буде зменшуватись до повного знищення
34

88. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
35

89. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
Вебкомпоненти всюди
35

90. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
Стандартизація
Вебкомпоненти всюди
35

91. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
Інтеграція з фреймворками
Вебкомпоненти всюди
Стандартизація
35

92. ПО Н ЯПО Н Я
36

93. ПО Н ЯПО Н Я
lit-element.polymer-project.org
36

94. ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
36

95. ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
36

96. ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
vaadin.com/tutorials/lit-element/starting-a-lit-element-project
36

97. ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
vaadin.com/tutorials/lit-element/starting-a-lit-element-project
www.webcomponents.org
36

98. ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
vaadin.com/tutorials/lit-element/starting-a-lit-element-project
www.webcomponents.org
[DevFest Nantes 2019] Building a Complex Application with Web
Components and LitElement
36

99. ЯК МЕ З АЙТИЯК МЕ З АЙТИ
Twitter: sssrsav1
Telegram: @RomanSavitskyi
https://www.facebook.com/groups/beerJSZhytomyr
37