Философия и архитектура библиотеки

Petite-Vue создавалась как крайне лёгкая среда декларативного связывания интерфейса и состояния, минимизирующая слой абстракции. Основной посыл заключается в том, что реактивность и шаблоны могут существовать рядом с обычной разметкой без сложных этапов сборки и без тяжёлой экосистемы вокруг.

Минимизм и принцип «стоить дёшево»

Ключевая идея — не нагружать страницу дополнительными инструментами, когда достаточно нескольких килобайт реактивности. Архитектура Petite-Vue стремится к тому, чтобы каждый элемент веб-страницы мог быть расширен декларативным поведением без существенных накладных расходов. Отсутствие обязательного бандлера или виртуального DOM снижает когнитивную сложность и делает библиотеку пригодной для встраивания в существующие проекты.

Декларативные данные и реактивный слой

Petite-Vue использует реактивные объекты для создания связи между моделью и DOM. Изменение состояния приводит к автоматическому обновлению представления, избегая императивного управления выборкой и обновлением узлов.

import { createApp } from 'petite-vue'

createApp({
  count: 0,
  inc() {
    this.count++
  }
}).mount('#app')

Обновление DOM происходит точечно, основываясь на внутренних наблюдателях для свойств реактивного объекта, а не через глобальный пересчёт или диффинг виртуальных деревьев.

Архитектура компонентов

Компоненты в Petite-Vue трактуются как модульные блоки поведения, а не как полноценные модули сборки. Отсутствует тяжёлая система жизненных циклов и строгая контрактация. Вместо этого применяется простая структура:

  • объект состояния;
  • методы;
  • шаблон, встроенный в DOM;
  • опциональный v-scope для локализации области.
<div v-scope="{ count: 0, inc(){ count++ } }">
  <button @click="inc">+</button>
  {{ count }}
</div>

Такой подход делает компонент лёгким расширением HTML-разметки, а не отдельной сущностью со сложной инфраструктурой.

Отказ от виртуального DOM

Petite-Vue не внедряет виртуальный DOM. Этот выбор основан на тезисе, что виртуальный DOM оправдан в масштабных приложениях с частыми диффами, но избыточен в случае небольших встраиваемых интерфейсов. Обновление идёт через точечный патч-механизм реактивности, который не требует симуляции дерева.

Расширяемость через директивы

Поведение Petite-Vue строится на директивах, отражающих концепции данных и событий:

  • v-model — двусторонняя привязка;
  • v-if/v-show — управление отображением;
  • v-for — итерация;
  • @event — подписки на события.

Директивный слой служит промежуточным интерфейсом между реактивностью и DOM, что поддерживает архитектурную целостность при минимальном объёме кода.

Локальные области и контекст

Механизм v-scope даёт изолированный реактивный контекст, позволяя разместить множество небольших реактивных блоков на странице без создания общего глобального приложения. Такой подход напоминает архитектуру «островов», где каждый остров решает свою задачу и не влияет на остальные.

Сочетание с существующим стеком

Одним из важных архитектурных соображений стало умение Petite-Vue встраиваться в уже работающий HTML. Библиотека не требует миграции к однофайловым компонентам, не диктует маршрутизаторы, хранилища и пайплайны, оставляя это за пределами собственной ответственности. Благодаря этому Petite-Vue подходит для дополнения серверных рендеринговых систем, таких как традиционные MVC-фреймворки или шаблонизаторы.

Роль реактивного ядра

Реактивное ядро Petite-Vue отслеживает зависимости между свойствами и вычислениями. Основной принцип — минимальное число реактивных сущностей и отсутствие сложных графов обновлений. Это снижает риск непредсказуемого поведения и сохраняет ясность архитектуры.

Эволюционный, а не революционный подход

Petite-Vue не стремится заменить крупные SPA-фреймворки. Её философия — дополнять, а не вытеснять. В отличие от SPA-архитектур, где интерфейс берёт контроль над документом целиком, Petite-Vue сохраняет HTML как первичную структуру, а декларативность как механизм поведения поверх неё.

Коммуникация и обмен данными

Передача данных между областями осуществляется через простое композиционное мышление: состояния и функции могут быть вынесены в отдельные объекты, импортированы или связаны вручную. Архитектура не предусматривает сложных шаблонов обмена, таких как Vuex или Redux, что вписывается в общий минимализм.

Философское сопоставление с Vue

Petite-Vue заимствует принципы Vue, но интерпретирует их под стратегию минимизации и встраиваемости. Используется тот же синтаксический инструментарий — директивы, реактивность, шаблонная интерполяция — при этом исключаются тяжёлые элементы, не подходящие для локальных сценариев.

Итоговая картина архитектуры

Архитектура Petite-Vue строится вокруг малых форм, реактивного слоя, простых директив и встроенности в HTML. Философия минимализма и отсутствие жёстких требований позволяют библиотеке выступать архитектурным инструментом дополнения, а не каркасом, определяющим весь проект.

Оглавление