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.

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

52 views

Published on

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

Published in: Education
  • Be the first to comment

  • 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

×