Новый перспективный веб-фреймворк Cample.js. Реактивность без VDOM

Всем привет! В данной статье я бы хотел рассказать о таком фреймворке как Cample.js.

На сегодняшний момент (версия 3.0.1), фреймворк является активно поддерживаемым в разработке нового функционала. Есть поддержка работы с данными, которые благодаря реактивности без виртуального DOM отображаются крайне быстро:

Тесты быстродействия фреймворка
(js-framework-benchmark)

Это не самый быстрый результат из всех, которые существуют на данный момент среди фреймворков. Но, поэтому речь идёт о перспективности.

К примеру, у Vue скорость создания 1000 строк составляет 42 секунды, а у Svelte 48.4 секунды (на момент написания статьи).

Конечно, эти фреймворки во много раз превосходят Cample.js по функционалу и сравнение недостаточно полное. Но, в данном сравнении берётся лишь такой пункт как скорость.

Сама разработка фреймворка началась около года назад. Тогда, была выбрана модель создания компонентов через экземпляры классов. То есть, компоненты создаются следующим путём:

const component = new Component("new-component", 
`<div class="component">
    {{component_text}}
</div>`)

На мой взгляд, данная структура является удобной и достаточно практичной. Чтобы не писать постоянно большие конструкции из new Component, была введена также функция, с которой компоненты обрабатываются таким же образом, но при этом сам код существенно уменьшается.

const newComponent = component("new-component", 
`<div class="component">
    {{component_text}}
</div>`)

Также, была выбрана модель обработки данных через функцию, возвращающую объект с данными. Сами данные отображаются в HTML template благодаря интерполяции строк.

const newComponent = component("new-component", 
`<div class="component">
    {{component_text}}
</div>`,
  {
    data: () => {
      return {
        component_text: "Text",
      };
    },
  })

Эта конструкция позволяет обрабатывать данные гораздо лучше, чем если бы просто передавался объект.

Также, для изменения данных используются функции, которые передаются через свойство script. Сами функции объявляются в объекте functions.

const newComponent = component("new-component", 
`<div class="component" id="el">
    {{component_text}}
</div>`),
  {
    data: () => {
      return {
        component_text: "Text",
      };
    },
    script: [
      ({ elements, functions }) => {
        const setText = (e) => {
          functions?.setText((data) => {
            return "NewText";
          });
        };
        elements?.el?.addEventListener("click", setText);
      },
      {
        start: "afterLoad",
        el: [{ el: "#el" }],
      },
    ],
    functions: {
      setText: "component_text",
    },
  })

Также, у фреймворка присутствует объект each, который повторяет HTML разметку в зависимости от данных.

const newEach = each("new-each",
()=>["val"], 
"<div>{{data}}</div>",
{
  valueName:"data"
}
);

Все эти компоненты обрабатываются через экземпляр объекта Cample следующим способом.

cample("#example", {
  trimHTML: true,
}).render(
  `
            <div class="example_page">
                {{newComponent}}
                {{newEach}}
            </div>
        `,
  {
    newComponent,
    newEach
  }
);

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

Фреймворк также довольно неплох тем, что основан на реактивности без виртуального DOM, которая в теории может быть гораздо быстрее, чем реализация через виртуальный DOM.

Если у вас есть мнение по данному фреймворку, будет очень интересно почитать о нём в комментариях! Спасибо большое за прочтение статьи.

Ссылки:

Github