Виртуальный DOM и синхронизация UI

Спасибо. Мне "зашёл" этот скринкаст. Особенно интересно про сдвиг при синхронизации виртуального дом с реальным. Теперь понятно почему тот vue в цикле for просит уникальный key.

Дмитрий, спасибо! Скринкаст великолепный, всё больше проясняется работа с фронтендом! На основе информации с предыдущего видео удалось упростить несколько задач, но оказалось что можно сделать ещё проще и интереснее! Переделывать в ближайшее время не буду, оставлю на память, очень наглядно видно хронологию развития мысли!

Огонь

Спасибо :)

Ну когда же новое видео? Нет сил ждать))))

Супер! Самое главное - это понимание принципов, а после таких скринкастов, где все разложено по полочкам, понимание 100%-е

Великолепно!

Для большого и вложенного по глубине dom, оптимально ли использовать рекурсию? Или браузер примерно так же поступает когда собирает дом?

Классное пояснение. Мне понравилось.

А что если при переборе атрибутов в процедуре sync использовать код ниже?

realNode.setAttribute(attribute.name, attribute.value)

И зачем в этой же процедуре при синхронизации атрибутов мы отдельно присваиваем класс и айди с помощью свойств id и className, если потом мы все равно перебираем коллекцию атрибутов, в которой они хранятся?

Крутой курс! жаль до майских не наткнулся на него))

Не знаю почему, но эта штука работает Сodepen.

function renderDom(realDom, virtualDom) {
  let newVirtualDom = new DOMParser().parseFromString(virtualDom, 'text/html');
  newVirtualDom = newVirtualDom.children[0].children[1].children[0];

  const virtualDomRoot = document.createElement(realDom.tagName);
  virtualDomRoot.id = realDom.id;
  virtualDomRoot.append(newVirtualDom);

  synchronization(realDom, virtualDomRoot);
}