Первый компонент

Основные понятия SkateJS

Библиотека SkateJS представляет собой тонкий слой над нативными Web Components и позволяет создавать компоненты с минимальным количеством абстракций. В основе лежат Custom Elements и шаблоны, формирующие интерфейс экземпляров. SkateJS ориентирован на декларативность и предсказуемость поведения, сводя боковые эффекты к минимуму.

Создание первого компонента

Первый компонент в SkateJS определяется через функцию define, принимающую имя кастомного элемента и класс, наследующийся от базового Component. Имя элемента должно соответствовать требованиям Custom Elements, то есть содержать дефис.

Пример:

import { define, Component, h } from 'skatejs';

class Counter extends Component {
  static props = {
    count: Number
  };

  render() {
    return h('div', `Текущее значение: ${this.count}`);
  }
}

define('my-counter', Counter);

Ключевые элементы конструкции

SkateJS опирается на следующие механизмы:

  1. Свойства Статическое поле props определяет реактивные свойства компонента. Изменение значения инициирует перерендер. Типы свойств описываются через встроенные конструкторы Jav * aScript: String, Number, Boolean, Array и Object.

  2. Метод render Метод возвращает виртуальное дерево в стиле hyperscript. Функция h объединяет структуры и позволяет формировать DOM без использования шаблонных строк. Результат рендера синхронизируется с DOM при изменении свойств.

  3. Определение имени элемента Функция define регистрирует компонент в браузере через customElements.define. При повторной регистрации с тем же именем возникает ошибка, поэтому следует обеспечивать уникальность.

Работа с состоянием

Свойства в SkateJS служат источником истины. В отличие от множественных источников состояния в традиционных фреймворках, SkateJS стремится к единственному, реактивному хранилищу внутри компонента. Изменения следует вносить через прямые присваивания:

this.count = this.count + 1;

После изменения свойства запускается механизм обновления и вызывается render. Дублирование состояния не требуется, что снижает когнитивную нагрузку при разработке.

Жизненный цикл

Элементы наследуют стандартные callbacks Custom Elements и предлагают дополнительные точки расширения:

  • connectedCallback вызывается при добавлении элемента в DOM. Подходит для инициализации внешних данных или режима работы.
  • disconnectedCallback применяется для очистки ресурсов.
  • attributeChangedCallback синхронизирует свойства и атрибуты при необходимости.

SkateJS использует эти callbacks, но не перекрывает их поведение, сохраняя нативную совместимость.

Шаблоны и обновления

SkateJS не реализует сложных темплейтовых систем. Вместо этого используется h, обеспечивающий декларативное формирование интерфейса. Внутренний диффинг минимализирован и оптимизирован под частые обновления. Большие структуры рекомендуется разбивать на небольшие элементы для упрощения обслуживания.

Композиция и повторное использование

Компоненты SkateJS легко комбинировать между собой благодаря нативной совместимости. Каждый компонент является полноценным Custom Element, следовательно, его можно использовать в HTML напрямую. Подход устраняет необходимость дополнительной прослойки для интеграции.

Пространства имен

Для имен элементов рекомендуется придерживаться соглашений, отражающих контекст. Например, компоненты интерфейса могут иметь префикс ui-, а структуры данных — data-. SkateJS не вводит собственных правил, оставляя процесс именования на усмотрение разработчика.

Стиль и оформление

SkateJS не содержит встроенной системы стилей. Компоненты могут использовать Shadow DOM для инкапсуляции оформления или работать без него, делегируя стили обычным CSS. Выбор зависит от задачи. Shadow DOM подходит для независимых виджетов, в то время как открытая модель позволяет интегрировать компонент в общую систему.

Тестирование и предсказуемость

Компоненты SkateJS благодаря минимализму легко тестируются. Поскольку состояние сосредоточено в свойствах, а рендер не имеет скрытых побочных эффектов, тесты выполняются без дополнительной инфраструктуры. Подход улучшает сопровождаемость и уменьшает риск регрессий.

Результат работы первого компонента

Компонент my-counter после регистрации употребляется в HTML как нативный элемент. Браузер самостоятельно создаёт экземпляр при вставке в DOM, а SkateJS обеспечивает реактивные обновления при изменении count. Такой подход демонстрирует базовый цикл разработки: объявление, регистрация, использование и обновление состояний.

Оглавление