Как создать сайт на фреймворке Cample.js?

В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.2), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.

Вся статья основана на информации из документации, а также на примерах функциональных UI компонентов, созданных благодаря фреймворку.

Прежде всего, для того, чтобы создать сайт на фреймворке, необходимо будет его установить. Для установки фреймворка будет необходим Node.js. Благодаря нему, в консоли появится возможность использования npm, через который будет скачиваться фреймворк.

Скачивание фреймворка происходит путём ввода команды в консоль в папке с проектом:

npm i cample

После, в папке node_modules появляется сам модуль. Для использования фреймворка необходима среда, которая будет поддерживать import export модель, благодаря которой будет выстроен код. Такую среду, к примеру, можно настроить благодаря webpack и подходящим модулям, для работы с HTML, стилями, изображениями и т.д. Но, в теории, подходит почти любой сборщик модулей.

Далее, необходим HTML файл, который будет основой для сайта. К нему будет подключаться javascript файл, где будут реализованы скрипты фреймворка.

В HTML файле, стартовой точкой сайта пускай будет тег div с id main. В нём будет находится основной контент сайта.

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

В javascript файле для начала нужно импортировать такую функцию как cample. Данная функция создаёт экземпляр класса, который является начальной точкой в js для сайта.

import { cample } from "cample";

Данная функция принимает первым параметром selector блока, куда будет рендериться сайт, а вторым, необязательным параметром, функция принимает объект с опциями. Для дальнейшей работы будет использоваться один параметр.

const mainCample = cample("#main");

Все функции в фреймворке создают экземпляры классов. В данном случае, в переменную с названием main присваивается экземпляр класса. У данной переменной теперь можно вызвать метод render, в который будут переданы все компоненты, которые созданы, а также основной HTML template, который будет обработан.

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

Используя двойные фигурные скобочки скрипт применяет такой приём как «интерполяция строк», благодаря которому будет создана срока такого типа:

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

Такая строчка потом заменяется на HTML компонента. Для того, чтобы работать с компонентами, в js файл нужно импортировать соответствующие функции. В примере будут использоваться функции each и component, которые предоставляют необходимый функционал.

import { component, each } from "cample";

Сам же компонент, к примеру, будет выглядеть вот так:

const content = component(   "content-component",   `   <div class="content">     <h1 class="title">{{title}}</h1>     <table>       <thead>         <tr>           <th>Тестовые данные</th>         </tr>       </thead>       <tbody><template       data-cample-import="{{{tableData}}}"       data-cample="rows-component"></template></tbody>     </table>   </div> `,   {     data: () => {       return {         title: "Основная страница",         data: ["Тестовая строка"],       };     },     export: {       tableData: {         data: {           data: "data",         },       },     },     exportId: "mainExport",     style: ".title{font-size:60px}",   } );

В данном примере создаётся div с заголовком h1 и таблицей, данные для которой импортируются из компонента. Подробнее про работу с компонентами можно посмотреть в документации тут. Данные для таблицы хранятся в свойстве data, в которой есть один текст: «Тестовая строка». В зависимости от этого в таблице будет только одна строка.

Для того, чтобы отобразить данные для таблицы, необходим компонент each. Он повторяет HTML код в зависимости от данных.

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

Главным моментом при создании цикла является указание свойства key для повторяющегося HTML. Более подробно о том, чем отличается keyed реализация от non-keyed можно посмотреть тут. При импортировании, в функции данных можно указать то самое импортированное свойство data, тем самым отобразив данные на сайте. В самом свойстве import для значения value можно указать пустой массив, тем самым импортировав всё то, что экспортируется.

Таким образом, весь код выглядит примерно вот так:

import { cample, component, each } from "cample";  const content = component(   "content-component",   `   <div class="content">     <h1 class="title">{{title}}</h1>     <table>     <thead>       <tr>         <th>Тестовые данные</th>       </tr>     </thead>     <tbody><template     data-cample-import="{{{tableData}}}"     data-cample="rows-component"></template></tbody>   </table>   </div> `,   {     data: () => {       return {         title: "Основная страница",         data: ["Тестовая строка"],       };     },     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,   } );

Результатом же кода, будет примерно такая страница:

Стили для таблицы были импортированы с основного сайта. Также, шрифт от браузера, в теории, может отличаться.

Всем большое спасибо за прочтение статьи!