I'm a software engineer working as a full-stack developer using JavaScript, Node.js, and React. I write about my experiences in tech, tutorials, and share helpful hints.
I love the idea of using built-in components that can be used anywhere but when trying to dive deeper into web components I found there to be a bit of friction in using it to create an app.
There seemed to be a number of different ways to approach using web components:
Vanilla web components
The issue here seems like there are missing features or difficult to use features in vanilla, which I believe is the reason Lit exists. Vanilla isn't as "batteries included" as I would have liked.
Use a wrapper (LitElement)
I like LitElement/LitHTML's simplicity and syntax. I think the thing missing here is how to assemble this into an app with modern features such as routing, offline support, bundling, etc. There wasn't a clear direction on the next steps to take. A "Create Lit App" or "Lit CLI" to get up and running quickly with a more minimal working app that has a lot of the setup abstracted away would be ideal.
I know there are repos like PWA Starter Kit and OpenWC, but I felt that these had too much included. If I were to build a simple site, I would be removing or not using a good portion of either of these.
Tooling wasn't quite there. I know it is just JavaScript, but in using these you have to hunt for tools that will have proper syntax highlighting, formatting, and linting. Those tools seemed to not exist, had conflicts with other tools, or were difficult to get working properly.
Use a compiler (SkateJS, Stencil)
While these look like awesome tools, they felt wrong to me. One of my reasons looking into web components was to be framework-agnostic and to future-proof my skills, so while these tools are "not frameworks", they lock you into a specific library. It isn't #UseThePlatform, it is #CompileForThePlatform.
I want to like web components, but there are some things holding me back. I stopped pursuing them for now because it seemed like using a framework such as Vue was easier to be productive with and a better choice for me.
I'm open to any opposing viewpoints. Any suggestions for someone like me?
WCs are just another platform primitive. I don't think they're intended to be part of something called "Create Lit App". I appreciate that this might be what you want. For all of the criticism of say, the thousands of dependencies needed by Create React App, I appreciate that it's an easy way to start.
If anything, WCs lend themselves to the idea of modern ES6 bundling. I'm not necessarily endorsing the Pika package manager, but it has an interesting writeup on its vision. This is effectively the "no-build" system- you just import './element-name.js, and use <element-name> inside your code.
That <element-name> you've created can now be used inside any modern "create foo" or "starter kit". It's just important to remember that WCs aren't really targeting that high level on their own.
I'm a software engineer working as a full-stack developer using JavaScript, Node.js, and React. I write about my experiences in tech, tutorials, and share helpful hints.
Good point on the dependencies, I was definitely shocked when I npm installed lit-element and saw one folder in node_modules. There is definitely a lot of developer convenience in those types of up-and-running tools, but there is a cost passed on to the user. I have heard of Pika before and I like their vision. It brings me back to the old days before all of the "necessary" tooling.
I think it makes sense from a viewpoint of web components being reusable things and not part of a larger library or ecosystem. I think for me it is deciding really how I want to use them since they are basic building blocks. I could write LitElement components and create a basic router (or pull in an existing library) but there may not be a roadmap to follow and some hurdles to jump over. Or I could use a library I like such as Vue and pull in web components, I'm sure there is some documentation out there but there also may be some things to figure out. Those components are then freed from any one library and can be used in my next Vue app, React app, or [next big library] app, which seems like a good deal.
I think this is sort of the vision, although I don't want to speak for those frameworks (I suspect they're generally on the no-WC-bandwagon). But again, it doesn't matter, because now you've just created a better HTML element that slots in nicely—it's no difference from a complex built-in.
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.
I love the idea of using built-in components that can be used anywhere but when trying to dive deeper into web components I found there to be a bit of friction in using it to create an app.
There seemed to be a number of different ways to approach using web components:
I want to like web components, but there are some things holding me back. I stopped pursuing them for now because it seemed like using a framework such as Vue was easier to be productive with and a better choice for me.
I'm open to any opposing viewpoints. Any suggestions for someone like me?
I invite you to try Atomico, it's simpler than the exposed libraries,eg:
.
Atomico 3kB is based on virtual-dom, HoCs and hooks.
It has a small router and deferred charges(dinamic import), eg:
I hope I have covered the essentials. start simple
npm init @atomico
We love Web Components, not custom apis. ;-)
github.com/w3c/webcomponents
No thanks, WC api is unfriendly and complex, current class-based implementations generate too much repetitive code and tie tightly to
this
.instead, with my proposal you can better separate the logic from the view and avoid things like this.
microsoft code.
The right is part of the code that shows how inelegant it can be to solve a state problem using classes.
Indifferent to eg, if I believe that sometimes you need solutions like Atomico if your WC is simple
PWA Starter Kit does have multiple templates so you can choose versions with less stuff included by default.
WCs are just another platform primitive. I don't think they're intended to be part of something called "Create Lit App". I appreciate that this might be what you want. For all of the criticism of say, the thousands of dependencies needed by Create React App, I appreciate that it's an easy way to start.
If anything, WCs lend themselves to the idea of modern ES6 bundling. I'm not necessarily endorsing the Pika package manager, but it has an interesting writeup on its vision. This is effectively the "no-build" system- you just
import './element-name.js
, and use<element-name>
inside your code.That
<element-name>
you've created can now be used inside any modern "create foo" or "starter kit". It's just important to remember that WCs aren't really targeting that high level on their own.I hope that helps.
Good point on the dependencies, I was definitely shocked when I npm installed lit-element and saw one folder in node_modules. There is definitely a lot of developer convenience in those types of up-and-running tools, but there is a cost passed on to the user. I have heard of Pika before and I like their vision. It brings me back to the old days before all of the "necessary" tooling.
I think it makes sense from a viewpoint of web components being reusable things and not part of a larger library or ecosystem. I think for me it is deciding really how I want to use them since they are basic building blocks. I could write LitElement components and create a basic router (or pull in an existing library) but there may not be a roadmap to follow and some hurdles to jump over. Or I could use a library I like such as Vue and pull in web components, I'm sure there is some documentation out there but there also may be some things to figure out. Those components are then freed from any one library and can be used in my next Vue app, React app, or [next big library] app, which seems like a good deal.
I think this is sort of the vision, although I don't want to speak for those frameworks (I suspect they're generally on the no-WC-bandwagon). But again, it doesn't matter, because now you've just created a better HTML element that slots in nicely—it's no difference from a complex built-in.