Cample.js - one of the fastest frameworks without a virtual DOM on the Internet!

Website • Documentation • Examples • Examples source

Alpha version

About Cample.js?

Cample.js is an open source javascript framework for creating user interfaces. The framework works on a component-based approach, where each component can be interconnected by importing and exporting the current state. Cample.js doesn't use a virtual DOM to interact with the real DOM, which makes the reactivity process much faster.

Main advantage

Performance diagram of javascript frameworks and libraries.
Results based on 123 release

Installation

To create an application, it is better to use the official cample-start command to generate a “starting point”, choosing from two currently available templates.

npx cample-start

The main two templates are based on two module bundlers such as Webpack and Parcel. To select one of them from the list in the terminal, you can select the most suitable one. All of them have official support.

Also, to install only the framework, you can use the following command:

npm i cample

With this installation, functions will still be available directly from the module. Installation using cample-start simply specifies the start files for the application.

Getting started

After setting the starting point of the application, the js file will contain the following code, or the same one, but with html import.

JavaScript

const newComponent = component(
  "new-component",
  `<div class="component">
    <div class="clicks" data-value="{{dynamicData}}">Clicks:{{dynamicData}}</div>
    <button class="button">Click</button>
  </div>`,
  {
    script: ({ element, functions }) => {
      const button = element.querySelector(".button");
      const updateFunction = () => {
        functions?.updateClicks((data) => {
          return data + 1;
        });
      };
      button.addEventListener("click", updateFunction);
    },
    data: () => {
      return {
        dynamicData: 0,
      };
    },
    dataFunctions: {
      updateClicks: "dynamicData"
    },
  }
);
cample("#app", {
  trimHTML: true,
}).render(
`<template data-cample="new-component">
</template>`,
  {
    newComponent
  }
);

HTML

<div id="app"></div>

You can change this code to any other you want. This code is presented as an example of how the framework works.

Link article: Getting started.

Reactivity

Reactivity in the framework is understood as the ability, in response to data changes, to automatically update parts of the javascript code or HTML nodes that used this data.

This diagram shows that data is updated when you use a function that updates it. That is, it is as if a single-threaded data update is being created. In future versions, the structure may change slightly due to the processing of asynchronous data.

Link article: Reactivity.

Changelog

Changelog

Contribution

If you would like to contribute to this framework, please see Contributing Guide. Thank you!

Inspiration

If you like the framework, it will be very cool if you rate the repository with a star ★

Contact

Email - [email protected]

License

Licensed under MIT