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

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

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

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

К примеру, у 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