Vidom — blazingly fast alternative to React

в 10:31, , рубрики: javascript, React, ReactJS, vidom, virtual dom, метки:

Давненько я ничего тут не писал, а сегодня как раз пятница, так что можно набросить на React рассказать о своей поделке Vidom.

Краткая история

Когда только React входил в стадию хайпа (начало 2014 года), идея virtual dom, а также всего с ним связанного (диффы, патчи), показалась мне крайне интересной и я решил осознать ее и прочувствовать через свою собственную реализацию. Я посмотрел существовавшие на тот момент имплементации, сделал несколько подходов, переписывая все несколько раз с нуля, чтобы добиться максимально производительности. Потом, постепенно, появились компоненты, хуки, контексты, серверный рендеринг, es2015 и т.д. Затем я посмотрел что людям в React доставляет боль при использовании, и одними из самых популярных проблем было: производительность серверного рендеринга и отсутствие поддержки фрагментов (этому таску в трекере реакта уже почти два года!). Засучив рукава, я добавил поддержку фрагментов. А производительность ssr в Vidom изначально была в него заложена, результат бенчмарка можно увидеть ниже.

В результате получилось:

Что как в React

  • виртуальный DOM под капотом
  • jsx
  • возможность создавать свои высокоуровневые компоненты, как на основе классов, так и на основе функций
  • lifecycle-хуки в компонентах на основе классов
  • легкая подписка на DOM-события
  • context api
  • изоморфизм, ssr, возможность реиспользовать разметку, пришедшую с сервера
  • плагин для chrome developer tools

Что не как в React

  • скорость, скорость и еще раз скорость
  • целевая платформа только браузеры
  • поддержка фрагментов, что, позволяет, например, из одного компонента возвращать несколько других (без ненужных, и, порой, мешающих DOM-оберток) или манипулировать несколькими нодами, в том числе и DOM, как одной.
  • нет необходимости расставлять key в простых случаях при использовании массивов
  • размер библиотеки (примерно 10Кб после gzip)
  • отсутствуют propTypes
  • отсутствуют, и это главный минус, тысячи сопутствующих библиотек, таких как, react-router, react-redux и т.п. :)

Бенчмарки

Repaint rate challenge

Server-side рендеринг (node v4.4.3, NODE_ENV=production):
image

Проект на github: vidom

Готов ответить на ваши вопросы, а также увидеть issue и pull request на github ;)

Автор: dfilatov

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js