Is Stencil a Better React?

Stencil creators here. We love the title, but that is not our goal. We built Stencil for a very specific use case: building out a bunch of Web Components for our Ionic Framework project so they could run in any frontend stack. Stencil will generate React, Angular, and Vue bindings from a standard Web Component base, so developers in each of those frameworks get the native experience they expect, and any issues using Web Components (in React, for example) are smoothed out and fixed.<p>Stencil is really focused on building design systems and reusable component sets, like the kind we needed for Ionic Framework.

&gt; The third difference is event binding, where in Stencil they promote using arrow functions while React promotes explicit binding using the .bind() function.<p>Does React really? I haven&#x27;t used `.bind` in years, even before moving to mostly hooks-based components.<p>In this React doc [1] it describes .bind as being for ES2015, and recommends arrow functions for ES6, except if it causes optimization issues.<p>1. <a href="https:&#x2F;&#x2F;reactjs.org&#x2F;docs&#x2F;faq-functions.html" rel="nofollow">https:&#x2F;&#x2F;reactjs.org&#x2F;docs&#x2F;faq-functions.html</a>

In their side-by-side, they use syntax conventions from 4 years ago for React (class based components and even using var to declare variables) while using the latest syntax conventions for Stencil.<p>How is that a fair comparison?

This article highlights Stencil&#x27;s performance, which is great.<p>As a dev, I think Stencil&#x27;s superpower is that it can future proof your components. You can write a Stencil component and you can later use it in Angular or Vue or React or Elm or whatever. Or maybe even no framework at all -- just a templated server generated page with some Stencil components.<p>That&#x27;s pretty nice for a team that&#x27;s transitioning between one framework and another or uses two different frameworks on two different sites but would like to share components between the two.

If they&#x27;re going to compare the two, at least use the React functional hooks pattern. They&#x27;re comparing Stencil to the (basically) obsolete OO components pattern.

Stencil the framework - perhaps not.<p>But the idea of compiling to an (asymptotically) optimal vanilla JS application is a breath of fresh air in a world of Virtual DOM, Reactive Programming, Hooks etc.<p>My favourite thing about this approach is that the end result is even half-readable, so with some practice it&#x27;s possible to understand what&#x27;s going on in your stack trace.

Ah, c&#x27;mon, I just recently became an expert in React.

I&#x27;ve been using Stencil to create a share component library for different projects&#x2F;teams where I work. I&#x27;ve been pretty impressed. Soon our library will be used in React, Aurelia, and possibly Ember projects!

I&#x27;ve been keeping an eye on Solid for my next project. It seems small, fast and ergonomic.

Stencil is the best way to write Web Components if not a better React. If you like you can also write entire apps and Ionic library is perfect component library for it. It is fun to use and also uses TypeScript and it&#x27;s simple and easy to understand.

&quot;server-side rendering with client side dehydration&quot;<p>lol wtf &quot;dehydration&quot; haha (also &quot;Rolloup&quot;)<p>Still don&#x27;t really get what Stencil is. Is it a actual single framework or a standard syntax that compiles to React, vue, .. component syntax? This talks about compiling JSX to bindings avoiding vdom diffing but as far as I know that is near impossible to do due to the variable nature of JSX..?<p>And just a wall of unhighlighted fixed with code is very difficult to compare the differences. And would rather see bundle size comparisons rather than 6 lighthouse screenshots.

IMO TodoMVC is not a good way to compare front-end libraries&#x2F;frameworks because the necessary complexity is too low to demonstrate how issues that would happen in a larger code base would be solved.

I can&#x27;t wait to save the article&#x27;s screenshots of code blocks to my Pinterest account!

There&#x27;s a couple performance issues opened on the Stencil repo, as well as documented developer experience requests (e.g, Source Maps). With additional investment, I think Stencil has further potential to be an influential evolution in the front-end stack.

We ended up not using it because of it&#x27;s lack of ecosystem which is pretty ironic for an interoperable framework. E.g no documented mobx support, no competitive router.

It’s not solving enough problems or different enough for me to consider it seriously.

I tried Stencil a year ago and I didn&#x27;t see anything too novel to warrant further investigation.<p>One nitpick for the OP: the side-by-side code examples are screenshots without syntax highlighting. For an article comparing two frontend frameworks, that&#x27;s quite an oversight.

:\<p>13 years ago...<p>Is Mootools a better jQuery?

Any headline that ends in a question mark can be answered by the word &quot;no&quot;. -- Ian Betteridge

Yes, It enables creating web components, static site generation, server-side rendering with client side dehydration. It even has documentation generation for Stencil components.