Могут ли веб-компоненты UI использовать в качестве входных данных динамические данные из БД наших бэкендов?

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

Для меня важным моментом в работе с пользовательскими элементами или веб-компонентами является возможность создания элементов пользовательского интерфейса, которые могут принимать данные из нашей БД в качестве входных и затем изменять вывод отображаемого элемента пользовательского интерфейса. Так, если у меня есть Django backend с PostgreSQL и я храню две колонки для [stockprice] & [timedate].

Существует ли фреймворк веб-компонентов, позволяющий написать UI-виджет, подобный этому (псевдокод)...

Пример 1 UI - виджет линейного графика акций

CSS = прямоугольник(фиолетовый)

var1 let [stockprice] = ось Y var2 let [datetime] = ось X

>

CSS = 3 кнопки (пользовательские опции)

кнопка 1 если [datetime] >= 7 дней, удалить (исключить) кнопка 2 если [datetime] >= 30 дней, удалить (исключить) кнопка 3 если [datetime] >= 365 дней, удалить (исключить)

plot_line_chart(stockprice, datetiime) addbuttons()

Теоретически это выведет линейный график с ценами акций на определенном временном интервале и позволит пользователям отобразить, хотят ли они просмотреть цены за последние 7, 30 или 365 дней в зависимости от того, какую опцию они нажмут.

В примере 1 и фондовый график, и кнопка выбора являются ОДНИМ элементом одного пользовательского пользовательского интерфейса, как указано фиолетовым прямоугольником.

Бонус: если это сработает... Можно ли отделить опции кнопок от фиолетового прямоугольного виджета акций. Т.е. ФИолетовый прямоугольник = отдельный виджет акций, а ЗЕЛЕНЫЙ прямоугольник = виджет кнопок, пример 2 ниже. Таким образом, мы можем, например, поместить его в виде полосы под ним, чтобы пользователь мог нажать на него? Преимущество разделения элементов пользовательского интерфейса на два пользовательских элемента заключается в том, что мы можем использовать CSS, чтобы изменить их положение, как нам нравится, например, переместить кнопки выше виджета акций, если мы хотим. Без необходимости корректировать наш "единый пользовательский виджет" из примера 1.

В теории я хочу, чтобы они все еще были слабо связаны друг с другом, поэтому стоковый виджет (розовый прямоугольник) все еще полагается на выбор данных из кнопок (зеленые прямоугольники). Поэтому вместо того, чтобы хранить var2 внутри стокового виджета. Можем ли мы сказать...

var2 let [selected custom-ui-button-option] = X axis и тогда мы имеем опции кнопки как отдельный элемент пользовательского интерфейса.

Пример 2 UI [selected custom-ui-button-option] UI элемент

CSS = 3 кнопки (опции пользователя), прямоугольник (зеленый).

if button1, then 7days [datetime] elif button2, then 30days [datetime] else button3, then 365days [datetime]

Когда пользователь нажимает одну из опций, данные из нашей БД сохраняются ВНУТРИ кнопки, затем передаются виджету UI Stock, чтобы у него были данные для оси Y для создания линейного графика.

Если это НЕ работает в веб-компонентах, могу ли я просто сделать это в NextJS? Если да, то я бы пропустил изучение веб-компонентов. Однако если оба сценария работают, зачем кому-то вообще возиться с фронт-эндом фреймворками вроде react, которые создают элементы пользовательского интерфейса, ограниченные собственной экосистемой фреймворка?

Бенни Пауэрс в сообщениях ниже говорит о некоторых ограничениях веб-компонентов, но я слишком туп, чтобы понять это. Что-то о том, что HTML принимает только строки, так что, возможно, для работы данных БД в пользовательском UI... Пара ключ-значение из словаря ключ = цена акции, значение = [$stock_amount] должна быть преобразована в [список значений акций int], затем эти значения int преобразованы в [строку, разделенную запятыми], а затем переданы в пользовательский пользовательский интерфейс HTML? Это, конечно, мое предположение и хотелось бы услышать более подробное объяснение или просто услышать... К сожалению, веб-компоненты не могут сделать то, чего вы пытаетесь от них добиться, вот почему... Тогда я могу, по крайней мере, забыть о них и сразу же изучить NextJS.

PS: Вам не обязательно знать все ответы на все вопросы в этом посте, чтобы ответить, мы можем развивать его с постепенным увеличением знаний, которыми делимся.

  • Ограничения веб-компонентов

Ограничительные тесты (лит. элементы): https://custom-elements-everywhere.com/libraries/lit/results/results.html. Тесты ограничений (трафарет): https://custom-elements-everywhere.com/libraries/stencil/results/results.html. Стандарты веб-компонентов: https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85. Часть 2 и 3 = ограничения полифиллов и ограничения ванильных веб-компонентов. Часть 5 охватывает ограничения Lit-элементов (stock overflow не позволил мне дать ссылки), остальные части можно пропустить. Бонусные советы: https://dev.to/bennypowers/8-days-of-web-components-tips-39o5

Вернуться на верх