.jpg)
In the world of modern web design three giants reign supreme - React, Angular, and Vue. When building a new web application from scratch this is one of the first questions you are presented with, to which front-end camp will you pledge your allegiance? It’s a highly contentious question to which you’ll find any number of passionate pleas for why Vue is the “One True Way”, or why you’re behind the times if you’re not server-side rendering with Next.js.
This is all well and good when you’re building a standalone app but what happens when you’re building a component meant for developers to integrate into their own applications. How do you go about choosing a side? How do you decide what frameworks and tools are worth supporting? Where do you spend your precious engineering resources? It’s a complicated question that historically hasn’t had a great answer, but that is where web components come in.
The term “web components” refers to a group of standards aimed at allowing the creation of reusable fully-encapsulated UI elements. The web component standards were designed with the idea of creating an open standardized way of defining custom elements on the web that can be used as easily as any other native HTML element - in fact web components themselves are extensions on the base HTMLElement class with which web developers are already well acquainted.
There are three main standards that comprise the core functionality of web components - the shadowDOM, HTML templates, and custom elements.
A core aspect of web components is allowing the bundling of HTML tags in a reusable way. Each web component can be built with <template> tags that allow reusable slices of HTML to be defined. This is very similar to how most front-end frameworks support a component architecture through JSW or their own template syntax.
Being able to define these slices of user interfaces in web component templates allow a framework agnostic approach to implementing reusable components. This enables UI complexity to emerge through composition of smaller components that are each responsible for an isolated segment of user interaction that can be more easily and thoroughly developed.
When discussing web components, the shadowDOM is frequently the point of conversation. The shadowDOM is the core specification through which encapsulation is implemented in web components. A shadowDOM is a hidden subtree of HTML that can be attached to elements present in the regular DOM tree. Typically a web component contains a root element to which the shadowDOM is bound:
This allows the entire implementation of the web component to be fully encapsulated from the rest of the application. The web component’s style, structure, and behavior and full isolated from the rest of the web page ensuring that the internal design of the web component does not clash with the client application and code is kept readable and clean.
Of particular important the shadowDOM provides style encapsulation so that styles defined by the client app are not applied to the contents of the shadowDOM and similarly styles defined in the shadowDOM are not applied to the contents of the larger client app. This feature is critical in enabling the development of a reusable web component that will render the same across any number of client applications and frameworks.
An essential component to the larger web component spec is the ability to define custom elements that can be used alongside native HTML elements. The custom elements API allows the ability to define new tags that contain all the javascript, styling, and HTML needed for your web component to operate.
When a web component is imported into a web page it is first registered with the custom element registry that enables that web page to understand and render the web component associated with it. Once this is done, displaying a web component on a page can be as easy as using a single tag:
One of Passage’s core offerings is a set of UI components that handle a fully-integrated biometric authentication flow. A key aspect of this was making sure that the UI components could be used in any environment and with any framework of your choosing - whether it be React, Angular, Vue, Ember, Next, Nuxt, Django, Flask, vanilla JS. This presents both an interesting engineering challenge as well as a business challenge, particularly at a company’s startup stage where resources are at their most limited.
Many UI libraries build out individual support for frameworks which can be an extremely resource-intensive engineering task. This engineer work also has a long-term resource commitment for continually supporting and updating each library to support the latest and greatest of all these frameworks. Even then, you’re ultimately limiting your audience to users of the set of individual technologies that your business deems worth supporting.
If you haven’t guessed it by now, Passage views web components as the ideal answer to this challenge. By building our authentication elements as a set of web components, broad support for any number of web technologies is possible with a single unified codebase and a consistent user-experience across the board.
The web components standard offers a single standard implementation that all major web technologies can implement. While they are still a relatively new technology, web components have been around long enough that most major frameworks have excellent support for web components (check out https://custom-elements-everywhere.com/). Browser support for web components is also robust having been supported for the last few years in all the major browsers, including the all important mobile space.
Building UI elements this way provides benefits beyond just engineering efficiency. The Passage elements are able to take advantage of features like the shadowDOM to ensure consistent styling across a wide variety of client apps without clashing with existing styling infrastructure. Beyond that they’re able to support a streamlined and controlled way for client apps to apply custom styles and themes to the elements through CSS variables and CSS shadow part customization.
Passage is not alone in making a major investment in web components as the future of framework-agnostic UI component development and distribution. Github, Mozilla, Google, Microsoft, and many others have all made big strides in developing production-ready frameworks based on web components.
Web components represent a piece of an exciting future for front-end development where open standards enable the development of browser-native, cross-framework, reusable UI libraries. As web apps become more powerful and more common place across a variety of applications this is just the beginning of an exciting new time for web development. Passage has embraced web components to bring biometric authentication to the web with an unprecedented level of ease for developers. With Passage you can use any front-end framework of your choice and have cutting-edge authentication in just two lines of code.