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
Top comments (10)
Anything you can do with a framework you can do with web components, and in my opinion you can do it much better as well.
I've built each of your examples at my various day jobs using web components
None of the problems you're describing are actually related to "web components vs frameworks" because all the frameworks have to solve them in some way. Some people like frameworks because they "hide" the solutions to those problems, but I don't, I'd rather learn the standard ways to solve these problems first, then only if I determine I need to add library code, pick and choose carefully.
I agree with you Benny. Having your own component library and code that won't break will save time long term that would have been spent rewriting your codebase.
If web components can do the stuf above I'm learning them.
May I ask one last thing about web components vs libs. This is actually in relation to web architecture like CSR/SSR/SSG. On a high level I understand what they are but since I'm a beginner I don't know if the front-end or back-end is what configures if our webpage will use CSR/SSR/SSG. It sounds from video examples like the front-end lib determines this CSR for React and SSR/SSG for Next but when doing searches only it says that Django uses SSR and can be configured for SSG with an addon called django-distill.
So my question is, if we use web components. How would we SSR/SSG our web application? Do we make the actual component SSR/SSG? Or is it handled by our backend? Or do we use our web components IN some front-end lib that enables and take cares of the SSR/SSG with different routing methods? Like what stack do you use Benny when you want to do SSR/SSG? Still just custom web components?
In theory, If our backend can handle the SSR/SSG, it makes me wonder why anyone would even use next instead of web components + 1 backend framework. Since it seems to fit all needs.
Thank you very much. I'll go and read the Lit and see if I can solve the problem in my original post using web component code.
Web components are just HTML, so they don't need SSR.
But if you really want, you can try
@lit-labs/ssrVERY INTERESTIN!! I will like the Lit project is basically building the hype train now and it will start to take off maybe by the end of the year. Definitely want to be one of the early adapters.
I personally don't care if something is CSR/SSR from a functionality point of view and think that if a web page is fast enough for CSR it saves you money on lower server load. But I just heard that SSR/SSG is better for SEO so that's why I assumed it was a big deal for commercial reasons.
Then again these lighthouse tests at the bottom graphs show how the cleaner code from web components DOMINATE SEO scores compared to frontend libs: wix.engineering/post/is-stencil-a-...
~90 of 100 SEO for web components vs ~70 of 100 for JS libs.
They didn't have Lit in the comparison but I'm confident it would have scored similarly to stencil if not better. Not sure if these SEO scores are on a per component bases though instead of SEO of the website as a whole. But I remember reading that Google has started ranking speed as important and web components are definitely A LOT faster. Now you have more ammo in your future blogs! Looking forward to them.
engineering.linecorp.com/en/blog/t...
i’d choose lit personally. Stencil
has too much other stuff baked in that you don’t get much of a choice about. but that decision might depend on whether or not you want to export your component to pure web components or something like native comps.
the Lit community is exploding and has a lot of great folks (join the Lit and Friends slack if you haven’t already) always working to push the web platform to a better, faster and simpler place
Thanks for commenting. When you said "native comps" do you mean...
OOP compositions? reactjs.org/docs/composition-vs-in...
or components? reactnative.dev/docs/intro-react-n...
I haven't learned react so I don't know what either means but just have to understand the word you mean so I can read up on the meaning and learn.
If I join the Lit community would you guys take me onboard as an apprentice? And is there like a shared Lit component website like this for react? Where I can download UI components that are pre made and tweak them to my needs rather than reinvent the wheel?
Component Library (I believe it's react components, could be wrong. Maybe it's web components): bit.dev/
What Bit is: harmony-docs.bit.dev/essentials/wh...
Also if I go with Lit, should I go with Lit elements or Lit HTML? Even the official docs is vague about the differences. I don't like that they have split it into two things.
i misspoke, i meant to say other output targets. Stencil can output more than web components but it’s gonna depend on your use case: stenciljs.com/docs/output-targets
Lit is the custom elements base class, lit-html is an included tool that helps with making HTML templates inside Lit element render functions. lit-html is the package that has html`` tagged template strings and other helpers for dealing with HTML as strings for use in web comps
lit.dev has all the info, including the playground where you can play with Lit and see how components work with it. as far as joining the community anyone is welcome! there’s not any formal training or apprenticeship stuff, but anyone is encouraged to ask questions!
Thanks I hope my questions are helpful to others. I'll read the Lit docs and more about stencil output targets before asking other stuf.
Dev.to is way nicer than stackoverflow, had some salty mod downvote my post there even though I'm just a beginner asking for guidance on where to start.