Web Components are reusable blocks of content that we can build without external tools, using only web technologies (what browsers offer, with no third-party libraries/frameworks). The resulting components are usually better supported, more compatible and more sustainable in the long run.
We’re always in the pursuit of coding that allows us to deliver what our clients need and add value to their proposals, without unnecessary hassle that ultimately slows down the delivery process.
When it comes to Web and Web App development, one of the ways we’ve found to achieve this goal is through the use of Web Components. In a nutshell, Web Components are reusable blocks of content that we can build without external tools, using only web technologies (what browsers offer, with no third-party libraries/frameworks). The resulting components are usually better supported, more compatible and more sustainable in the long run.
Web components are a set of standard API specifications that enable developers to create components that are both custom and reusable, and that are natively supported by any web browser no matter what the framework selected to build the application. These elements have their own UI and behaviors. To create them, we employ plain -“vanilla”- JavaScript, HTML and CSS: This means less dependency on external code which facilitates integration with any web technology.
The main tools in Web Component creation are HTML, CSS and JavaScript. They allow for the definition of new, custom HTML tags. The tech industry mainly uses these 4 APIs as Web Component standards:
- Custom Elements: sets new guidelines for the creation of a new tag.
- Shadow DOM: defines how to use styles and markup in an encapsulated way.
- HTML Templates: paves the way for the utilization of fragments of HTML code to renderize UI.
- ES Modules: allows for the import and reutilization of external JavaScript files.
Custom Elements are especially useful since they allow for the extension of components that other developers have authored: essentially, they are the key to continuity and expansion. Another advantage of Custom Elements is its ability to modernize HTML and conjugate structure with behavior.
In recent years, many libraries have tried to become a bumper between those APIs and some common issues they have encountered, such as lack of browser compatibility on some features.
In 2017, the Ionic Framework team released Stencil.js, a web component compiler that uses a high-level abstraction to define UI components and to generate JavaScript code that implements standard-based Web Components. The compiled code runs in all major browsers, which has proven to be a significant advantage. It’s simple to use and delivers high-quality component libraries, design systems and applications. Stencil.js also delivers additional capabilities such as predendering and objects-as-properties as opposed to just strings.
In summary, Stencil.js is a powerful compiler that accelerates the creation of components in an easy-to-use setting that generates cleaner and shorter code, which can then be shared and analyzed. This makes it an excellent tool for building quality applications at speed, guaranteeing browser compatibility.
Contact us and discover how to make your development processes more efficient! Reach out to us here.