Компонентный подход

Владимир Дашукевич

{
Тема: Компонентный подход,
Спикер: Владимир Дашукевич,
Компания: XBSoftware,
Конференция: 4front
}

Что такое рай для Frontend программиста?

Компонент

Компонент:

SOLID

Что такое компонентный подход?

Компонент:

  1. Независимый модуль исходного кода программы
  2. Предназначенный для повторного использования
  3. Выполняет одну функцию
  4. Содержит минимальный функционал
  5. Хорошо тестируем

Компонент:

  1. Независимый модуль исходного кода программы
  2. Предназначенный для повторного использования
  3. Выполняет одну функцию
  4. Содержит минимальный функционал
  5. Хорошо тестируем

Компонент:

  1. Независимый модуль исходного кода программы
  2. Предназначенный для повторного использования
  3. Выполняет одну функцию
  4. Содержит минимальный функционал
  5. Хорошо тестируем

Компонент:

  1. Независимый модуль исходного кода программы
  2. Предназначенный для повторного использования
  3. Выполняет одну функцию
  4. Содержит минимальный функционал
  5. Хорошо тестируем

Компонент:

  1. Независимый модуль исходного кода программы
  2. Предназначенный для повторного использования
  3. Выполняет одну функцию
  4. Содержит минимальный функционал
  5. Хорошо тестируем

И ещё 100000 примеров

Что нам делать?

Knockout

React

Webix

Angular

Angular 2

Кто чем пользуется?

Web Components

Что нам нужно?

Компонент:

  1. HTML
  2. CSS
  3. JavaScript

CustomElements

Элементы:

CustomElements:

  1. Новый элемент
  2. *Расширение старого элемент

Жизненный цикл элемента:

Общение с внешним миром через CustomEvent

Demo

Итого:

Shadow DOM

Shadow DOM:

Кто видел Shadow DOM?

Shadow DOM:

Как его использовать

Demo

Light vs Shadow DOM?

                <beer-img>
                	<input slot='someinput'>
                	<img>
                </beer-img> 
            
                <beer-img>
                	<slot name='someinput'></slot>
                	<slot></slot>
                </beer-img> 
            
                <beer-img>
                	<slot name='someinput'></slot>
                		<input slot='someinput'>
                	</slot>
                	<slot>
                		<img>
                	</slot>
                </beer-img> 
            

Style

:host

:host-context(selector)

Примеры:

::slotted(selector)

Примеры:

Внешние стили

beer-img

                beer-img {
                	color: red;
                }
            
                beer-img {
                	--fancy-tabs-bg: red;
                }
            
                :host img {
                	color: var(--fancy-tabs-bg, black);
                }
            

Demo

Все прекрасно?

Чего нам не хватает?

Решим)

Demo

Итого

polyfill

Чего не хватает?

Polymer

Polymer

Demo

Только ли Polymer

One more thing

Думайте о будущем)

Questions

Facebook: dashukevich.vova
Twitter: life__777