How to create a website using the Cample.js framework?

#webdev #javascript #programming #tutorial

This article will describe a short guide on how to create a website using a framework such as Cample.js. At the time of writing (version 3.1.2), the framework has been in development for more than a year. During this time, the minimum functionality for creating modern web applications was implemented.

The entire article is based on information from the documentation, as well as examples of functional UI components created using the framework.

First of all, in order to create a website using the framework, you will need to install it. To install the framework you will need Node.js. Thanks to it, the console will be able to use npm, through which the framework will be downloaded.

The framework is downloaded by entering the command into the console in the project folder:

npm i cample

Afterwards, the module itself appears in the node_modules folder. To use the framework, you need an environment that will support the import export model, thanks to which the code will be built. Such an environment, for example, can be configured thanks to webpack and suitable modules for working with HTML, styles, images, etc. But, in theory, almost any module assembler is suitable.

Next, you need an HTML file, which will be the basis for the site. A javascript file will be connected to it, where the framework scripts will be implemented.

In the HTML file, the starting point of the site should be the div tag with id main. It will contain the main content of the site.

<div id="main"></div>

In the javascript file, first you need to import a function such as cample. This function creates an instance of a class, which is the starting point in js for the site.

import { cample } from "cample";

This function takes as the first parameter the selector of the block where the site will be rendered, and as the second, optional parameter, the function takes an object with options. For further work, one parameter will be used.

const mainCample = cample("#main");

All functions in the framework create instances of classes. In this case, an instance of the class is assigned to a variable called main. With this variable you can now call the render method, which will receive all the components that have been created, as well as the main HTML template that will be processed.

mainCample.render(
  `
    <div class="wrapper">
      {{content}}
    </div>
  `,
  {
    content,
    tableRows,
  }
);

Using double curly braces, the script uses a technique called “string interpolation”, thanks to which a term of this type will be created:

<template data-cample="content-component" ...></template>

This line is then replaced with the HTML component. In order to work with components, you need to import the corresponding functions into the js file. The example will use the each and component functions, which provide the necessary functionality.

import { component, each } from "cample";

The component itself, for example, will look like this:

const content = component(
  "content-component",
  `
  <div class="content">
    <h1 class="title">{{title}}</h1>
    <table>
      <thead>
        <tr>
          <th>Test data</th>
        </tr>
      </thead>
      <tbody><template
      data-cample-import="{{{tableData}}}"
      data-cample="rows-component"></template></tbody>
    </table>
  </div>
`,
  {
    data: () => {
      return {
        title: "Main title",
        data: ["Test"],
      };
    },
    export: {
      tableData: {
        data: {
          data: "data",
        },
      },
    },
    exportId: "mainExport",
    style: ".title{font-size:60px}",
  }
);

This example creates a div with an h1 header and a table whose data is imported from the component. More information about working with components can be found in the documentation. The data for the table is stored in the data property, which has one text: "Test". Depending on this, there will be only one row in the table.

To display data for a table, you need an each component. It repeats the HTML code depending on the data.

const tableRows = each(
  "rows-component",
  ({ importedData }) => importedData.data,
  `<tr key={{index}}>
    <td>{{value}}</td>
   </tr>
  `,
  {
    import: {
      value: [],
      exportId: "mainExport",
    },
  }
);

The main point when creating a loop is to specify the key property for the repeating HTML. When importing, you can specify the same imported data property in the data function, thereby displaying the data on the site. In the import property itself, you can specify an empty array for the value value, thereby importing everything that is exported.

So the whole code looks something like this:

import { cample, component, each } from "cample";

const content = component(
  "content-component",
  `
  <div class="content">
    <h1 class="title">{{title}}</h1>
    <table>
    <thead>
      <tr>
        <th>Test data</th>
      </tr>
    </thead>
    <tbody><template
    data-cample-import="{{{tableData}}}"
    data-cample="rows-component"></template></tbody>
  </table>
  </div>
`,
  {
    data: () => {
      return {
        title: "Main title",
        data: ["Test"],
      };
    },
    export: {
      tableData: {
        data: {
          data: "data",
        },
      },
    },
    exportId: "mainExport",
    style: ".title{font-size:60px}",
  }
);
const tableRows = each(
  "rows-component",
  ({ importedData }) => importedData.data,
  `<tr key={{index}}>
    <td>{{value}}</td>
   </tr>
  `,
  {
    import: {
      value: [],
      exportId: "mainExport",
    },
  }
);
const mainCample = cample("#example");
mainCample.render(
  `
    <div class="wrapper">
      {{content}}
    </div>
  `,
  {
    content,
    tableRows,
  }
);

Result (something like that):