Technology in the web is forever changing and shifting, in different directions at random paces. So becoming too attached to one framework/library/stack is very dangerous. Think for a second, how often do see job/career opportunities for MooTools loyalist? Exactly, most of you reading this probably have no idea what this JS framework even is! So for the unfortunate group that tied their career to this framework wholeheartedly, it was difficult to transition and possibly ended them once the industry moved on.
As an option to not be too worried about this, Web Components are a great choice. They’re independent, works well with other frameworks, and can stand alone very well. However, there are some things to know when building that’ll make you’ll life much easier.
Start With A Framework
Building web components from scratch is hard! There is a lot that goes into building a fully functioning and stable suite of web components. To the point where it really tests your skills as a developer and your understanding of the lifecycle of JS. So using a framework like Stencil or Slim is your best bet. They are both lightweight and do a good job of getting you a solid starting point for what you need.
Build With Intention
Working with web components with the intent for scalability brings a different approach than most are used to. Many developers have an idea of what building “dumb” components mean, but most don’t understand it. This is why building with intent is important. The components you build here aren’t meant to contain logic, manage state, or rely on another component/util to function. Keep it straight to the point, simple, and solving a clear need.
No Dependencies
Keeping it short and sweet, your components should not have any connections outside of the component itself. Having any outside dependency(library, util, another component, etc.) will add a layer of complexity and make your component’s functionality depends on the stability of said outside resource. This is never a good idea when building something for the future, and easy integration with frameworks/libraries.
Understand One Way Data
Having a full handle on how data is transferred from component to component is critical to ensure a healthy application. This is key to remove unneeded, and redundant, life cycle events that can cause flickers or Maximum call stack errors. One way data binding is the core of what you want to do with your web components, however, it doesn’t stop the possibility of the issue popping up in the console if done wrong. So taking the time to make sure your data is only doing what it needs to do when values actually change is key.