38
46
+ 1
0

What is Stencil?

Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, part of the Web Component spec.
Stencil is a tool in the JavaScript Framework Components category of a tech stack.
Stencil is an open source tool with 8K GitHub stars and 509 GitHub forks. Here’s a link to Stencil's open source repository on GitHub

Who uses Stencil?

Companies
6 companies reportedly use Stencil in their tech stacks, including Alpha Health, Chilli, and LiveBuzz.

Developers
32 developers on StackShare have stated that they use Stencil.

Stencil Integrations

jQuery, Node.js, React, npm, and AngularJS are some of the popular tools that integrate with Stencil. Here's a list of all 9 tools that integrate with Stencil.
Pros of Stencil
Be the first to leave a pro
Public Decisions about Stencil

Here are some stack decisions, common use cases and reviews by companies and developers who chose Stencil in their tech stack.

Pierre Chapuis
Pierre Chapuis
at Pierre Chapuis · | 6 upvotes · 16K views

We chose Angular 2+ because our product has a rather complex back-office, most of which is visible only to our employees and contractors.

The "full featured" approach of Angular as well as the way it deals with the data model suited this business case well. We also use the Reactive Forms module a lot, as well as Clarity (an Open Source design system by VMWare) for the internal parts of the product. We also intend to use Angular's offline features.

For user-facing parts of the product we are now considering implementing views as Web Components with Stencil. We use Sass (SCSS syntax) for styling and TSLint to enforce a style guide close to Angular's default.

See more
Michael Solati
Michael Solati
Developer Advocate at Typeform · | 4 upvotes · 21.9K views
Shared insights
on
PolymerPolymerStencilStencil
at

As a #Frontend developer I'm used to using tools like #BootstrapCDN or some APIs/Library like #GoogleMaps to create or have styled elements with cool functionality. But this requires me remembering Bootstrap classes, or trying to get Google Maps to work in #Angular. 😢

And that's just framework agnostic solutions... If you look at framework specific libraries you end up dealing with the fact you are pigeon holed into using framework specific libraries!

Libraries like Polymer or Stencil for #WebComponents are definitely the way to go!

See more
Aaron Hans
Aaron Hans
Lead Front End Engineer at ZapLabs · | 1 upvotes · 5.6K views
Shared insights
on
StencilStencilLitLit
at

We are leveraging @WebComponents to build front end widgets that work across all our web properties easily even when there is no other commonality in the underlying frontend stack.

Being able to ship small, self contained UI elements has allowed us to strategically eliminate technical debt in small bites while shipping highly interactive, fast to render fully reusable components constantly.

We've built some components with Stencil and Lit but the majority are still vanilla @CustomElements with the styles namespaced by the custom element name to keep them contained.

We are really happy with our ability to make forward progress without requiring any big bang rewrites of our site's underlying frameworks and to share the latest component packages across the company.

See more

Stencil's Features

  • Web Component-based
  • Asynchronous rendering pipeline
  • TypeScript support
  • One-way Data Binding
  • Component prerendering
  • Simple component lazy-loading
  • JSX support
  • Dependency-free components

Stencil Alternatives & Comparisons

What are some alternatives to Stencil?
Svelte
If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.
React
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
Polymer
Polymer is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries. Polymer is based on a set of future technologies, including Shadow DOM, Custom Elements and Model Driven Views. Currently these technologies are implemented as polyfills or shims, but as browsers adopt these features natively, the platform code that drives Polymer evacipates, leaving only the value-adds.
React Router
React Router is a complete routing solution designed specifically for React.js. It painlessly synchronizes the components of your application with the URL, with first-class support for nesting, transitions, and server side rendering.
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
See all alternatives

Stencil's Followers
46 developers follow Stencil to keep up with related blogs and decisions.
porterwilcox
Galileo Figaro
Julia Katasonova
Lucas Mindêllo
David Maggi
Alilou Ali
Dennis Wiemer
Eric Otto
cwiseman1
Dmitry Sorokin