Какие существуют высокоуровневые компонентные фреймворки для JavaScript?

Какие существуют <b>javascript</b> фреймворки <a href="https://en.wikipedia.org/wiki/Software_component" rel="nofollow">высокоуровенных компонентов,</a> которые позволяют быстро начать разработку логики приложения без необходимости углубляться в детали фреймворка? Например, решения подобные <a href="https://en.wikipedia.org/wiki/JavaServer_Faces" rel="nofollow">JSF</a>, но для фронтенда, поддерживающие фронтенд/джем рендеринг и обеспечивающие полу-автоматическую связь между частью М из <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" rel="nofollow">MVC</a> и <a href="https://en.wikipedia.org/wiki/Quarkus" rel="nofollow">бэкендом</a>?
  • 18 декабря 2024 г. 22:23
Ответы на вопрос 2
Существует несколько высокоуровневых компонентных фреймворков для JavaScript, которые позволяют разработчикам быстрее начинать работу, не углубляясь в детали фреймворка. Вот некоторые из них:

1. **React** с библиотеками, такими как **Next.js**:
   - React предоставляет компонентный подход к разработке интерфейсов. Next.js добавляет возможности серверного рендеринга и статической генерации, что делает его удобным для создания приложений с высокими требованиями к SEO.

2. **Vue.js** с использованием **Nuxt.js**:
   - Vue.js предлагает реактивный подход к созданию пользовательских интерфейсов. Nuxt.js расширяет возможности Vue, позволяя реализовать серверный рендеринг и маршрутизацию, что облегчает разработку сложных приложений.

3. **Angular**:
   - Angular — это фреймворк, который включает в себя множество готовых решений для построения сложных приложений, таких как маршрутизация, формирование и работа с сервисами. Он имеет мощный инструмент для построения компонентов и поддерживает MVVM (Model-View-ViewModel) архитектурный подход.

4. **Svelte**:
   - Svelte — компилятор, который превращает компоненты в чистый JavaScript. Он предлагает простой и интуитивно понятный API. При этом создаются высокопроизводительные приложения без необходимости использования виртуального DOM.

5. **Mithril**:
   - Mithril — легкий JavaScript-фреймворк для создания одностраничных приложений. Он предлагает простой API и часто используется для создания сложных пользовательских интерфейсов с малым объемом кода.

6. **Ember.js**:
   - Ember.js — это фреймворк с очень строгими конвенциями, который помогает создавать амбициозные веб-приложения. Он предлагает множество встроенных решений, таких как маршрутизация и управление состоянием, что сокращает время разработки.

7. **Alpine.js**:
   - Alpine.js — это минималистичный фреймворк, который позволяет добавлять интерактивность в существующие HTML-страницы без необходимости использовать более сложные инструменты, такие как React или Vue. Он предлагает декларативный синтаксис и работает путем добавления атрибутов в HTML-код.

Эти фреймворки позволяют сосредоточиться на бизнес-логике и пользовательском интерфейсе, автоматически обрабатывая многие аспекты взаимодействия между компонентами, что сильно упрощает разработку.
Если я правильно понял вашу фразу "связано (полу-)автоматически с бэкендом", то вы имеете ввиду SSR (Server Side Rendering) 

Если бы я не увидел у вас ссылку на Quarkus (то бишь Java), я бы посоветовал вам не терять время на изучение чего-то странного и непопулярного, и приступить непосредственно к изучению React и его фреймворка для SSR Next.js. Я не люблю ни то, ни другое, но это, к сожалению, индустриальный стандарт, и очень желательно их знать.

Но так как я увидел у вас бэкенд на Java и желание всё же иметь ту самую "полу-автоматическую связь с бэкендом", то можете поступить радикальным образом: взять какую-то UI библиотеку из веб-компонентов (например Shoelace ), или более традиционные библиотеки UI, основанные на tailwindCSS (например, daisyUI ).
Весь HTML рисовать на бэкенде, а оживлять это всё с помощью библиотеки HTMX. Это позволит вам всю логику и стейт держать на бэкенде, и, в то же время, иметь очень хорошую интерактивность. https://www.youtube.com/watch?v=vgAKrggD0vQ&t=173s
Похожие вопросы