3

Начал делать сайт, реализованы несколько страниц, добавление нескольких типов объектов, администрирование ролей пользователей.

Начал активно использовать Tabulator для отрисовки таблиц на сайте, очень понравилась модель работы, когда логика таблицы запускается на стороне пользователя, а обращения к серверу происходят по средству REST запросов при необходимости и совсем нет необходимости постоянно перерисовывать HTML страницу.

Мне кажется это так же должно снизить нагрузку на сервер. Перераспределив процесс отрисовки на сторону клиента.

В замен этого Thymeleaf подразумевает полную работу на стороне сервера, а клиенту выдавать уже полностью готовый HTML.

В процессе продумывания новых функций начинает появляться потребность в динамических элементах. Например, поле со списком выбора, список выбора которого зависит от значения выбранного в другом поле. Если в Tabulator'е все понятно, он отрисовывает данные на стороне пользователя и в случае необходимости запросит список выбора REST запросом на сервере, то в Thymeleaf это либо пересовывать всю страницу при каждом выборе нового значения влияющего на состав списка выбора, либо допиливать дополнительные средства, которые будут динамически запрашивать данные Rest запросом(jQuery на сколько я понимаю).

Вот я и думаю, может переделать то, что уже сделано на Vue.js?

Следовательно встает вопрос реализации:

  1. Thymeleaf + jQuery

  2. Thymeleaf + Vue.js - но тут задумываешся, а оно стоит того? И какие части отдавать Thymeleaf, а какие Vue.js?

  3. Полностью переделать проект под Vue.js

Почему я задумался о переходе на Vue.js?

  1. Мне не совсем понравилась концепция Thymeleaf, что каждое изменение на странице должно собираться на сервере и страница должна полностью отрисовываться заново;

  2. Я в любом случае хочу использовать динамические элементы на странице, которые позволяют менять только часть содержимого страницы, как, например, с Tabulator меняется только элемент страницы содержащий таблицу;

  3. Можно разгрузить сервер от множества мелких запрос, которые можно переложить на клиента: валидация форм, отрисовка страниц;

  4. Можно на сервере оставить только запрос данных и возврат из в виде JSON.

Кто что по этому поводу думает?

1
  • Насчет варианта Thymeleaf + Vue.js: Думал сделать можно так, каркас страниц формировать в Thymeleaf, т.е. на стороне сервера, а именно: Шапка, боковые колонки, центральная колонка, какие-то статические элементы, т.к. меню и ссылки присутствующие на всех страницах. Динамические элементы: формы, панели с меняющимися данными, списки, таблицы, графики формировать с помощью Vue.js 3 авг 2019 в 4:56

1 ответ 1

6

Vue.js

Это наиболее верный путь. Скорее всего он увеличит количество работы (объем работы != затраченому времени). И все же я настоятельно рекомендую выбрать его. Написав бэк, Вам будет значительно легче просто работать с данными (основной подход Vue - data first). Чем опрерировать кусками шаблонов в связке Thymeleaf + jQuery.

Thymeleaf + jQuery

Отрисовка шаблонов, а затем встраивание их с помощью jQuery сносный вариант для 2008 - 2012 годов, когда небыло реализаций VirtualDOM, а JS движки были достаточно медленными и неоптимизированными. Время идет и сейчас это определенно не лучший подход. Перерисовка больших кусков DOM и ухудшение отзывчивости это не самые серьезные проблемы с которыми Вы можете столкнутся. К тому же (это мое личное мнение) с jQuery очень сложно писать эффективный и структурированный код.

Thymeleaf + Vue.js

Это худший из вариантов. Vue старается максимально оградить Вас от модификации DOM, к тому же если вы создадите Vue проект и скомпилируете его, то весь HTML будет автоматически превращен в JSX. Собранная версия проекта (npm run build), не содержит в себе компилятора HTML -> JSX. То есть Vuе не сможет обработать Ваши HTML шаблоны, Вы все еще можете использовать Vue с cdn или просто минифицированную версию без использования Одно-Файловых Компонентов (Single File Components), но этот путь мало отличается от варианта с jQuery. Многие приемущества Vue включая прекомпилированный HTML, области вилимости CSS, и Одно-Файловые Компоненты будут недоступны в cdn версии Vue.

Можно разгрузить сервер от множества мелких запрос, которые можно переложить на клиента: валидация форм, отрисовка страниц;

Вы не совсем правы. На фронте Вы можете производить только визуальную валидацию данных. Вы НЕдолжны полагаться на честность данных и должны всегда валидировать их на сервере.

9
  • 1. Т.е. в случе с Vue.js весь рендеринг будет происходить на стороне клиента? (Это стандартная схема, видел у них есть руководство по рендерингу на стороне сервера). 2. Правильно ли я понял, что если необходимы динамические страницы одним Thymeleaf не обойтись, придется прикручивать еще что-то? 3. Валидация на стороне сервера в Spring будет реализовываться все той же аннотацией @Valid и в случае ошибок необходимо возвращать сообщения об ошибках? 3 авг 2019 в 8:47
  • Вы НЕдолжны полагаться на честность данных и должны всегда валидировать их на сервере. Вспомнил, например, я не смогу проверить на стороне клиента дублирование данных в таблице базы данных, например, уникальность email. 3 авг 2019 в 8:49
  • 1
    @AlexanderLopatin 1. Да, если вам нужно SSR (Server Side Rendering), то вы можете использовать Nuxt.js 2. Да, серверные шаблонизаторы умеют создавать только статические страницы. 3. К сожалению на счет этого вопроса дать комментарий не могу. С Spring не работал. Вам стоит задать новый вопрос как наиболее эффективно создатьвать rest бэкенд на Spring. Возможно есть вещи которые упростят Вам жизнь. 3 авг 2019 в 9:51
  • 1
    @AlexanderLopatin, Node.js, npm, SFC, смешивать клиент-side и сервер-side рендеринг? Webpack, yarn, babel - это все тоже из этой истории? Посмотрите в сторону nuxt.js этот фраемворк для Vue сильно упрощает жизнь с SSR. Но страницы в случае cdn могут не прогружаться целиком, при отключеном JS, т.к. полностью собираются на стороне клиента JS кодом? Абсолютно верно, Vue полностью отделяет ваш форнт он бэка и рендерит HTML на стороне клиента. На самом деле это все не так страшно как кажется на первый взгляд. 6 авг 2019 в 11:20
  • 1
    @AlexanderLopatin, В идеальной конфигурации для полноценного SPA с SSR вам нужны Vue (Vuex, Vue Router, Vue Meta) и Nuxt.js. vue-cli (в случае использования Nuxt ("nuxt-cli") и больше ничего, CLI автоматически создаст структуру проекта за Вас и подтянет все необходимые зависимости, так же проект созданный с помощью vue-cli будет иметь свой собственный файл конфигурации Webpack и настройки Babel уже сконфигурированные для начала комфортной разработки. При желении их можно будет настроить дополнительно (например для поддержки IE 8). 6 авг 2019 в 11:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.