Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Camplejs/Cample.js
One of the fastest frameworks without a virtual DOM on the Internet!
https://github.com/Camplejs/Cample.js
cample camplejs component components framework html javascript npm reactive reactivity ui web without-vdom without-virtual-dom
Last synced: about 1 month ago
JSON representation
One of the fastest frameworks without a virtual DOM on the Internet!
- Host: GitHub
- URL: https://github.com/Camplejs/Cample.js
- Owner: Camplejs
- License: mit
- Created: 2022-08-27T16:50:23.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-21T12:27:36.000Z (5 months ago)
- Last Synced: 2024-04-22T11:59:44.530Z (5 months ago)
- Topics: cample, camplejs, component, components, framework, html, javascript, npm, reactive, reactivity, ui, web, without-vdom, without-virtual-dom
- Language: TypeScript
- Homepage: https://camplejs.github.io
- Size: 681 KB
- Stars: 109
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Cample.js - one of the fastest frameworks without a virtual DOM on the Internet!
[](https://www.npmjs.com/package/cample)
[](https://github.com/Camplejs/Cample.js/discussions)
[](https://twitter.com/Camplejs)
[](https://discord.gg/aBMdpBShju)
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.
```bash
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:
```bash
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
```javascript
const newComponent = component(
"new-component",
`
Clicks:{{dynamicData}}
Click
`,
{
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(
`
`,
{
newComponent
}
);
```
### HTML
```html
```
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](https://github.com/Camplejs/Cample.js/releases)
## Contribution
If you would like to contribute to this framework, please see [Contributing Guide](https://github.com/Camplejs/Cample.js/blob/main/CONTRIBUTING.md). 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](https://github.com/Camplejs/Cample.js/blob/main/LICENSE)