Конечно не обошлось без спортивного интереса, давно было интересно, можно ли взять пару инструментов из npm, написать сотни 2 строк кода и получить фреймворка уровня реакта)
я раньше тоже занимался написанием собственной версии реакта и обычно получалось больше 100 строчек кода. Но однажды понял что мне достаточно простого хелпера который просто делает дифф компонентов и теперь весь мой "фреймворк" умещается в 22 строчки кода
Кому интересно то вот пару демок:
https://codesandbox.io/s/hungry-star-0r2y8?file=/src/index.jshttps://codesandbox.io/s/condescending-shockley-4nmnq?file=/src/index.jsИз-за размера в 22 строчки кода есть пару особенностей но они как раз сочетаются с определенными взглядами на разработку приложений и например для меня полностью заменяют реакт
1) локальное состояние компонентов хранить чуть менее удобнее чем в реакте (так как нужно передавать айдишник, зато более явно так как сам хранишь в нужном месте) но мне редко когда это вообще нужно - я выяснил что намного удобнее разрабатывать приложение когда состояние всех компонентов хранится в одном объектом графе для всего приложения (а-ля стор). Но это не значит что нужно обязательно подключать какие-то стейт-менеджеры - можно просто хранить данные в обычных нативных жс-объектах а после их изменения достаточно вызвать функцию actualize() которая выполнит diff дом-дерева всего приложения
2) у реакта куча кода занимается поддержкой всего разнообразия css-свойств (которых больше 500) и всех html-тегов и атрибутов (>100), причем какое-то количество атрибутов реакт называет своими именами чем создает лишнюю путаницу и jsx перестает быть совместимым с html (не говоря уже про систему синтетических событий с которой постоянно вылезают какие-то нюансы и даже баги). Мне же не нужен ни jsx ни поддержка всех возможных сss-свойств и html-аттрибутов - я лучше в нужных атомарных компонентах сам напишу diff нужных мне css свойств и атрибутов а вместо jsx намного удобнее использовать обычное дерево вызываемых функций с передачей нужных пропсов