Pull to refresh

Vidom — blazingly fast alternative to React

Reading time 2 min
Views 9.5K

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


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


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


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


Чем Vidom похож на React


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

Чем Vidom отличается от React


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

Бенчмарки


Repaint rate challenge
UI bench
Server-side рендеринг (node v4.4.3, NODE_ENV=production):


Проект на github: vidom


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

Tags:
Hubs:
+22
Comments 46
Comments Comments 46

Articles