We're in the process of rewriting our AngularJS Single Page Application (SPA) and while we could go for any major framework, I'm particularly interested in the advantages and disadvantages of using web components along with a library like Lit-Element for the entire app. I understand that web components can be created using various frameworks, but we're considering a pure web component approach instead of leveraging those frameworks.
I want to clarify that we're looking for a library with built-in reactivity and rendering capabilities; we don't want to just rely on VanillaJS for the scale of our application. So, what are the pros and cons of choosing web components and a web component library like Lit-Element?
4 Answers
While web components provide great framework independence and a low-overhead approach, for an SPA that needs to be maintainable and scalable, using frameworks like Lit-Element might be more beneficial. The recent enhancements in state management and their ability to perform well in component sharing scenarios are great additions. However, if SSR (Server-Side Rendering) is key for your app, keep in mind that Lit's SSR support is still maturing.
One big thing to keep in mind is that while frameworks like Lit make it easier to work with web components, there are still notable trade-offs. Web components handle data differently than standard frameworks. You have to manage both attributes and properties, and that can get messy pretty quick. Plus, lifecycle management is more complicated; components assume they may need to handle being detached and reattached, which adds extra steps for you as a developer. In short, they can be really handy for certain tasks, but they come with a lot of upkeep and complexity that might weigh you down, especially with a larger app.
Exactly! It seems like a lot of the complexity could be avoided with a dedicated framework that handles those aspects for you.
Your choice should depend heavily on the scale and expected usage of the application. With larger applications, the learning curve may lean towards those familiar with frameworks like Angular or React, which are trying to solve state management and reactivity. Although web components offer some great features, they can also present challenges in maintaining a large codebase without a well-known framework that developers are already comfortable with.
It's true! We need something large scale that keeps everything organized, making it easier for new developers to jump on board.
Using Lit is a solid choice over raw web components, especially when it comes to ditching a lot of boilerplate code. Lit handles component registration, templates, and events smoothly, allowing you to focus more on the core logic. However, for beginners, experiencing raw web components without any libraries can provide deep insights into how things operate under the hood. If you're going for scalability, Lit might be necessary as building a huge app without a framework can get tricky.
Absolutely! But be wary—since YouTube uses web components, that makes you wonder about performance issues like lag.
That’s a valid point! Knowing Lit's limitations upfront can save us a lot of headaches later.