Stencil 101: Introduction to a Web Components library like no other

A presentation at Codemotion Online 2020 by Horacio Gonzalez

What’s Stencil? Yet another Web Components library? But why Web Components? Why do I need another thing that React/Vue/Angular/NewShinyFramework? And even if I needed Web Components, why Stencil? 😠

Every time I introduce somebody to Stencil I get the same initial reaction.

Then I begin to tell the story of Stencil, and Ionic, and why Web Components make sense in this case, as in many others. Usually, it’s enough to get people interested because most developers have endured the kind of problems that made the Ionic team create Stencil.

I continue by explaining how Stencil is different from other Web Components libraries, how it’s a compiler to generate Web Components (more specifically, Custom Elements), how does it includes wonderful features like Virtual DOM, Async rendering, Reactive data-binding or JSX, and bakes them in fully standard Custom Elements that you can use in your React/Vue/Angular/NewShinyFramework apps but also on plain old HTML pages. And, of course, how the developer experience is one of the smoothest I have found these last years.

By then most people are really excited about Stencil. To be fair, it isn’t my speaker qualities that get them so pumped up (I would love to have such power!) but the quality of the product, as Stencil is one of the best-known secrets of today web development.

So if you want to discover it, come to the talk 😉. I sincerely think in the end you will also say I ❤️ Stencil.