June 7, 2021
  • Announcements
  • Stencil
  • Design Systems
  • stencil

Announcing Stencil Enterprise

Nick Hyatt


Today I’m excited to announce the availability of Stencil Enterprise, Ionic’s official toolchain for building blazing fast web components. Designed exclusively for teams building enterprise-scale Design Systems, it includes access to world-class Support and Advisory teams, priority fixes and issue resolution, and more.

Stencil Enterprise is ideal for large businesses with multiple web development teams, a portfolio of web-based applications to maintain, and a desire to standardize on a single UI library across all apps and projects.

Check out this live walkthrough of how to build successful design systems with Stencil.

Today, large businesses like Upwork, Volkswagen, Porsche, MasterCard, and more are building and deploying Stencil-based Web Components on both the web and in the app stores. With its ability to generate small, fast, and 100% standards-based Web Components that run in every browser, it’s no surprise they are choosing Stencil. Stencil is downloaded half a million times a month and powers popular consumer products like Apple Music, Apple TV, and Amazon Music (just to name a few). Here at Ionic, we use it to power our own UI library, Ionic Framework.

Offering support and advisory is just the beginning of our new Stencil Enterprise offering. As the Product Manager for Stencil and Ionic Framework, I’m thrilled to start working with the Ionic community and customers to find new ways to enhance these awesome tools. Stay tuned for updates on our plans to build Stencil into a robust Design System software platform.

In the meantime, let’s dive into our new Enterprise offering, beginning with a look at the companies using Stencil to power their businesses.

Who’s Building with Stencil?

Across all industries, companies are turning to Stencil to build apps and websites at scale. This includes Upwork, a publicly held company that helps match freelancers to jobs. Upwork recently shipped Web Components built with Stencil on their homepage. Public sector organizations are also getting on board, with the State of Michigan recently rolling out a design system based on Stencil.

Many large enterprises are also using Stencil, including Amazon, Adidas, Panera, and more. Here’s what Marcel Bertram, Design Systems Lead at Porsche, has to say:

“At Porsche, we have a heterogeneous ecosystem of products built with Angular, React, or without any framework. As a Design System team with a small number of developers, to give us the flexibility we needed and keep pace with our development roadmap, we wanted to standardize on one set of UI components that would work across any product. Building a custom Design System based on Web Components has enabled us to do that.”

Stencil is driving an increasingly large portion of our business at Ionic. Enterprise customers continue to get on board. Stencil and Web Components help solve their component distribution and creation challenges across properties and teams, many of which often don’t have a prescribed set of frontend technologies in use.

Let’s explore the challenges that businesses face when building apps and websites at scale, and how Stencil can help achieve consistency across an entire organization.

Design System Challenges

As the number of mobile apps and websites deployed increases over time, many companies encounter scaling challenges. With hundreds of developers and designers working across many distributed teams and concurrent projects, design standards are no longer enforced, leading to inconsistent branding and user experiences. And, with no easy mechanism to discover what’s already available, it feels simpler and faster to just build something new for each new project.

In recent years, companies have tackled this by creating Design Systems — centralized libraries of UI components that aim to create a unified user experience, brand, and workflows. By avoiding duplication of effort, teams are able to focus on what matters most: solving customer problems and delivering value. Why does this matter? Achieving holistic design consistency drives credibility and familiarity with customers, ultimately impacting revenue.

In Ionic’s experience working with hundreds of enterprise companies, Design Systems are successfully adopted internally when they have the following aspects: real-code components, access to component-building expertise, and a technology-agnostic approach that allows UI components to run with any web framework and be deployed across platforms and devices. To accomplish this, they use tools such as Stencil, Ionic’s official toolchain for building reusable, scalable Design Systems.

Why Stencil?

Developers and designers use Stencil to create small, blazing-fast, and 100% standards-based Web Components that run in every browser. Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Web Components, built using HTML, CSS, and JavaScript, are perfect for Design Systems because they can be styled and customized to match any design pattern you want to achieve. Since they are based on web technologies, your component library will work across all projects spanning mobile, desktop, and web. The best part? They are web framework agnostic, offering easy integration with popular options like Angular, Vue, and React. This allows teams to insulate themselves from tech churn, in effect making them future-proof.

Web Components have a lot to offer, but since they are low-level browser APIs, they have limitations, including lack of type support and input bindings. That’s where Stencil comes in, providing key capabilities on top of Web Components. Stencil generates standards-based Web Components with these features baked in:

  • First-class React, Angular, and Vue support so components feel native to each framework
  • Virtual DOM
  • Async rendering (inspired by React Fiber)
  • Reactive data-binding
  • TypeScript
  • JSX
  • Prerendering: Static Site Generation (SSG) and Server-side rendering (SSR)

Stencil was created by the Ionic team to make Ionic Framework’s fast, accessible, and powerful UI components work across all major frameworks. Today, Ionic Framework powers over 15% of apps in the app stores (not to mention thousands of internal apps), is beloved by over 5 million developers worldwide, and supports Angular, React, Vue, or plain JavaScript.

For teams looking to get the most out of their Stencil investment, there’s now Stencil Enterprise.

Why Stencil Enterprise?

Stencil Enterprise is the official enterprise version of Stencil, designed exclusively for teams building enterprise-scale Design Systems and universal component libraries.

This new offering includes:

  • Access to Ionic’s world-class Support and Advisory teams for help building Design Systems and shared UI libraries with Stencil Enterprise
  • Dedicated Customer Success Manager
  • Priority fixes and issue resolution related to Stencil OSS
  • Self-service Help Desk ticketing
  • Guaranteed response SLA

Ultimately, Stencil Enterprise’s goal is to help your projects succeed. To that end, the Ionic team has worked with many customers to bring their Design Systems to life, including Porsche, Mastercard, Esri, and the State of Michigan.

We’re also working on key features around Stencil to make it easier to use components across organizations, including interactive documentation, adoption analytics, and more.

Successful Design Systems Powered by Stencil Enterprise

Design Systems help companies deliver a consistent user experience by enforcing design standards across their apps. By implementing Design Systems with Stencil, teams save time, money, and can focus on what matters most: solving customer problems.

Stencil’s out-of-the-box features help you build your own library of universal UI components that will work across platforms, devices, and front-end frameworks. The Stencil team is excited to now offer comprehensive assistance and tooling for enterprises either embarking on their Design Systems journey or looking to get the most of their existing Stencil investment.

If this sounds like your team, please get in touch to learn more about Stencil Enterprise.

Nick Hyatt