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 больше, то начните её изучение с учебника, в котором на простых примерах представлена вся её доступная функциональность!