Can web components UI use dynamic data from our backends DB as input?

Yamita — Fri, 04 Feb 2022 03:07:37 +0000

Hi Team,

I'm considering learning web components, either stencil or lit elements.

A deal breaking for me is being able to create UI elements that can actually take data from our DB as an input and then morph the output of the UI element getting displayed. So if I have a Django backend with PostgreSQL and store two columns for [stockprice] & [timedate].

Is there a web component framework that lets me write a UI widget like this (pseudo code)...

Example 1 UI - line chart stock widget

CSS = rectangle(purple)

var1 let [stockprice] = Y axis
var2 let [datetime] = X axis

CSS = 3 buttons (user options)
button 1 if [datetime] >= 7days, delete (exclude)
button 2 if [datetime] >= 30days, delete (exclude)
button 3 if [datetime] >= 365days, delete (exclude)

plot_line_chart(stockprice, datetiime)
addbuttons()

Example1 output.

This would in theory output a line chart with stock prices against a certain timeframe and allow the users to display if they want to view price in last 7, 30 or 365days depending on which option they click.

In example 1, both the stock chart and button selection are ONE element part of the same custom UI as indicated by the purple rectangle.

Bonus: if this works. could the button options be decoupled from the rectangular stock widget. i.e. PINK rectangle = stock widget stand alone and GREEN rectangle = button widget example 2 below. so we can e.g. place it as a bar underneath it for the user to click? They would still be loosely coupled so stock widget (pink rectangle) still relies on data choice from buttons (green rectangles). So instead of storing var2 within the stock widget. Can we say...

var2 let [selected custom-ui-button-option] = X axis
and then we have the button options as a separate UI element.

Example 2 UI [selected custom-ui-button-option] UI element

CSS = 3 buttons (user options), rectangle(green).

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

When one option is pressed by the user, the data from our DB would be stored INSIDE THE BUTTON, then gets passed to the UI stock widget, so it has data for the Y axis to generate a line chart.

Example 2 output.

If this does NOT work in web components can I just do it in NextJS? If so I'd skip learning web components. However if both scenarios do work, why would anyone even bother with front end frameworks like react that create UI elements limited to their own framework ecosystem?

Benny Powers in the posts below talks about some web component limitations but I'm too noob to understand it. Something about HTML only accepting strings so maybe for DB data to work in custom UI... The dictionary key value pair of key = stock price, value = [$stock_amount] would have to be converted to a [list of int stock values] then those int values converted to a [comma separated string] then feed it to the HTML custom UI? This is of course my assumption and welcome a better explanation or simply being told... Unfortunately web components cannot do what you are trying to achieve from them, here is why... Then I can at least forget about them and learn NextJS right away.

PS: You don't have to know every answer to every question in this post to respond, we can build upon it with incremental knowledge that's shared.

Limitations of web components
Limitation Tests (lit elements): https://custom-elements-everywhere.com/libraries/lit/results/results.html
Limitation Tests (stencil): https://custom-elements-everywhere.com/libraries/stencil/results/results.html
Web Component Standards: https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85
Polyfills: https://dev.to/bennypowers/lets-build-web-components-part-2-the-polyfills-dkh
Vanilla Components: https://dev.to/bennypowers/lets-build-web-components-part-3-vanilla-components-4on3
Lit Elements: https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906
Bonus Tips: https://dev.to/bennypowers/8-days-of-web-components-tips-39o5

DEV Community: Yamita

Can web components UI use dynamic data from our backends DB as input?

Example 1 UI - line chart stock widget

Example 2 UI [selected custom-ui-button-option] UI element