New promising web framework Cample.js. Reactivity without VDOM

Hi all! In this article, I would like to talk about such a framework as Cample.js.

At the moment (version 3.0.1), the framework is actively supported in the development of new functionality. There is support for working with data that, thanks to reactivity without a virtual DOM, is displayed extremely quickly:

This is not the fastest result of all that exist at the moment among the frameworks. But, therefore, it is a matter of perspective.

For example, Vue has a 1000 line creation time of 42 seconds, while Svelte has 48.4 seconds (at the time of writing).

Of course, these frameworks are many times superior to Cample.js in terms of functionality and the comparison is not complete enough. But, in this comparison, only such an item as speed is taken.

The development of the framework itself began about a year ago. Then, the model for creating components through class instances was chosen. That is, the components are created in the following way:

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

In my opinion, this structure is convenient and quite practical. In order not to constantly write large constructions from new Component, a function was also introduced with which components are processed in the same way, but at the same time the code itself is significantly reduced.

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

Also, a data processing model was chosen through a function that returns an object with data. The data itself is displayed in the HTML template thanks to string interpolation.

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

This design allows you to process data much better than if you just passed an object.

Also, to change the data, functions are used that are passed through the script property. The functions themselves are declared in the functions object.

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",
    },
  })

Also, the framework has an each object that repeats the HTML markup depending on the data.

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

All of these components are processed through the Cample object instance in the following way.

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

Of course, most of the functions that are needed today to create a prod site are not yet supported, but work on the framework is underway.

The framework is also quite good in that it is based on reactivity without a virtual DOM, which in theory can be much faster than implementing through a virtual DOM.

If you have an opinion on this framework, it will be very interesting to read about it in the comments! Thank you very much for reading the article.

Links:

Github