{"id":3693,"date":"2021-06-07T14:43:14","date_gmt":"2021-06-07T14:43:14","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3693"},"modified":"2023-04-24T14:17:27","modified_gmt":"2023-04-24T18:17:27","slug":"announcing-stencil-enterprise","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-stencil-enterprise","title":{"rendered":"Announcing Stencil Enterprise"},"content":{"rendered":"

Today I\u2019m excited to announce the availability of Stencil Enterprise<\/a>, Ionic\u2019s official toolchain for building blazing fast web components. Designed exclusively for teams building enterprise-scale Design Systems<\/a>, it includes access to world-class Support and Advisory teams, priority fixes and issue resolution, and more.<\/p>\n

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.<\/p>\n

Check out this live walkthrough<\/a> of how to build successful design systems with Stencil.<\/p><\/blockquote>\n

<\/p>\n

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\u2019s no surprise they are choosing Stencil. Stencil is downloaded half a million times a month<\/a> 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<\/a>.<\/p>\n

Offering support and advisory is just the beginning of our new Stencil Enterprise offering. As the Product Manager for Stencil and Ionic Framework, I\u2019m 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.<\/p>\n

In the meantime, let\u2019s dive into our new Enterprise offering, beginning with a look at the companies using Stencil to power their businesses.<\/p>\n

Who\u2019s Building with Stencil?<\/h2>\n

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.<\/p>\n

Many large enterprises are also using Stencil, including Amazon, Adidas, Panera, and more. Here\u2019s what Marcel Bertram, Design Systems Lead at Porsche, has to say:<\/p>\n

“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.”<\/p><\/blockquote>\n

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\u2019t have a prescribed set of frontend technologies in use.<\/p>\n

Let\u2019s explore the challenges that businesses face when building apps and websites at scale, and how Stencil can help achieve consistency across an entire organization.<\/p>\n

Design System Challenges<\/h2>\n

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\u2019s already available, it feels simpler and faster to just build something new for each new project.<\/p>\n

In recent years, companies have tackled this by creating Design Systems<\/a> \u2014 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.<\/p>\n

In Ionic\u2019s 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<\/a>, Ionic\u2019s official toolchain for building reusable, scalable Design Systems.<\/p>\n

Why Stencil?<\/h2>\n

Developers and designers use Stencil to create small, blazing-fast, and 100% standards-based Web Components that run in every browser. Web Components<\/a> 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.<\/p>\n

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.<\/p>\n

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\u2019s where Stencil comes in, providing key capabilities on top of Web Components. Stencil generates standards-based Web Components with these features baked in:<\/p>\n