�ݺ�ߣ

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

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

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

Г У Н 2016Г У Н 2016
Визначаємо майбутній стек
3

Г У Н 2016Г У Н 2016
Аналізуємо ринок
3

Г У Н 2016Г У Н 2016
Отримуємо деталі ТЗ
Аналізуємо ринок
3

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

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

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

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

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

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

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

var div = document.createElement('div');
div.setAttribute('class', 'conference-is-hot');
10

document.body.innerHTML = '<div class="conference-is-hot">Hello</div>';
10

<div ng-class="{conference-is-hot: hasHot}">{{sayHello}}</div>
10

<div classname="{hasHot ? 'conference-is-hot' : ''}">{this.sayHello}</div
10

<div classname="{hasHot ? 'conference-is-hot' : ''}">{this.sayHello}</div
const confTemplate = `
<div class="${hasHot ? 'conference-is-hot' : ''}">
${this.sayHello}
</div>
`;
10

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

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

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

const employeeList = (employees) => html`
<ul>
${repeat(employees, (employee) => employee.id, (employee, index) => h
<li>${index}: ${employee.familyName}, ${employee.givenName}</li>
`)}
</ul>
`;
13

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

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

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

OTOT
ShadyHtml & ShadyCSS
Cache
15

OTOT
Asynchronous directives
Cache
15

OTOT
Built-in directives
Cache
Asynchronous directives
15

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

Нативні Вебкомпоненти
19

Elements Custom Elements
19

DOM Encapsulation Shadow DOM
19

Style Encapsulation Shadow DOM
19

Pseudo-Elements CSS Shadow Parts
19

ARIA Accessibility Object Model
Pseudo-Elements CSS Shadow Parts
19

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

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

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

Створення DOM з шаблону
21

Ефективне оновлення DOM
21

Реактивність властивостей і данних
21

Перевикористання та інкапсуляція стилів
21

Обов’язкові дії (створення Shadow Root)
21

...
Обов’язкові дії (створення Shadow Root)
21

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

Фреймворк?
22

Поліфіл?
Фреймворк?
22

Бібліотека?
Фреймворк?
Поліфіл?
22

Лише базовий клас!
Фреймворк?
Поліфіл?
Бібліотека?
22

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=/slideshow/js-fest-2019autumn-webcomponents-litelement-in-production/193111150/"./hello-element.js"></script>
< /head>
< body>
<hello-world conference="JSFest"></hello-world>
<hello-world conference="Kyiv"></hello-world>
< /body>
< /html>
23

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

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

В А Т ТІВ А Т ТІ
ТИПТИП
static get properties() {
'fontFamily': {
type: String,
},
};
}
26

ІМ’ЯІМ’Я
'fontFamily': {
type: String,
attributeName: 'font-family'
},
};
}
26

РЕФЛЕКЦІЯРЕФЛЕКЦІЯ
'fontFamily': {
type: String,
attributeName: 'font-family',
reflect: true
},
};
}
26

ВЛАСНА УМОВАВЛАСНА УМОВА
'fontFamily': {
type: String,
reflect: true,
hasChanged(value, oldValue) {
return value.type !== 'ttf'
}
},
};
}
26

КОНВЕРТЕРКОНВЕРТЕР
'fontFamily': {
type: String,
reflect: true,
hasChanged(value, oldValue) {
return value.type !== 'ttf'
},
converter: {
fromAttribute: (value, type) => { }
toAttribute: (value, type) => { }
}
},
};
}
26

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

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

ВИ С А Н З ДЕ ТО ТАВИ С А Н З ДЕ ТО ТА
TT
@customElement('hello-world')
@property() name;
render() {
}
}
30

MO / NO LEMO / NO LE
<script type="module" src=/slideshow/js-fest-2019autumn-webcomponents-litelement-in-production/193111150/"component.js"></script>
<script nomodule="" src="component-die-ie.js"></script>
31

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

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

Вебкомпоненти всюди
33

Продано першим трьом замовникам
33

Більше ніхто не звільняється
Продано першим трьом замовникам
33

LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML
34

Літ елемент буде зменшуватись до повного знищення
34

Літ хтмл буде інтегруватись в стандарт
Літ елемент буде зменшуватись до повного знищення
34

У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
35

35

Стандартизація
35

Інтеграція з фреймворками
Стандартизація
35

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

lit-html.polymer-project.org
36

github.com/web-padawan/awesome-lit-html
36

vaadin.com/tutorials/lit-element/starting-a-lit-element-project
36

www.webcomponents.org
36

www.webcomponents.org
[DevFest Nantes 2019] Building a Complex Application with Web
Components and LitElement
36

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

�ݺ�ߣ

JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production

More Related Content

JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production