Итак, я занимаюсь разработкой этого сайта и визуализирую список продуктов на стороне сервера (как и вы). На клиенте мне нужен JavaScript для управления этим списком: добавление и удаление узлов в соответствии с некоторым фильтром (по категории, по имени и т. Д.).

Я вместе начинаю взламывать свое решение в VanillaJS и очень доволен результатом. Тогда возникает ошибка. И это безумие, спагетти-код всегда кусает, и это то, что только что случилось со мной.

Итак, я продолжаю рефакторинг, очищая вещи, разбивая код на модули, отделяя представления от логики. Ошибка исчезает, но ее место занимает забавное ощущение: я написал много кода, 90% которого непроверено и возможно, хрупкое. архитектуру приложения, такую ​​же, какую я мог бы просто заскочить из какого-нибудь пакета npm. Так было бы безопаснее и стабильнее.

Но! Это было бы слишком тяжело! Ну а так ли это на самом деле?

Благодаря работе замечательного Джейсона Миллера и его Preact у нас теперь есть вся мощь правильной, протестированной и надежной библиотеки представлений всего в 4 КБ кода. На мой взгляд, включение в фреймворк даже небольших задач теперь стало действительно возможным.

Я решил связаться с Джейсоном, чтобы узнать, подходит ли Preact для этого варианта использования:

через несколько минут он вернулся с примером и объяснением (спасибо, Джейсон!)

Вы можете найти эту ручку здесь.

Как оказалось, Preact перечисляет среди отличий от React следующее:

render () принимает третий аргумент, который является корневым узлом для замены

Это очень удобно, так как вы можете легко добавить Preact в проект, не пересматривая то, как вы использовали SSR до сих пор. Preact увлажнит ваш необработанный HTML и заменит его.

В конце концов, я придерживаюсь своего собственного решения (пока), главным образом потому, что мне не очень нравится идея создавать свои компоненты дважды (один раз с обычным HTML, а другой - с Preact). Однако я могу скоро передумать, если что-то станет трудно настраивать и поддерживать, как сейчас.

Если вы нашли этот пост вообще полезным, нажмите кнопку ❤! Я читаю каждый комментарий, так что не забудьте поделиться своими мыслями в разговоре!