Присоединяйтесь к вечеринке JavaScript-фреймворков для веб-компонентов

Место, где вы можете сравнить общий синтаксис задач между ведущими JavaScript-фреймворками для веб-компонентов. Почему это полезно?

Мы все знаем, насколько фрагментирован ландшафт JavaScript-фреймворков. В некотором смысле можно провести границу между двумя эпохами - до React и после React.

До появления React :

• jQuery был самым популярным способом создания веб-приложений. Он принимал веб-сайты такими, какими они были на самом деле, - деревом узлов DOM.
• В Backbone.js был изобретен паттерн Model-View-Controller. При изменении модели все представления, которым было важно состояние модели, перерисовывались.
• AngularJS, как в хорошую, так и в плохую сторону, внедрил двустороннюю привязку данных. На практике неявное изменение состояния обычно приводило к коду, за которым трудно следить и который трудно отлаживать.

После React есть не только React. Мириады фреймворков заполонили экосистему JavaScript: Vue, Qwik, Million.js, Astro, Remix, SvelteKit, да мало ли что еще.

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

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

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

Не бойтесь, перед вами Component Party! Сайт, который упрощает сложные обзоры различных JS-фреймворков для легкого понимания.

Список фреймворков включает в себя:

• React
• Vue 3
• Angular
• Angular Renaissance
• Lit
• Vue 2
• Ember Octane
• Solid.js
• Alpine
• Svelte 5
• Ember Polaris (предварительный просмотр)
• Mithril
• Аурелия 2
• Qwik
• Марко
• Аурелия 1

Примеры общих задач, рассматриваемых с точки зрения каждого фреймворка, следующие:

• Реактивность:Объявление состояния, Обновление состояния, Вычисляемое состояние
• Шаблонность:Минимальный шаблон, Стилизация, Цикл, Событие клика
• Жизненный цикл: При монтировании, При размонтировании
• Состав компонентов:Реквизиты, Передача родителям, Слот, Обратный слот, Контекст

Интерфейс сайта построен на Vite и Svelte, и помимо того, что он хорошо выглядит, он еще и удобен: просто выбрав фреймворк на панели инструментов, вы увидите, как выполняется задача в каждом из них. Например, выбрав React, Svelte3 и Vue, а затем Reactivity/Declare state, вы получите:

что-то, что дает очень быстрый обзор того, что вы хотите сделать. Очень полезно.

Кроме онлайн площадки, вы также можете самостоятельно разместить Part, сделав форк его репозитория на Github.

Так что если вы хотите попрыгать на фреймворках или просто поучиться, добро пожаловать на вечеринку!