Cample.js - fast modern javascript framework.

Website • Documentation • Examples • Examples source

Alpha version

Why Cample.js?

Cample.js is an actively developed and maintained framework that supports many modern technology solutions for creating user interfaces. The component-based approach, as well as reactivity without a virtual DOM and data export and import, will make building a site much faster than if the site was developed using js alone. Moreover, the framework is new and you can try it as something new when creating a website.

Main advantage

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

Features

Cample.js provides the following features:

• Reactivity without Virtual DOM. The framework does not create large DOM trees for working with HTML.
• Keyed implementation. Blocks in a loop will not be overwritten by new ones if their keys match.
• Component approach. It allows to repeat many UI blocks on the site, which makes development much easier.
• Convenient approach to working with data inside a component. Transferring data between components allows to work with components even if they are in different files
• The frameworks make it easy to work with HTML files. The syntax of the framework itself is built on objects with HTML templates. When using modern project builders, HTML files are imported through a variable that does not pass through any function.
• Fast.
• CLI for creating an application.

And a few others :)

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 - camplejs@gmail.com

License

Licensed under MIT