Когда мы впервые приступили к разработке идеи для 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