Stencil is really focused on building design systems and reusable component sets, like the kind we needed for Ionic Framework.
We at Wix are a huge React shop. We know all the best and worst of React, both OO and Functional styles.
For us, while Stencil is super interesting and is better compared to React, we will not move to Stencil.
Had we started now, it would have been a hard choice React or Stencil
I think the main message here is that
If the context of the article is a comparison of which to "start with", what was the purpose of using outdated syntax (var, class components) instead of current best practices for the React example?
Does React really? I haven't used `.bind` in years, even before moving to mostly hooks-based components.
In this React doc [1] it describes .bind as being for ES2015, and recommends arrow functions for ES6, except if it causes optimization issues.
"Jest can only mock the structure of objects that are present at require time. It does it by reflection (not by analysis), which means that properties that get added by the constructor cannot be mocked. It's important to understand though that a fat-arrow assignment in a class in JS is not a class method; it's a class property holding a reference to a function.
My suggestion to that would be that you change the fat arrow assignments to standard methods and bind them in the constructor. That way they will be Jest aware. Otherwise I'm afraid there's not much we can do here."
I might be thinking too narrowly here but if you're needing to mock a component class method in the first place, it might be good to do it explicitly anyway.
How is that a fair comparison?
Also "let main, footer" vs "var footer; var main;" doesn't make it look good for either side.
And in the end being better than React isn't that hard. There have been plenty of frameworks that had better performance and/or better DX, without even getting into holy-war differences (e.g. JSX vs. templates). But you hardly work with a view library alone, and so you have to consider the infrastructure and the developer pool (which shouldn't matter for technical reasons, but matters for CV reasons).
If you believe it is obsolete, please do a Todo mvc React example with functional components and I commit to try and use stencil functional component syntax to create a valid comparison.
I don’t think those are a great example. Class based components are still very much used in 2020.
1. a lot of companies use it - we as well and not planning to move anywhere.
2. if you know React, moving to Stencil is super simple.
Given a Todo mvc functional component example, will try to use the stencil functional component syntax to build an equivalent
What relevance is this though? There's always going to be legacy code somewhere, but you made the comparison article in 2020, not years ago.
There's new established patterns, quoting out of date examples thus provides little value to your reader. Also your other comment suggests your intention was guidance on greenfield projects, in which case 4 years old syntax makes 0 sense.
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.
My favourite thing about this approach is that the end result is even half-readable, so with some practice it's possible to understand what's going on in your stack trace.
Consolidating that not only helps the design team have a proper standard to design against, it helps the developers who no longer have to figure out what components to use. It simplifies it all around.
https://en.wikipedia.org/wiki/Betteridge%27s_law_of_headline...
As a dev, I think Stencil'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.
That's pretty nice for a team that'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.
lol wtf "dehydration" haha (also "Rolloup")
Still don'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..?
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.
One nitpick for the OP: the side-by-side code examples are screenshots without syntax highlighting. For an article comparing two frontend frameworks, that's quite an oversight.
13 years ago...
Is Mootools a better jQuery?
