Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
Web components work anywhere HTML works, so yes. That being said, some frameworks play games with HTML and the DOM in ways that make it harder to use web technologies on their own terms. I don't have much experience using web components in NextJS myself, but a quick search turned up this first result:
Sure, web components have a variety of means of accepting complex data of any variety. You can use a "light DOM as data" approach, assign DOM properties, or use stringified attributes, depending on what works for you. For your stock ticker example, you could write a reactive controller which updates the host with stock prices based on API calls. See the ClockController example and adapt to use asynchronous fetch() calls.
in my personal opinion, I prefer Lit over Stencil because Lit is oriented more as a set of additional features on top of platform features, whereas Stencil is oriented more as a framework. That being said, you are perfectly able to use web components written in stencil inside your Lit components and vice-versa
Yes, you can use CSS preprocessors with Lit or other web components libraries, but it will add complexity. my rollup-plugin-lit-css and esbuild-plugin-lit-css help smooth that process out. In my personal opinion, modern CSS is great and doesn't need any help from pre-processors
There he says "When compared with Web Components, React has the following advantages:
-Allows you to change the underlying data model with state
-Trigger UI changes based on the state
-Writing components using functions and hooks"
But isn't he simply wrong? I know for a fact you can change the STATE of UI using stencil (probably with Lit as well). Not sure about functions or hooks though because I don't know what they are yet (no reactJS experience).
Let me see if I understand your point 2.
Are you saying we CAN use our DB data and have it dynamically update in our web component, but NOT DIRECTLY? It has to be done via an API call? So the web component cannot access the DB directly. Instead we have to write an API with our backend framework that allows a web component to 'fetch' the data array from the API. And from that point do a calculation in the DOM on what it fetched? Is this how we would build different calculator types using web component and data from our DB?
A very simple example would be, DB storing house prices in a suburb. How would we get the web component to get a list of the e.g. 150 records in the first place? So we can calculate the average price... so SUM of 150 records / 150 = X average price.
PS: Rather than fetching 150 records. We just make the API run a calculation summing the records before it passes it onto the web component, then the web component only needs 1 request, not 150 requests. And on that 1 request it can do Sum of Records / 150 = average price. I assume this would be a more effective way to program that reduces server load and saves money?
If you want to visualize that describes my needs better. I actually wrote an article here. No one has been brave enough to reply yet but you're welcome to take a crack at it. dev.to/yamita/can-web-components-u...
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
BTW it's my personal opinion that you don't really need those abstractions, but it's nice to know they're there
It has to be done via an API call?
Yeah if you want to run calculations on or access data from a webserver you need the browser to make a network request. JavaScript has a built-in http client called fetch()
I assume this would be a more effective way to program that reduces server load and saves money?
Thanks a million! You have given be the inspiration to continue the web component journey and help others like myself when I become good enough! <3
I appreciate that you treated me nicely and saw that I have okay problem solving skills but need to pickup on the syntax now. These questions were more to understand possibilities and get a clearer picture of the end target and what can be achieved. I think conversations like these are still useful to market the web component technology. ^.^
I'll read about the functions/hooks web components libs tomorrow and learn about react hooks just to understand it conceptually before I decide if if it's important. But right now Lit sounds like an amazing option with a nice community and will probably be where I start my front end journey. Goodnight!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Yamita!
Web components work anywhere HTML works, so yes. That being said, some frameworks play games with HTML and the DOM in ways that make it harder to use web technologies on their own terms. I don't have much experience using web components in NextJS myself, but a quick search turned up this first result:
How to use Web Components with Next.js and TypeScript
swyx ・ Apr 3 '20 ・ 2 min read
Sure, web components have a variety of means of accepting complex data of any variety. You can use a "light DOM as data" approach, assign DOM properties, or use stringified attributes, depending on what works for you. For your stock ticker example, you could write a reactive controller which updates the host with stock prices based on API calls. See the
ClockControllerexample and adapt to use asynchronousfetch()calls.in my personal opinion, I prefer Lit over Stencil because Lit is oriented more as a set of additional features on top of platform features, whereas Stencil is oriented more as a framework. That being said, you are perfectly able to use web components written in stencil inside your Lit components and vice-versa
Yes, you can use CSS preprocessors with Lit or other web components libraries, but it will add complexity. my
rollup-plugin-lit-cssandesbuild-plugin-lit-csshelp smooth that process out. In my personal opinion, modern CSS is great and doesn't need any help from pre-processorsThanks for the questions :)
Thank you Benny you're the best!
After further research the developer of CodePen wrote an article: blog.bitsrc.io/web-component-why-y...
There he says "When compared with Web Components, React has the following advantages:
-Allows you to change the underlying data model with state
-Trigger UI changes based on the state
-Writing components using functions and hooks"
But isn't he simply wrong? I know for a fact you can change the STATE of UI using stencil (probably with Lit as well). Not sure about functions or hooks though because I don't know what they are yet (no reactJS experience).
Let me see if I understand your point 2.
Are you saying we CAN use our DB data and have it dynamically update in our web component, but NOT DIRECTLY? It has to be done via an API call? So the web component cannot access the DB directly. Instead we have to write an API with our backend framework that allows a web component to 'fetch' the data array from the API. And from that point do a calculation in the DOM on what it fetched? Is this how we would build different calculator types using web component and data from our DB?
A very simple example would be, DB storing house prices in a suburb. How would we get the web component to get a list of the e.g. 150 records in the first place? So we can calculate the average price... so SUM of 150 records / 150 = X average price.
PS: Rather than fetching 150 records. We just make the API run a calculation summing the records before it passes it onto the web component, then the web component only needs 1 request, not 150 requests. And on that 1 request it can do Sum of Records / 150 = average price. I assume this would be a more effective way to program that reduces server load and saves money?
If you want to visualize that describes my needs better. I actually wrote an article here. No one has been brave enough to reply yet but you're welcome to take a crack at it.
dev.to/yamita/can-web-components-u...
yup.
changing state with lit: lit.dev/docs/components/properties/
BTW it's my personal opinion that you don't really need those abstractions, but it's nice to know they're there
Yeah if you want to run calculations on or access data from a webserver you need the browser to make a network request. JavaScript has a built-in http client called fetch()
Seems legit to me
Thanks a million! You have given be the inspiration to continue the web component journey and help others like myself when I become good enough! <3
I appreciate that you treated me nicely and saw that I have okay problem solving skills but need to pickup on the syntax now. These questions were more to understand possibilities and get a clearer picture of the end target and what can be achieved. I think conversations like these are still useful to market the web component technology. ^.^
I'll read about the functions/hooks web components libs tomorrow and learn about react hooks just to understand it conceptually before I decide if if it's important. But right now Lit sounds like an amazing option with a nice community and will probably be where I start my front end journey. Goodnight!