Реактивная JavaScript-библиотека на основе Веб-компонентов

Components (или сокращённо - Compo.js) — это реактивная JavaScript-библиотека на основе стандартных Веб-компонентов, предназначенная для быстрого создания веб-приложений клиентского уровня. Библиотека распространяется под лицензией MIT, имеет небольшой размер и не требует много времени для её изучения. Чтобы начать работать с ней, достаточно иметь базовые знания HTML, CSS и JavaScript.

Компоненты в Compo.js бывают двух видов: внешние и встроенные. Ниже показан пример простого внешнего компонента с двумя циклами и заголовком:

<my-component>
  <h1>${ message }</h1>

  <div c-for="obj of users">
    <div c-for="prop in obj">
      <p>
        <b>${ prop }</b>: ${ obj[prop] }
      </p>
    </div>
    <br>
  </div>
    
  <style>
    h1 {
      margin-bottom: 50px;
      color: ${ color() };
    }
  </style>

  <script>
    this.message = 'Мой компонент!'
    this.color = () => 'orangered'
    this.users = [
      {
        name: 'Дмитрий',
        age: 28
      },
      {
        name: 'Ольга',
        age: 25
      },
      {
        name: 'Максим',
        age: 30
      }
    ]
  </script>
</my-component>

Кроме удобного способа создания Веб-компонентов и добавления им реактивности с помощью прокси, библиотека использует в качестве наблюдателя систему событий доступную в браузере, и предоставляет маршрутизатор, на основе наблюдателя и метода pushState().

Если вы хотите узнать о Compo.js больше, то начните её изучение с учебника, в котором на простых примерах представлена вся её доступная функциональность!

Tags:
JavaScript, Components, Compo.js, реактивная, библиотека, веб-компоненты

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.