Design Systems & Component Libraries with Stencil
As organizations scale and build out their consumer-facing, business-facing, and enterprise-facing applications, it's easy to deviate from branding and create a disjointed experience for users. To solve for scale, organizations build their own design systems taking into account numerous items including brand identity, core principles, and accessibility best practices in order to build up and implement their own functional component libraries.
What's a Design System?#
A Design System consists of UI components and a clearly defined visual style, released as both code implementationd and design artifacts. Components are reusable building blocks that can be used within an organization's design system. These building blocks meet a specific user interface (UI) need and can be woven together to create intuitive user experiences. Bundled together, component libraries can help keep an organization unified with their app presence. Moreover, it frees up developers from spending time rethinking how to build common app scenarios, such as application search or data table grids.
There’s a lot that goes into creating amazing UI components. Performance, accessibility, cross-platform capabilities, and user experience (not only of the UI component itself but how it fits into the entire design system) all must be considered. These aspects take real effort to do well.
Enter Stencil, a robust and highly extensible tool for building design systems.
What is Stencil?#
Stencil is a compiler for web components. It attempts to provide an easy to use, “works out of the box” experience by including all dependencies required to perform type checking, code transpilation, a VDOM runtime, file bundling, minification, etc. as a part of the core compiler. This offers users an experience wherein little to no configuration is required for them to begin building Stencil components; this comes at the cost of making it inaccessible to the end user.
Stencil’s out-the-box features will help you build your own library of universal UI components that will work across platforms, devices, and front-end frameworks.