Web Components: Our Journey from Lit to Stencil and Back Again

Frontend technology is an ever-moving target and it can be dizzying to track even a fraction of the tools and methods at our disposal in 2022. It has been some time since we’ve taken a deep dive into the innovative work we’ve been doing with our frontend tools and tactics.

I’m here to answer the following questions:

• What have we been working on at Phase2?
• What new tools have we been testing?
• What conclusions have we made?
• What is coming next?

Back in the Day

If you’ve followed Phase2 in recent years, you no doubt remember one of our favorite tools, Particle. Particle was a PatternLab with Twig based starter-kit, created in-house that we used on a large number of Drupal initiatives over the years.

Particle with Twig offered us the ability to write “component” templates directly in Twig, and have them viewable in PatternLab, creating our first set of design system standards. The real kicker was that the tooling and methodology only allowed us to reuse those components in Twig based systems like Drupal. This was the first change that allowed our frontend and backend developers to work in parallel, followed up by a final, usually quick implementation (or theming) task.

Particle evolved much over the years as we learned lessons from client implementations, as new and updated tools became available, and through contributions of the open source community. However, it left us in a position where we were unable to quickly shift those design implementation techniques to other platforms.

The Here and Now

As the years have rolled on, and tools continued to evolve, two very important factors played a role in how we now build design systems with platform agnostic Web Components.

Evolving Client Requirements

As has been standard across the industry, many clients have become more involved and at minimum, interested in newer technologies, being able to pivot from one platform to another, or even host their presence across multiple sites and/or platforms. Examples include clients with a flagship Drupal site, but that desire to spin up a handful of small React or Gatsby applications for special events or promotions. These new consumer applications needed to be able to utilize the same underlying components and code as their primary Drupal platform.

Our clients invest heavily in their brands. We needed to be able to provide them with a design system that could meet their goals of visual standardization and brand governance across a multitude of properties.

Maturation of Web Component Standards

Starting in 2016, the release of the V1 of the Custom Elements spec became official and was adopted by most modern browsers. Over the next several years, both the Polymer/Lit teams, and Stencil played a large role in the evolution and adoption of Web Components. By the end of 2019, Web Components were ready for prime time and widely adopted.

Lit v1: Our Origin Story

Early in 2020, our marketing and product teams were deep into the planning effort for the newly designed and newly architected Phase2 website. Our current  website (the one you are reading this on now), gave us a great opportunity during our development phase: implementing Web Components on a Drupal 9 website.

Our first attempt with Lit was essentially taking what was Particle, and ripping out most of what made it Particle, replacing it with new build processes, and at last, replacing PatternLab with Storybook. The Phase2 site rebuild was supported by a talented group of developers, on both the frontend and backend sides. This capable team ensured we could overcome any hurdles we encountered as we were also navigating a mid-development upgrade to Drupal 9 from our initial development of the project on Drupal 8.

Web Components proved to be a large success, and well-received by all developers involved. Though undoubtedly coming with a learning curve based on our former practices, this methodology was one we immediately began to adopt. By the time we were halfway through the Phase2 site, we were discussing these new techniques with potential and existing clients, and we scheduled our first client Drupal project to include a web component design system based on all we’d learned over the past 6 months.

Stencil: An Important Step in the Process

Approaching a new project, ensuring we would deliver the best in class system to this new client, we did an investigation into Stencil and what it had to offer vs. what we’d just accomplished with Lit. It was actually a fairly quick decision at the time to switch to Stencil. At that time, we were enticed by the ability to incorporate TypeScript into the components, as well as the ability Stencil provided for tree shaking components, and only loading the components required to build a specific page.

TypeScript, which we had used on several other non-Particle projects, quickly gave us the assurance of writing the best code possible with strict typing. The inner workings of Stencil’s lazy loading allowed us to provide more performant JavaScript bundles to our consumer. Both of these proved to be big wins, and we used Stencil for a total of three client projects with great success. However, there was still another major shift to come.

Lit v2: Our Foundation for the Future

Stencil was re-evaluated quickly due to stalled development from their team and a lack of extensive community support. The Stencil team has since made great efforts to bring on talent tasked with helping Stencil level up and get back in line with Lit2. However, this was a little too late for the needs that presented themselves.

While we had made leaps forward with platform agnostic Web Components, we required more flexibility from our systems to allow us to begin curating reusable components into a platform that can help us rapidly bootstrap our design systems and rapidly onboard our frontend development teams. It has been a goal for years to build a system capable of versioned components, shared and extended throughout many, if not all of our projects.

When Lit2 was released, a handful of our component developers discussed at great lengths the benefits and drawbacks to moving our tooling back to Lit. After creating the initial Web Component starter-kit, based on Stencil, moving back to Lit2, even with a very small initial component set, this move was not taken lightly. It turned out to be that after our discussions, the effort to switch to Lit2 would provide us with a few very important benefits or features:

• Lit2 introduced TypeScript support, which was absent in Lit1.
• Lit2 offered class extension to allow us a much clearer path to creating a “stable” set of base components that can be easily extended in our client projects to alter style and/or functionality.
• The community support behind Google and the Lit team seemed to have much more steam behind it and overall adoption than Ionic and the Stencil team.

Conclusions

It goes without saying that we have learned a lot about using Web Components over the past two years in a variety of scenarios. Here are a few key conclusions that have led us to the implementation of Outline and our current technology stack. 

• Design systems have proven to deliver value to our clients time after time.
• Design systems improve the developer experience. 
• Design systems allow frontend and backend developers to work in parallel. 
• Web Components have proven incredibly successful in many of our projects.
• Lit2 is the best tool for helping scaffold and define Web Components. 
  • Class Inheritance
  • Reactive Properties
  • Reactive Controllers
  • Extensive community support and adoption
• TypeScript should be adopted everywhere.

What’s Coming Next

With all of this background on how and where we’ve landed  with regard to Web Components and frontend tech, what could possibly be in store next?

• A more official announcement about/introduction to our new flagship and successor to Particle, Outline
• Individually versioned components, allowing for projects to selectively update
• Tree-shaking, lazy loading Lit components
• Extensive documentation and standardization of our core component set
• Attracting community involvement and support
• More posts like this from me and the rest of our talented frontend developers to keep you up-to-date with our tools, methods, and the general state of frontend at Phase2

I hope you enjoyed reading the Phase2 blog! Please subscribe below for regular updates and industry insights.