Какие есть высокоуровневые компонентные javascript фреймворки?

Question

[Антон Астафьев]

Какие есть javascript фреймворки высокоуровневых компонентов, такие, чтобы можно было сразу начать реализовывать логику приложения, не углубляясь в тонкости этих фреймворков? То есть решение наподобие JSF, но на фронте, с фронтенд/джэм рендерингом и так, чтобы М из MVC было связано (полу-)автоматически с бэкендом?

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

Comments

[Aetae]

>было связано (полу-)автоматически с бэкендом?
Сейчас так не принято.

Фронты пилят только фронт, бэк пилит только бэк. Ни тем ни другим не интересно лезть в чужую степь.

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

Но фреймворки-комбайны конечно есть.

[Антон Астафьев]

Фронты пилят только фронт, бэк пилит только бэк.

Aetae, меня устроит и вариант когда фронт предлагает способ для более-менее автомагического связывания по РЕСТу / графкул. То есть, чтобы компоненту можно было указать на эндпойнт - и он бы большую часть операций схватывал, то есть миниум КРУД и какой-то поиск.
Я посмотрел, например, Vue + Axios примерно так работают. Но там всё равно надо вручную связку делать.
Плюс в Вью как-то мало именно высокоуровневых компонент.

[Антон Астафьев]

Ещё дополнение. Как я предполагаю автоматическую привязку.
Да, в связи с тем, что придётся переехать на фронт, надо как-то фетчить модель на фронт. Прописывать при этом в каждом компоненте вручную адреса эндпойнтов совсем не хочется. Мне видится так, что мы объявляем некий образ/отражение эндпойнтов на фронте. Эти образы используются по типу ява-бинов. Привязка модели происходит к этому образу. Это чем-то напоминает Реактовый Редукс, но в Редуксе вручную прописываются все фетчи, что очень трудоёмко и надоедает. Я же предполагаю, что будет некий общий Рест ресурс, конкрентые подпути которого должны выбираться исходя из имён сущностей.
Не знаю, возможно, так будет работать.

[Алексей Горбунов]

Как вариант можешь посмотреть как сделано на platformerp.ru
На фронте форкнутный JQWidgets c моими исправлениями, на бэке самописка на php.
Код можно скачивать и пользовать.

[Aetae]

Антон Астафьев, vue это база, по сути библиотека, нужны компоненты - используй полноценные фремворки, например я люблю quasar, компонентов в нём много и они удобные.

А для связи с сервером в крупных проектах обычно используется генерация клиента на основе swagger/graphql схемы отдаваемой бэком(у Бэка само собой для этого тоже есть библиотеки). После генерации у фронта на руках просто готовые классы с методами. Генераторы разные генерируют по разному, на любой вкус.:)

Answer 1

[Виктор Кожухарь]

Если я правильно понял вашу фразу "связано (полу-)автоматически с бэкендом", то вы имеете ввиду 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

Comments

[Антон Астафьев]

Спасибо за ответ, я посмотрю ссылки. Но
Server Side Rendering вовсе не предполагается обязательным условием. То есть какая-то, пожалуй значительная, часть стейта будет на бэке, причём это на первых порах, затем это по методе микросервисов скорее всего выделится в сторонние сервисы.
Но для быстрого старта пока всё - на бэк, всё, кроме собственно модели из МВЦ. То есть стейт Модели таки на фронте в любом случае.
Исходя из этого рендерить на сервере не надо. Привязка к бэку же не предполагает бэк-рендеринга (исходя из того, что я знаю). В комментарии выше я подробнее описал, как это видится
PS. На этом сайте не работают относительные/фрагментные ссылки. Видимо неправильный джс фрейморк выбрали

[Виктор Кожухарь]

Антон Астафьев, Если вам понравился Vue, то очень советую посмотреть в сторону библиотеки Vuetify. Очень хорошая штука

[Антон Астафьев]

Виктор Кожухарь, не то чтобы он мне нравился, я пока не знаю. Но первое впечатление самого подхода - вполне устраивает. Не хватает высокоуровневости. И не понятно, как они всё организуют при работе сложных композитных объектов.

Вообще я нашёл вот такой очень старый вопрос на стеке с довольно старыми ответами (последние от 17-го года). Оттуда из того, что ещё живо, можно рассматривать JQWidgets или Ionic (но он для мобилок) как вполне аналог JSF. Так вот, JQWidgets вроде и на Vue рабоает в т.ч.

[Виктор Кожухарь]

Антон Астафьев, Лично от меня совет: не ищите древние решения, потому что документация и помощь по странным древним решениям на порядки хуже всего современного.
Кучу кода на React или Vue вам поможет написать даже тот же AI. А если совсем будет туго, то найти специалиста по React будет в разы дешевле и проще, чем по всем остальным фреймворкам вместе взятым. Vue мне кажется чуть более сбалансированным вариантом, если React совсем не заходит.

[Антон Астафьев]

Виктор Кожухарь, вы считаете ИИ может уже что-то ползеное нагенерить?
Насчёт React - я не отвергаю его совсем, просто с ним в своё время пришлось довольно неплохо поковырятся, в мысле на чистом ДжС. Этого хотелось бы избежать. Возможно я просто отстал от жизни, и сейчас Реакт работает из коробки. Я видел 3 года назад проекты по интеграции React с GraphQL. Может быть там всё упростилось в плане линка до бэка.
Vuetify выглядит многообещающе.

В принципе я больше симпатизирую декларативному описанию вьюх, но желательно не на уровне отдельных дивов.

[Антон Астафьев]

Так, похоже я определился со стеком.
Для моих потребностей на первый взгляд вполне подходят:

• Vue
  
• Vuetify + Jamstack сборка
  
• Vuex
  
• Vapi + Axios + websanova auth
  
• Какой-нибудь Рест-провайдер-автоген по типу Eclipse Endpoints на бэке
  

Спасибо за советы. Очень помогло.

[Антон Антон]

Антон Астафьев, только не vuex, а pinia. Ну и я бы попробовал бы вместо vuetify quasar, что больше ляжет.

[Антон Астафьев]

Антон Антон, а этот Квазар имеет Jamstack сборку?
Это существенно, т.к. постоянно держать включённым нод или ещё что-то не планирую, да и хоститься проще на Jamstack-хостах наподобие Netlify

[Aetae]

Антон Астафьев, есть стороннее расширение: https://github.com/freddy38510/quasar-app-extension-ssg но поддержка у него похоже не очень. Сам не пробовал.

По поводу vue если вы только начинаете пара советов:
1. Не мешайте composition api и options api в одном компоненте. Это будет работать, но это ломает парадигму.
2. Чем меньше компонент - тем лучше, декомпозируйте всё и вся, миллион компонентов с, условно, одним div и парой стилей, лучше, поддерживаемей и производительней, чем один компонент на миллион строк.

[Антон Астафьев]

Aetae, я вот вспоминаю примерно, как устроен был джсф, там же как раз были жирные компоненты. Другое дело, что они частично рендерились на сервере, но в браузере тоже дофига было колбэков на джскрипте, и всё это было одним большим блобом. Радовало то, что меня всё это непотребное устройство меня мало волновало - оно же просто работало из коробки. а что мне ещё нужно было.

[Антон Антон]

Антон Астафьев,

а этот Квазар имеет Jamstack сборку?

а точно ли нужен jamstack?
ssr есть, поддержка нескольких точек входа через конфиг - тоже. А вот комбинированное статико-динамическое аля nuxt ssg или vuepress - нет. Подобное, наверное, лучше на чем-то более приспособленном для этого делать, например laravel + inertia (но мне не нравится, я за ssr при необходимости + бэкэнд).

[Антон Астафьев]

Aetae, Кажется, где-то видел, что gridsome вроде поддерживает статику в квазаре

[Антон Астафьев]

Антон Антон, суть в том, что я бэкендер, и не умею готовить фронты. А вот если у меня на выходе будет статика, я её просто задеплою рядом и всё. К тому же я плохо представляю себе, где хранится состояние в случае с работающим фронтенд-сервером. Это добавляет ещё одно звено в архитектуру. И как потом разбираться где случится рассинхронизация данных по той же сессии.

[Aetae]

Антон Астафьев, на выходе билда фронта без заморочек с ssr - в любом случае просто статика: классический набор html+js+css, просто одну строчку в конфиге сервера прописать для SPA: условно, чтоб любой запрос заворачивался на index.html и всё.

Генерация всякая - это хрень для seo, когда генрируются дополнительные статические страницы, отрендереные и наполненные заранее данными. В общем случае оно нафиг не нужно.

[Антон Антон]

Антон Астафьев,

А вот если у меня на выходе будет статика, я её просто задеплою рядом и всё.

так там по дефолту тоже будет статический сайт, который загружается, js обращается к бэкэнду и дальше выводится информация. остальное нужно только для ssr (рендеринг на стороне сервера с отдачей статики с данными с последующим приданием интерактивности)