Когда мы впервые приступили к разработке идеи для Ovee.js, мы решили, что не хотим изобретать велосипед, и хотели избежать повторной реализации сложных частей, таких как реактивность или создание шаблонов, в миллионный раз. Это популярный принцип среди серверных фреймворков - Laravel часто повторно использует части Symfony, Symfony по умолчанию поставляется в комплекте с Doctrine, Nest зависит от Express (который даже может быть заменен другой реализацией по запросу). Тем не менее, во фронтенд-области каждый из больших фреймворков построен полностью независимо (поправьте меня, если я что-то упустил).
Для начальной сборки Ovee.js мы выбрали on-change для обработки простой реакции и lit-html для шаблонов. Мы также создали дополнительный модуль поверх Barba для асинхронных переходов между страницами. Это решение помогло нам относительно быстро выпустить первую рабочую версию фреймворка, избежав серьезных ошибок в потенциально наиболее сложных частях.
С момента выпуска Vue 3 мы начали возиться с его внутренними компонентами и решили в конечном итоге заменить on-change на гораздо более эффективное решение.
Больше мощности с модулями Vue 3
Vue 3 внес отличные, хорошо принятые изменения в свой API. Но, с нашей точки зрения, у нас также есть два действительно важных изменения, о которых может не заметить большинство разработчиков.
Во-первых, реактивность была переписана на Proxy API, который устраняет ограничения предыдущей реализации и стал намного более чистым и современным. Что касается Ovee.js, мы планировали использовать Proxy API с самого начала, поэтому мы не могли полагаться на реактивность Vue 2 для начальной сборки.
Во-вторых, еще более важным изменением является то, что Vue теперь поставляется в модульной форме, а части фреймворка доступны в виде отдельных пакетов NPM. Таким образом, мы можем использовать @vue/reactivity
, не имея зависимости от всего фреймворка. А когда дело доходит до количества зависимостей, меньшая занимаемая площадь означает более быструю установку и меньший node_modules
.
Опыт использования независимых частей Vue 3
Поскольку мы намеревались только заменить реактивность Ovee, мы добавили @vue/reactivity
и @vue/runtime-core
в наше дерево зависимостей. Первый, как следует из названия, дал нам инструменты для перестройки нашего ReactiveProxy
класса. Использовать очень просто:
import { reactive } from '@vue/reactivity';
const proxy = reactive({});
Последний приносит watch
, computed
и watchEffect
. Раньше у нас был @watch
декоратор, но с собственной реализацией. Теперь мы могли бы просто использовать watch
из пакета @vue/runtime-core
. Пойдя дальше, мы добавили 2 новых декоратора: @watchEffect
и @computed
, которые просто обертывают соответствующие методы.
Но это еще не все! TemplateComponent
от Ovee.js также полагался на систему отслеживания и реагирования, чтобы автоматически повторно отображать освещенные шаблоны при изменении любых реактивных данных. Мы заменили его полезным watchEffect
внизу, что в конечном итоге сократило количество строк кода и упростило работу системы.
В настоящее время мы только заменили старую систему реактивности и добавили несколько оболочек. Но система реактивности Vue настолько универсальна, что мы можем создать множество интересных новых функций как часть основного пакета, а также новых модулей! Конечно, те же преимущества теперь доступны разработчикам, использующим Ovee.js.
В целом, вся система реактивности Vue хорошо документирована и проста в использовании. Он также написан на TypeScript с очень хорошей типизацией, что также является для нас большим недостатком, поскольку мы также используем TypeScript.
Подожди, а что это за штука с Ovee.js?
Ovee.js - это компонентный фреймворк, предназначенный для работы с разметкой, отрисованной на стороне сервера. Это означает, что это не соревнование для Vue или React, а, скорее, современный подход к проектам, где раньше мы использовали jQuery. Вы можете узнать больше об Ovee.js здесь и заглянуть в официальную документацию.
Авторы:
Куба Пшиборовски @przyb
Милош Мандовски @ F0rsaken