Плюсы и минусы Vue и gtsAPI

Вот уже год как веду разработку с использованием Vue. Хочу поделиться впечатлениями от этой технологии и очень интересно, что думают другие разработчики.


Я начал использовать Vue так как слаб в дизайне, верстке и хотел использовать какой-нибудь UI фреймворк для более красивого дизайна. Современные фреймворки jquery уже не используют (или редко) и по большей части построенны на реакт, Vue и т.д. Мне больше запал Vue и UI фреймворк PrimeVue.

Если кто не в курсе что такое реактивный фреймворк вкратце объясню. Как сам это понимаю :-).
Например, создаем тестовый список в HTML и используем чистый JavaScript для добавления нового элемента в конец списка и изменения текста первого элемента.

<ul id="list">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>

  <script>
    const list = document.getElementById('list');
    const newElement = document.createElement('li');
    newElement.textContent = 'Новый элемент';

    list.appendChild(newElement);

    const firstElement = list.children[0];
    firstElement.textContent = 'Измененный элемент 1';
  </script>

А на Vue пишем

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
  <button @click="addNewItem">Добавить новый элемент</button>
  <button @click="changeFirstItem">Изменить первый элемент</button>
</template>

<script setup>
import { ref } from 'vue'

const list = ref(['Элемент 1', 'Элемент 2', 'Элемент 3'])

const addNewItem = () => {
  list.value.push('Новый элемент')
}

const changeFirstItem = () => {
  list.value[0] = 'Измененный элемент 1'
}
</script>

На чистом js надо найти элемент, например по ид, и изменить его. А на Vue пишем в шаблон реактивную переменную и если ее поменять, то автоматически измениться HTML.

На Vue не нужно искать элемент в html и как-то манипулировать с ним. В Vue меняешь переменную и автоматически меняется html. В принципе это удобнее и быстрее.
Я планирую в дальнейшем писать фронт в основном на Vue.

Недостатки Vue:
1) Данные которые вносятся в html надо как-то получить. Если используя PHP, можно внести данные на стороне сервера и сразу вывести уже заполненую страницу, то Vue выполняется на стороне браузера и данные нужно дополнительно получать с сервера по АПИ. А при загрузке страница пустая. Тратится время на получение данных по АПИ, их обработку и render html. Когда я начал работать с Vue, компонентов АПИ для MODX не было. Сейчас есть gtsAPI и mmxDatabase.

2) На мой взгляд, существенный недостаток — это то что html нельзя поменять не меняя сами компоненты Vue. Работая с модекс привык, что есть сниппеты и чанки. Пишешь сниппет и дефолтовый чанк к нему, а верстальщики если что-то надо поменять в html, просто указывают в параметрах свой чанк. Есть vue3-runtime-template, но он не работает в режиме composition API.

3) Можно нактнуться на неожиданные тормоза приложения на этапах получения данных по АПИ, выполнения тяжелых функций приложения, рендера html vue или при отрисовки браузером большого кол-ва элементов.

Плюсы gtsAPI
В ExtJs для MODX на каждую операцию: создания, редактирования, удаления и.т.д. нужно прописывать отдельный процессор на стороне сервера и прописывать код ExtJs на стороне браузера. Совершенно однотипный код, но приходилось писать его каждый раз, в течении 2-4 часов.
gtsAPI и PVTables задумывалась так, чтобы операции CRUD не было необходимости программировать каждый раз заново. Достаточно разрешить операцию и компоненты уже могут делать ее по запросу пользователя. Сейчас создать интерфейс CRUD для каких либо данных дело 10-30 минут.
Для более сложных операций предусмотрены триггеры и handleRequest в класс пакета.

Минусы gtsAPI
1) Каждый раз при запросе к серверу MODX проводить инициализацию, которая занимает на моем ноутбуке 100мс. При использовании АПИ в приложении кол-во запросов к серверу сильно стремиться вырасти. А каждый запрос вызывает инициализацию на 100мс. Тратится время и нагружается сервер. Я как-то тестировал NodeJs и ее время ответа поразило 1мс. Нода инициализирутся при запуске сервера и при запросах лишних операций не производит. Возможно бек стоит делать на ноде, но во первых нет времени, а во вторых нода однопоточная. Возможно, какой-нибудь тяжелый запрос на 2-3 минуты заставит ждать все остальные. Не тестировал еще.
В общем, пока, когда пишу, стремлюсь сократить кол-во запросов к gtsAPI.

2) Стало сильно быстрее делать CRUD, но это наложило некоторые ограничения. Например, в таблице PVTables есть так называемые подтаблицы. В терминах PrimeVue extendedRows. Сейчас, PVTables позволяет использовать в подтаблицах только другие таблицы. А бывает надо туда форму, дерево или произвольный чанк :-(.


3) Современный UI фреймворк много весит. Из-за PrimeVue, PVTables, его включающий, весит 1,2МБ. С современной скоростью интернета не критично, но тенденция настораживает.

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

В веб разработке много компонентов отдельно для фронта и отдельно для бека. Возьмешь удобное для фронта и надо самому писать бек.

Вот мои впечатления. Какие впечатления у Вас?