Какие есть способы динамическое построения интерфейса, DOM?

Question

[ettaluni]

Доброго дня! Вынужден писать интерфейс на Ajax запросах. Так убого получается. Нужно генерить элементы DOM из JS.
Ничего лучше Jquery я не придумал, и получается такая здоровая портянка:

let hTpl = '<div data-guid = "#GUID" class = "col-md-12 project-container__item">\
							<span class = "project-item__number">#NUMBER</span>\
							<span class = "project-item__title">#NAME</span>\
							<div class = "project-item__control">\
								<img src = "img/i_play.png">\
								<img src = "img/i_refresh.png">\
							</div>\
							<div class = "project-item__progress">\
								<progress class = "midea-progress--little" max="100" value="#PROGRESS"></progress>\
								<span class = "midea-progress--little">#PROGRESS%</span>\
							</div>\
						</div>';

						hTpl = hTpl.replaceAll('#NAME', arProject[ii].NAME);
						hTpl = hTpl.replaceAll('#GUID', arProject[ii].GUID);
						hTpl = hTpl.replaceAll('#NUMBER', ii);
						hTpl = hTpl.replaceAll('#PROGRESS', arProject[ii].PROGRESS);

Есть способы построения интерфейса красиво и лаконично? У меня все функции здоровенные.
Также я до сих пор все события назначаю через

$(document).ready(function () {
$('.js-progress-reload').click(function () {});
$('.js-progress-stop').click(function () {});
});

И опять же здоровая такая эта функция выходит, когда много написал сложно поддерживать. Может профессионалы поделятся опытом как организовывают всю логику интерфейса, может сейчас к 2021 вышли новые методики, стандарты, фреймворки. Сам я из 2015))) Последние проекты в том году писал.

Comments

[Rustam Bainazarov]

Если интересует только вопрос размера кода, то на чистом JS или на каком-нибудь React будет ещё больше, LOL.

[ettaluni]

Рустам Байназаров, И что делать, посмотрел только что Vue это тоже самое, просто div да все теги убрали. Все на объектах

[Rustam Bainazarov]

ettaluni, ну я бы не сказал, что то же самое. Там функционала в сотни раз больше помимо самой реактивности DOM. Просто тогда нужно изучать JS и Vue, чтобы пользоваться этим функционалом. И размер кода вообще не показатель и мерило.

[ettaluni]

Рустам Байназаров, Мне нужно быстро состряпать интерфейс через REST API для моего node js приложения. У меня глаза в кучу, сколько я жуе html запихал в js.
Что из этих трех выбрать angular, react, vue

Answer 1

[Rsa97]

Vue.js / React / Angular

Comments

[ettaluni]

Что из этого трех лучше выбрать? Если смотреть в размере кода?

[Rsa97]

ettaluni, У каждого свои достоинства и недостатки. Мне лично понравился Vue и основанный на нём UI-фреймворк Quasar.

[Israfil22]

ettaluni, vue и react одинаково примерно. Только Vue еще больше упрощает построение интерфейсов фичами из коробки (реактивность, двустороннее связывание). Взамен платите бОльшей ограниченностью рамками фреймворка.

[ettaluni]

Rsa97, Прочитал Квазар поддерживает SSR (Server-side Rendered App). У меня REST API на Express я могу как то построить на нем UI. Или для моего проекта он не подойдет

[Rsa97]

ettaluni, Точно не скажу, в моих задачах SSR не нужен. Но, поскольку Vue - это фреймворк на JS, то на бэкенде, по идее, для SSR должен использоваться node.js.
Если же достаточно CSR, то годится любой бэкенд, хоть на REST, хоть на JSON-RPC, хоть на чём-то своём.

[Sun_Day]

ettaluni, если в размере кода - то ангуляр нужно сразу отсечь. Реакт, вью - близко друг к другу.

Answer 2

[Stalker_RED]

Есть template в DOM, чтобы не делать replace в строке.

Есть шаблонные строки

const foo = `<div data-guid = "#GUID" class = "col-md-12 project-container__item">
              <span class = "project-item__number">${ii}</span>
              <span class = "project-item__title">${item.NAME}</span>
              <div class = "project-item__control">
                <img src = "img/i_play.png">
                <img src = "img/i_refresh.png">
              </div>
              <div class = "project-item__progress">
                <progress class = "midea-progress--little" max="100" value="${item.PROGRESS}"></progress>
                <span class = "midea-progress--little">${item.PROGRESS}%</span>
              </div>
            </div>`

Ну и есть фреймворки типа vue и react, которые довольно много всего упрощают, но и выучить их получится не за пару дней.

Comments

[ettaluni]

Круто, спасибо за шаблоны

[ettaluni]

Что из этих трех react vue angular выбрать, я посмотрел vue это тот же самый DOM. Только все на объектах.
То есть вот пример, там даже больше кода.

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

[Stalker_RED]

ettaluni, на react и angular больше проектов, но vue быстро растет и догоняет их.

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

[ettaluni]

Stalker_RED,

автоматического обновления значения в DOM при изменении переменной.

У меня интерфейс должен обновляться каждые n-секунд. Походу точно Vue брать надо. Спасибо

Answer 3

[Loli E1ON]

React, JSX