Shadow DOM != Virtual DOM

12

Від автора: DOM або Document Object Model (об’єктна модель документа) – знайома всім концепція. Деяким вона подобаються, але у більшій частині вона викликає лише головний біль. John Resig навіть сказав, що DOM це сміття.

Тема вже давно застаріла, а безліч питань, які раніше хвилювали людей, пішли в минуле, так як вони були пов’язані не з DOM, а з набором інструментів для роботи з ним (вони реально ускладнювали нам життя).

На дворі 2017, і сьогоднішні інструменти для отримання доступу і маніпулювання вузлами DOM вражають (особливо якщо ви, як і я, починали з часів, коли document.getElementById був межею мрій).

Погана сторона роботи з DOM полягає в тому, що цей процес досить витратний. Більш точні перемальовування можуть вдарити і вдарять по апаратних ресурсів, що неминуче поставить під загрозу продуктивність ваших додатків.

Shadow DOM != Virtual DOM

Virtual DOM

Virtual DOM – повне уявлення реального DOM. Його найважливішою особливістю є групування змін і виконання одиночного повторного візуалізації замість безлічі дрібних. Якщо коротко, то можна сказати, що Virtual DOM вирішує проблеми, пов’язані з продуктивністю (Не буду вдаватися в подробиці принципу роботи Virtual DOM. В рамках цієї статті досить знати, навіщо він потрібен.)

Shadow DOM

Shadow DOM != Virtual DOM

Shadow DOM, як справжній інтроверт, надійно захищає себе від впливу навколишніх елементів і не зацікавлений і не цікавиться змінами зовні.

Запитайте себе, яку головну UI-проблему вирішують фреймворки типу React і VueJS?

Інкапсуляція

CSS – складна штука. Все стає ще складніше, якщо ви з’єднуєте стилі, намагаючись повторно їх використовувати в різних комбінаціях. Це неминуче призводить до регресивним помилок інтерфейсу, складного обслуговування і поганий масштабованості. І все ж, я вважаю, що основна проблема це не CSS, а те, як ми його використовуємо.

Shadow DOM – інструмент, що допомагає обійти інкапсуляцію DOM на нативному рівні. Суть не просто в CSS, а в елементах.

На відміну від звичайного DOM Shadow DOM йде маленькими шматочками. Тобто це не повне уявлення всього DOM. Уявіть Shadow DOM у вигляді лего, формує реальний DOM, де кожна цеглинка являє собою окремий DOM.

Shadow DOM – це інкапсуляція.

Shadow DOM != Virtual DOM

Згідно MDN і w3, специфікація Shadow DOM знаходиться в розробці. Тому підтримка в браузерах не дуже хороша… і, швидше за все, поточна реалізація зміниться. Проте основна концепція повинна зберегтися.

Shadow DOM != Virtual DOM

Висновок

Сподіваюся, тепер ви зрозуміли, яку проблему намагається вирішити Shadow DOM, і чим він відрізняється від Virtual DOM.

У недалекому майбутньому потрібно буде знати, як обробляти інкапсуляцію і компоненти на рівні браузера. Коли настане цей день, безліч кастомних функцій в фреймворках стануть не потрібні. Майже завжди краще використовувати нативну реалізацію, ніж робити свою… «Поиграйтесь з Shadow DOM, завжди корисно вивчити щось нове.»