About Cample.js

Cample.js is an open-source JavaScript framework designed for creating user interfaces. It embraces a component-based architecture, allowing interconnections through the import and export of the current state. Unlike other frameworks, Cample.js does not utilize a virtual DOM to manipulate the real DOM, resulting in a speedier reactivity process.

Main Advantages

To grasp the main advantage of Cample.js, think of it as a sports car on the highway—swift, nimble, and designed for high-speed maneuvers. In the realm of frameworks, speed is crucial, and Cample.js excels by avoiding the constraints of a virtual DOM. This translates to faster rendering times and responsiveness in your applications.

Check out the for performance comparisons with other frameworks.

Installation

To kickstart your application, it’s best to use the official cample-start command for generating a “starting point”. You can choose from two currently available templates:

npx cample-start

This command provides options based on two module bundlers: Webpack and Parcel. Simply select the one that does the job for you. Furthermore, if you want to install only the framework, use:

npm i cample

This will ensure that the framework’s functions are available directly from the module, setting up a solid foundation to build your application.

Getting Started

Once you’ve set up your application’s starting point, your JavaScript file could look like this:

const newComponent = component(
  'new-component',
  

    
Clicks: {dynamicData}
    Click Me!
  
,
  {
    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);

This code is an initial representation of how the framework operates and can be adapted to fit your project needs.

Reactivity

Reactivity refers to the framework’s capacity to automatically refresh specific JavaScript code or HTML elements in response to data changes. You can envision this as a diary that updates itself whenever you write something new. The framework ensures that any updates in data directly trigger the necessary changes in your application.

Check out this diagram for a clearer understanding of data updates process.

Changelog

For details on all the changes made to Cample.js, you can visit the Changelog.

Contribution

If you’re interested in contributing to this framework, please refer to the Contributing Guide. Thank you!

License

Cample.js is licensed under MIT.

Troubleshooting

• Missing Dependencies: Ensure you have installed all necessary dependencies.
• Unexpected Behaviors: Verify the event listeners and data bindings in your components.
• Performance Issues: Check the performance benchmarks to ensure optimal usage.
• Documentation Gaps: Don’t hesitate to reach out to the community or check the official documentation.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.