At the beginning of the web, there was Hypertext Markup Language, HTML for short. HTML is still very much around: This blog entry you’re reading is made of HTML. However, some things have changed. One of them is that in the beginning, the web was mostly pages, whereas today, this site you’re visiting is running as a Single Page Application (as is quite typical these days). Secondly, a set of documentation known as the “web standards” has gone through a long evolution to be what it is today.
One of these web standards is called Web Components. From its introduction in 2011, the standard has been making its way to your browser, and in 2018 it is working in Chrome and Firefox (with a developer flag).
So, what can you do with Web Components? Mostly the same things we’ve been already doing with the numerous web application frameworks like Angular, Vue, and React. As this sounds less than exciting, let’s elaborate a bit.
Breaking up the page
Do you always end up needing the same button, the same search bar, the same app - but the contexts are on entirely different platforms, built with different technologies? Web Components can probably help you!
With frameworks and tools, we’ve been able to build complex applications on the web for some time. However, these frameworks have had to create their own notions of information hierarchy and architecture, because the web technologies (HTML, CSS, JavaScript) they have been built with still conceptually dealt with “pages” rather than “applications”.
Web Components aims to change this by bringing reusable components to the browser as a standard. The main technologies in achieving this are Custom Elements and Shadow DOM. Custom elements, as the name suggests, bring about the ability to create new HTML elements, with customized functionality. As HTML elements are the base building blocks of representation on the web, custom elements will allow for more use cases to be addressed, in a modular, elegant way.
Shadow DOM’s name references another base concept of the browser and web: the Document Object Model. In short, DOM is what you end up with when the browser parses your HTML, CSS, JavaScript. It contains the entire structure, styling, and logic of the page and can always be manipulated further with JavaScript code. This is at the core of how modern web applications function, regardless of tools and frameworks. With Shadow DOM, we get to have multiple Shadow DOMs nested within the main DOM. The main use case here is to have a separate layer of abstraction for your custom elements, which greatly reduces complexity and development effort on creating new web components.
Bringing the web together
Beyond creating web components from scratch, you can of course use whatever JavaScript technology you want inside the web component. Many frameworks and libraries already know how to create web components, so even as of now, you can have your Angular or Vue app act as a web component. This creates a nice mutual interaction layer for applications developed with different technologies.
To summarize: Web Components becoming a standard signifies the permanent transformation of the web from pages to components and applications. Being an emerging standard means that the technology will play nice with the things already built and introduce new possibilities to integrate across frameworks and stacks. It could very well be one of the best things to happen in your browser in a while.
-
Are you endlessly intrigued by emerging technologies? Want to explore and apply them to real-world business cases together with our team of like-minded developers? Check out our open positions and drop us a line.
Or perhaps you might want to know what Web Components could do for you? Email us at hello@frantic.com, and we're happy to help out!
