close
The Wayback Machine - https://web.archive.org/web/20210824233226/https://dev.to/132/2021-javascript-framework-2d0e

DEV Community

loading...

2021 JavaScript framework

Image Yisar
Chinese student, Creator of fre and other libraries.
・1 min read

2021 is very different from previous years. Many web frameworks have released their new versions. Let's discuss them.

Vdom-based

For example, React, Vue and Preact all belong to this category.

This is also the most mature framework. Their advantages are mature, stable and suitable for most scenarios.

With SSR and partial hydration, react 18's fizz renderer is very interesting.

In addition, such as concurrent mode, scheduling optimization has been discussed for many years.

Fre is a little soldier in this camp. It is the smallest but the fastest.

https://github.com/yisar/fre

Compilation instead of runtime

Svelte, solidjs belongs to this category.

I always think that the web does not need to be optimized to the extreme, but the code architecture needs to be pursued unilaterally.

So I prefer Svelte a bit. Compilation and runtime should not coexist, which will make the framework more messy and mediocre.

Solidjs and Vue3 do not do this well. They have compilation and want to runtime. They can't have both fish and bear's paw.

Html first

History is reversing,recently, some frameworks want to return to HTML, away from vdom and away from compilation.

Such as Qwikjs and Alpinejs. They are enhancing HTML, Sprinkling intead of Hydration.

This does fill a part of the cake, but the performance will be lost. For example, alpine has always ranked last in the benchmark.

Summary

I like all three ideas. How about you?

Using one of them is entirely determined by my work.

Discussion (5)

Collapse
lexlohr profile image
Alex Lohr

Compilation and runtime should not coexist, which will make the framework more messy and mediocre.

I'm not sure you ever had a look at the code resulting from Solid.js – it's anything but messy, rather what you'd write yourself if you would manipulate DOM nodes for a living.

Quite on the contrary, Solid's way of not re-running components all the time reduce the mess they make greatly

Collapse
132 profile image
Yisar Author

This has nothing to do with the generated code, but within the framework. If there are two sets of mental models, you need to pursue one of them

Collapse
lexlohr profile image
Alex Lohr

But there are not two mental models here, just one: purely reactive DOM handling. Your mental requirement to split that up probably stems from thinking in models like react.

If anything, Solid's use of JSX is much more straightforward than those of vDOM libraries: you write <div/> and get a HTMLDivElement instead of some abstraction. It's basically WYSIWYG, but for the DOM.

Thread Thread
132 profile image
Yisar Author

I'm just giving an example. Solid needs to compile and runtime reactivity at the same time. Users have to think from the perspective of "what is the generated code like".

Thread Thread
lexlohr profile image
Alex Lohr

But you have to basically do the same with any framework using JSX or any other DSL, regardless if it is fully compiled or only partially. The main difference is that instead of some obscure pragma call, you get understandable DOM operations that are even easily debugged (try that with react without using the react dev tools, just to give one example).