Lorem ipsum dolor sit amet, consectetur adipiscing elit lobortis arcu enim urna adipiscing praesent velit viverra sit semper lorem eu cursus vel hendrerit elementum morbi curabitur etiam nibh justo, lorem aliquet donec sed sit mi dignissim at ante massa mattis.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere praesent tristique magna sit amet purus gravida quis blandit turpis.
At risus viverra adipiscing at in tellus integer feugiat nisl pretium fusce id velit ut tortor sagittis orci a scelerisque purus semper eget at lectus urna duis convallis. porta nibh venenatis cras sed felis eget neque laoreet suspendisse interdum consectetur libero id faucibus nisl donec pretium vulputate sapien nec sagittis aliquam nunc lobortis mattis aliquam faucibus purus in.
Nisi quis eleifend quam adipiscing vitae aliquet bibendum enim facilisis gravida neque. Velit euismod in pellentesque massa placerat volutpat lacus laoreet non curabitur gravida odio aenean sed adipiscing diam donec adipiscing tristique risus. amet est placerat.
“Nisi quis eleifend quam adipiscing vitae aliquet bibendum enim facilisis gravida neque velit euismod in pellentesque massa placerat.”
Eget lorem dolor sed viverra ipsum nunc aliquet bibendum felis donec et odio pellentesque diam volutpat commodo sed egestas aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod eu tincidunt tortor aliquam nulla facilisi aenean sed adipiscing diam donec adipiscing ut lectus arcu bibendum at varius vel pharetra nibh venenatis cras sed felis eget.
Our platform, Conductor, originated from a group of engineers using their skills and spare time to make the lives of their colleagues better. This has created a culture where we value technology as a means of solving problems and where we aren’t afraid to try new things if we believe it will provide the best experience for our customers or give us a technological advantage over competitors. A few years ago, we bet on an emerging browser technology called Web Components that has since gained more adoption and huge growth in browser and developer’s community support.
Since the advent of JavaScript, many new ways of building a web page have been created in the form of abstraction layers called frameworks. All these abstraction layers were created in an attempt to improve developers’ experience and increase performance. Web components are a set of web standards that aim to provide better browser capabilities to possibly replace the need for a framework and allow developers to create reusable encapsulated building blocks known as components. Those components then can be combined to build web pages and applications.
Web standards have a set of elements that we use to create our web pages. Those elements usually provide minimal functionality and it is up to developers to compose them to get something meaningful. Examples of these elements are: div, span, form, input, button, table, etc.
Custom elements allow us to declare a new element and define a custom behaviour for that element.
One important aspect of building components is that they should be able to provide functionality without depending or interfering with their surroundings, and Shadow DOM provides exactly that. It allows developers to encapsulate some styles and events within the element so the component becomes isolated from its context. Since the initial Shadow DOM specification, lots of improvements have been made around theming to allow consumers of these components to customize them.
Template elements can be used to create components’ markup efficiently. All the contents of a template tag are not rendered by the browser, but are available at run time to be used in new components.
This web standard defines how these components can be reused across different locations. It essentially defines a package that can be imported by other scripts that may need the component.
Back in early 2018 we started to develop our design system components and we had to choose a tool to build them. We considered many different popular options, such as React, Vue, and Angular. But over the years our team of experienced engineers have seen the rise and fall of many different frameworks and we were concerned about introducing another framework into our platform. We were also looking for the best developer experience with the smallest footprint possible.
Although all these frameworks provided good developer experience, good community support, and most of them were at their peak of popularity, they wouldn’t integrate easily with our current stack. That led us to look for a native solution that would be framework agnostic. Web components not only provided the seamless integration that we were looking for, but also gave us a major technological advantage in terms of performance and life span of this solution. Since then, many other big companies have adopted web components as their primary solution for developing components.
Developer experience was also fundamental in our decision, we wanted our developers to feel comfortable in learning and adapting to use this technology, and since then the feedback has been really positive in regards developing web components. Here is what one of our talented engineers has to say about his experience using web components:
“Transitioning to working with web components and LitElement specifically was fairly enjoyable, as they function a lot like other modern component-based frameworks but without the hurdles of learning many library-specific quirks (e.g. being forced into doing things “the angular way” or having to relearn a fundamentally new concept like React Hooks after years of working with lifecycle methods). I also find it satisfying to work with vanilla JS and to not rely too much on library methods, and working with web components you get a bit of both.”
Josh Coles, Frontend Engineer
Our initial development of web components began with vanilla javascript, we managed and maintained a lot of boilerplate code and developed a basic rendering engine. We discovered a library called LitElement which improved many of the features that we were maintaining ourselves, so we decided to start building new components using this library. That decision boosted the development of new components not only as part of our design system, but also in other parts of our application.
After over 2 years of working with web components, we are confident that it was the right decision for our business needs and we continue to refactor older parts of our code base with web components. In some pages where we were able to completely refactor using web components, we saw performance gains of up to 90% in initial load/render times.
