Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
3
Г У Н 2016Г У Н 2016
Попередній стек: Coffeescript, Pug, Stylus
3
Г У Н 2016Г У Н 2016
Визначаємо майбутній стек
Попередній стек: Coffeescript, Pug, Stylus
3
Г У Н 2016Г У Н 2016
Аналізуємо ринок
Попередній стек: Coffeescript, Pug, Stylus
Визначаємо майбутній стек
3
Г У Н 2016Г У Н 2016
Отримуємо деталі ТЗ
Попередній стек: Coffeescript, Pug, Stylus
Визначаємо майбутній стек
Аналізуємо р...
РЕ Т : ПО Н А ЗА ІРЕ Т : ПО Н А ЗА І
Мінімальний об’єм збірки
Підтримка ІЕ11
Перевикористання коду
Автономність
Можливість...
C 2016C 2016
Січень 2017
5
С Е П О ТС Е П О Т
Січень - лютий
6
С Е П О ТС Е П О Т
Січень - лютий
6
С Е П О ТС Е П О Т
Січень - лютий
6
С Е П О ТС Е П О Т
Січень - лютий
6
С Е П О ТС Е П О Т
Січень - лютий
6
С Е П О ТС Е П О Т
Січень - лютий
6
Травень 2017
ВИ ІШИ ВИ ТИ "НА НІ" ВЕВИ ІШИ ВИ ТИ "НА НІ" ВЕ
КО Н И ДО ТО , ЯК ЦЕ С АКО Н И ДО ТО , ЯК ЦЕ С А
МЕЙН РІМОМЕЙН...
КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8
КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8
КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8
КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К
8
PO M -> LI -EL T, LI -H LPO M -> LI -EL T, LI -H L
Травень 2017, Google IO
9
LI -H L. TE L TI NELI -H L. TE L TI NE
10
LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-h...
LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-h...
LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-h...
LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-h...
LI -H L. TE L TI NELI -H L. TE L TI NE
var div = document.createElement('div');
div.setAttribute('class', 'conference-is-h...
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
AR .MA V RE E DI T EAR .MA V RE E DI T E
const employeeList = (employees) => html`
<ul>
${repeat(employees, (employee) => ...
AR .MA V RE E DI T EAR .MA V RE E DI T E
const employeeList = (employees) => html`
<ul>
${repeat(employees, (employee) => ...
NO NNO N
14
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 {...
OTOT
15
OTOT
Cache
15
OTOT
ShadyHtml & ShadyCSS
Cache
15
OTOT
Asynchronous directives
Cache
ShadyHtml & ShadyCSS
15
OTOT
Built-in directives
Cache
ShadyHtml & ShadyCSS
Asynchronous directives
15
TOTO
16
TOTO
16
ВЕ М ЕНВЕ М ЕН
17
ВЕ М ЕНВЕ М ЕН
Інкапсуляція
Ізоляція
Комбінованість
18
ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
19
ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
Elements Custom Elements
19
ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
DOM Encapsulation Shadow DOM
Elements Custom Elements
19
ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
Style Encapsulation Shadow DOM
Elements Custom Elements
DOM Encapsulation Shadow DOM
...
ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
Pseudo-Elements CSS Shadow Parts
Elements Custom Elements
DOM Encapsulation Shadow DO...
ВЕ М ЕНВЕ М ЕН
Нативні Вебкомпоненти
ARIA Accessibility Object Model
Elements Custom Elements
DOM Encapsulation Shadow DOM...
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
Створення DOM з шаблону
21
П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Реактивність властивостей і данних
Створення DOM з шаблону
Ефективне оновленн...
П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Перевикористання та інкапсуляція стилів
Створення DOM з шаблону
Ефективне оно...
П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
Обов’язкові дії (створення Shadow Root)
Створення DOM з шаблону
Ефективне оно...
П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ
...
Створення DOM з шаблону
Ефективне оновлення DOM
Реактивність властивостей...
LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
22
LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Фреймворк?
22
LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Поліфіл?
Фреймворк?
22
LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Бібліотека?
Фреймворк?
Поліфіл?
22
LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ?
Лише базовий клас!
Фреймворк?
Поліфіл?
Бібліотека?
22
LI -EL TLI -EL T
class HelloElement extends LitElement {
static properties = {
conference: String
};
render() {
return htm...
CC
class HelloElement extends LitElement {
static properties = {
conference: String
};
static styles = css`
:host {
backgr...
**
СУПЕР УНІВЕРСАЛЬНИЙ СЕЛЕКТОРСУПЕР УНІВЕРСАЛЬНИЙ СЕЛЕКТОР
25
В А Т ТІВ А Т ТІ
26
В А Т ТІВ А Т ТІ
ТИПТИП
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type: String,
},...
В А Т ТІВ А Т ТІ
ІМ’ЯІМ’Я
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type: String,
...
В А Т ТІВ А Т ТІ
РЕФЛЕКЦІЯРЕФЛЕКЦІЯ
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type...
В А Т ТІВ А Т ТІ
ВЛАСНА УМОВАВЛАСНА УМОВА
class HelloElement extends LitElement {
static get properties() {
'fontFamily': ...
В А Т ТІВ А Т ТІ
КОНВЕРТЕРКОНВЕРТЕР
class HelloElement extends LitElement {
static get properties() {
'fontFamily': {
type...
ЖИ ЄВИЙ ЦИЖИ ЄВИЙ ЦИ
API постійно змінюється
@todo updateComplete
27
RE TU TRE TU T
28
UP CO LUP CO L
// `async` makes the function return a Promise & lets you use `await`
async myFunc(data) {
// Set a propert...
ВИ С А Н З ДЕ ТО ТАВИ С А Н З ДЕ ТО ТА
TT
@customElement('hello-world')
class HelloElement extends LitElement {
@property(...
MO / NO LEMO / NO LE
<script type="module" src="component.js"></script>
<script nomodule="" src="component-die-ie.js"></sc...
ІН Е Р ІЯ КО Н ІВ ІІН Е Р ІЯ КО Н ІВ І
ПЕ КО Т Я У VU /REПЕ КО Т Я У VU /RE
[ТУТ МАВ БУДЕ КОД, АЛЕ ЦЕ НЕ ПОТРІБНО][ТУТ МАВ...
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
33
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
Вебкомпоненти всюди
33
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
Продано першим трьом замовникам
Вебкомпоненти всюди
33
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
В ПРОЕКТІВ ПРОЕКТІ
Більше ніхто не звільняється
Вебкомпоненти всюди
Продано першим трьо...
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML
34
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML
Літ елемент буде зменшуватись до повного з...
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML
Літ хтмл буде інтегруватись в стандарт
Літ...
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
35
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
Вебкомпоненти всюди
35
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
Стандартизація
Вебкомпоненти всюди
35
РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є
У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ
Інтеграція з фреймворками
Вебкомпоненти всюди
Стандарт...
ПО Н ЯПО Н Я
36
ПО Н ЯПО Н Я
lit-element.polymer-project.org
36
ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
36
ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
36
ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
vaadin.c...
ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
vaadin.c...
ПО Н ЯПО Н Я
lit-element.polymer-project.org
lit-html.polymer-project.org
github.com/web-padawan/awesome-lit-html
vaadin.c...
ЯК МЕ З АЙТИЯК МЕ З АЙТИ
Twitter: sssrsav1
Telegram: @RomanSavitskyi
https://www.facebook.com/groups/beerJSZhytomyr
37
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 1 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 2 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 3 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 4 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 5 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 6 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 7 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 8 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 9 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 10 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 11 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 12 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 13 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 14 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 15 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 16 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 17 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 18 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 19 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 20 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 21 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 22 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 23 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 24 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 25 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 26 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 27 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 28 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 29 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 30 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 31 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 32 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 33 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 34 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 35 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 36 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 37 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 38 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 39 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 40 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 41 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 42 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 43 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 44 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 45 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 46 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 47 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 48 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 49 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 50 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 51 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 52 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 53 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 54 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 55 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 56 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 57 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 58 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 59 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 60 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 61 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 62 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 63 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 64 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 65 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 66 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 67 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 68 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 69 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 70 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 71 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 72 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 73 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 74 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 75 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 76 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 77 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 78 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 79 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 80 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 81 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 82 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 83 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 84 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 85 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 86 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 87 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 88 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 89 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 90 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 91 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 92 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 93 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 94 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 95 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 96 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 97 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 98 JS Fest 2019/Autumn. Роман Савіцький. Webcomponents & lit-element in production Slide 99
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

  1. 1. WE M EN & LI -EL T INWE M EN & LI -EL T IN P O C OP O C O 1
  2. 2. Х О ЯХ О Я Infopulse team/tech lead BeerJS Zhytomyr OdessaJS / Frontend://zt Суддя DEV Challenge Спікер 2
  3. 3. Г У Н 2016Г У Н 2016 3
  4. 4. Г У Н 2016Г У Н 2016 Попередній стек: Coffeescript, Pug, Stylus 3
  5. 5. Г У Н 2016Г У Н 2016 Визначаємо майбутній стек Попередній стек: Coffeescript, Pug, Stylus 3
  6. 6. Г У Н 2016Г У Н 2016 Аналізуємо ринок Попередній стек: Coffeescript, Pug, Stylus Визначаємо майбутній стек 3
  7. 7. Г У Н 2016Г У Н 2016 Отримуємо деталі ТЗ Попередній стек: Coffeescript, Pug, Stylus Визначаємо майбутній стек Аналізуємо ринок 3
  8. 8. РЕ Т : ПО Н А ЗА ІРЕ Т : ПО Н А ЗА І Мінімальний об’єм збірки Підтримка ІЕ11 Перевикористання коду Автономність Можливість наповнення менеджерами 4
  9. 9. C 2016C 2016 Січень 2017 5
  10. 10. С Е П О ТС Е П О Т Січень - лютий 6
  11. 11. С Е П О ТС Е П О Т Січень - лютий 6
  12. 12. С Е П О ТС Е П О Т Січень - лютий 6
  13. 13. С Е П О ТС Е П О Т Січень - лютий 6
  14. 14. С Е П О ТС Е П О Т Січень - лютий 6
  15. 15. С Е П О ТС Е П О Т Січень - лютий 6
  16. 16. Травень 2017 ВИ ІШИ ВИ ТИ "НА НІ" ВЕВИ ІШИ ВИ ТИ "НА НІ" ВЕ КО Н И ДО ТО , ЯК ЦЕ С АКО Н И ДО ТО , ЯК ЦЕ С А МЕЙН РІМОМЕЙН РІМО 7
  17. 17. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К 8
  18. 18. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К 8
  19. 19. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К 8
  20. 20. КО Н И / Ф ЕЙМ О ККО Н И / Ф ЕЙМ О К 8
  21. 21. PO M -> LI -EL T, LI -H LPO M -> LI -EL T, LI -H L Травень 2017, Google IO
  22. 22. 9
  23. 23. LI -H L. TE L TI NELI -H L. TE L TI NE 10
  24. 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. 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. 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. 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. 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. 29. LI -H LLI -H L LIT = LITTLE LIT = LIGHTWEIGHT LIT = LITERALS 11
  30. 30. LI -H LLI -H L Effecient. Native templates Expressive. FP patterns Extensible. Different templates, frameworks 12
  31. 31. AR .MA V RE E DI T EAR .MA V RE E DI T E 13
  32. 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. 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. 34. NO NNO N 14
  35. 35. NO NNO N import {html} from 'lit-html'; html`<slot>Sorry, no content available. I am just fallback content</slot> 14
  36. 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. 37. OTOT 15
  38. 38. OTOT Cache 15
  39. 39. OTOT ShadyHtml & ShadyCSS Cache 15
  40. 40. OTOT Asynchronous directives Cache ShadyHtml & ShadyCSS 15
  41. 41. OTOT Built-in directives Cache ShadyHtml & ShadyCSS Asynchronous directives 15
  42. 42. TOTO 16
  43. 43. TOTO 16
  44. 44. ВЕ М ЕНВЕ М ЕН 17
  45. 45. ВЕ М ЕНВЕ М ЕН Інкапсуляція Ізоляція Комбінованість 18
  46. 46. ВЕ М ЕНВЕ М ЕН Нативні Вебкомпоненти 19
  47. 47. ВЕ М ЕНВЕ М ЕН Нативні Вебкомпоненти Elements Custom Elements 19
  48. 48. ВЕ М ЕНВЕ М ЕН Нативні Вебкомпоненти DOM Encapsulation Shadow DOM Elements Custom Elements 19
  49. 49. ВЕ М ЕНВЕ М ЕН Нативні Вебкомпоненти Style Encapsulation Shadow DOM Elements Custom Elements DOM Encapsulation Shadow DOM 19
  50. 50. ВЕ М ЕНВЕ М ЕН Нативні Вебкомпоненти Pseudo-Elements CSS Shadow Parts Elements Custom Elements DOM Encapsulation Shadow DOM Style Encapsulation Shadow DOM 19
  51. 51. ВЕ М ЕНВЕ М ЕН Нативні Вебкомпоненти ARIA Accessibility Object Model Elements Custom Elements DOM Encapsulation Shadow DOM Style Encapsulation Shadow DOM Pseudo-Elements CSS Shadow Parts 19
  52. 52. Justin Fagnani WE CO N S AR LO LE DO APWE CO N S AR LO LE DO AP 20
  53. 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. 54. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ 21
  55. 55. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ Створення DOM з шаблону 21
  56. 56. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ Ефективне оновлення DOM Створення DOM з шаблону 21
  57. 57. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ Реактивність властивостей і данних Створення DOM з шаблону Ефективне оновлення DOM 21
  58. 58. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ Перевикористання та інкапсуляція стилів Створення DOM з шаблону Ефективне оновлення DOM Реактивність властивостей і данних 21
  59. 59. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ Обов’язкові дії (створення Shadow Root) Створення DOM з шаблону Ефективне оновлення DOM Реактивність властивостей і данних Перевикористання та інкапсуляція стилів 21
  60. 60. П О ІЛИ В С Е ФІКА ІЯХП О ІЛИ В С Е ФІКА ІЯХ ... Створення DOM з шаблону Ефективне оновлення DOM Реактивність властивостей і данних Перевикористання та інкапсуляція стилів Обов’язкові дії (створення Shadow Root) 21
  61. 61. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ? 22
  62. 62. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ? Фреймворк? 22
  63. 63. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ? Поліфіл? Фреймворк? 22
  64. 64. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ? Бібліотека? Фреймворк? Поліфіл? 22
  65. 65. LI -EL T. ЩО ЦЕ?LI -EL T. ЩО ЦЕ? Лише базовий клас! Фреймворк? Поліфіл? Бібліотека? 22
  66. 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. 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. 68. ** СУПЕР УНІВЕРСАЛЬНИЙ СЕЛЕКТОРСУПЕР УНІВЕРСАЛЬНИЙ СЕЛЕКТОР 25
  69. 69. В А Т ТІВ А Т ТІ 26
  70. 70. В А Т ТІВ А Т ТІ ТИПТИП class HelloElement extends LitElement { static get properties() { 'fontFamily': { type: String, }, }; } 26
  71. 71. В А Т ТІВ А Т ТІ ІМ’ЯІМ’Я class HelloElement extends LitElement { static get properties() { 'fontFamily': { type: String, attributeName: 'font-family' }, }; } 26
  72. 72. В А Т ТІВ А Т ТІ РЕФЛЕКЦІЯРЕФЛЕКЦІЯ class HelloElement extends LitElement { static get properties() { 'fontFamily': { type: String, attributeName: 'font-family', reflect: true }, }; } 26
  73. 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. 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. 75. ЖИ ЄВИЙ ЦИЖИ ЄВИЙ ЦИ API постійно змінюється @todo updateComplete 27
  76. 76. RE TU TRE TU T 28
  77. 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. 78. ВИ С А Н З ДЕ ТО ТАВИ С А Н З ДЕ ТО ТА TT @customElement('hello-world') class HelloElement extends LitElement { @property() name; render() { return html`<div>Hello ${this.conference}</div>`; } } 30
  79. 79. MO / NO LEMO / NO LE <script type="module" src="component.js"></script> <script nomodule="" src="component-die-ie.js"></script> 31
  80. 80. ІН Е Р ІЯ КО Н ІВ ІІН Е Р ІЯ КО Н ІВ І ПЕ КО Т Я У VU /REПЕ КО Т Я У VU /RE [ТУТ МАВ БУДЕ КОД, АЛЕ ЦЕ НЕ ПОТРІБНО][ТУТ МАВ БУДЕ КОД, АЛЕ ЦЕ НЕ ПОТРІБНО] 32
  81. 81. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є В ПРОЕКТІВ ПРОЕКТІ 33
  82. 82. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є В ПРОЕКТІВ ПРОЕКТІ Вебкомпоненти всюди 33
  83. 83. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є В ПРОЕКТІВ ПРОЕКТІ Продано першим трьом замовникам Вебкомпоненти всюди 33
  84. 84. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є В ПРОЕКТІВ ПРОЕКТІ Більше ніхто не звільняється Вебкомпоненти всюди Продано першим трьом замовникам 33
  85. 85. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML 34
  86. 86. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML Літ елемент буде зменшуватись до повного знищення 34
  87. 87. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є LIT-ELEMENT & LIT-HTMLLIT-ELEMENT & LIT-HTML Літ хтмл буде інтегруватись в стандарт Літ елемент буде зменшуватись до повного знищення 34
  88. 88. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ 35
  89. 89. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ Вебкомпоненти всюди 35
  90. 90. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ Стандартизація Вебкомпоненти всюди 35
  91. 91. РЕ Ь И ТА МАЙБУ ЄРЕ Ь И ТА МАЙБУ Є У ВЕБКОМПОНЕНТАХУ ВЕБКОМПОНЕНТАХ Інтеграція з фреймворками Вебкомпоненти всюди Стандартизація 35
  92. 92. ПО Н ЯПО Н Я 36
  93. 93. ПО Н ЯПО Н Я lit-element.polymer-project.org 36
  94. 94. ПО Н ЯПО Н Я lit-element.polymer-project.org lit-html.polymer-project.org 36
  95. 95. ПО Н ЯПО Н Я lit-element.polymer-project.org lit-html.polymer-project.org github.com/web-padawan/awesome-lit-html 36
  96. 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. 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. 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. 99. ЯК МЕ З АЙТИЯК МЕ З АЙТИ Twitter: sssrsav1 Telegram: @RomanSavitskyi https://www.facebook.com/groups/beerJSZhytomyr 37

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

Views

Total views

522

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×