Another front-end supernova project?

Hello, I’m fish skin.

When I was on GitHub today, I saw an item on the trending list that had gained over 1,000 stars in just one day.

This is a project called Solid:

It is very rare to see thousands of stars increasing every day. I can’t help but wonder, click to see what is so awesome about this project.

What is Solid?

This is a foreign front-end project, which has harvested 8400 stars up to the date of publication.

I always felt that this project looked familiar to me, as if I had seen it before, so I went to Star History to search the Star growth History of this project. Good guy, these days the growth curve is almost close to vertical, has been growing for several days nearly a thousand!

Seeing this curve reminded me that Solid is a JavaScript framework and that I had seen it before in a JavaScript framework performance test.

The React, Vue, Angular framework and the new Svelte framework have a lot of potential (nearly 5W star). It’s hard for other frameworks to split the cake. So Solid in the end what ability, can let him a few days of star number skyrocketing?

describe

Solid is a declarative JavaScript library for building user interfaces that is efficient and flexible.

Go down to the official website, Solid has many features, such as compressed code volume is only 6 KB; It also naturally supports TypeScript and JSX (JavaScript XML), which is often written in the React framework.

Take a look at the sample code from the official website:

So, is his grammar similar to React?

performance

However, that doesn’t help the Solid framework stand out. What really makes it great is how fast it is.

How fast? First enough!

Some classmates said, you don’t open your eyes to lie, don’t you? Solid was number two, and Number one was Vanilla okay!

Haha, but Vanilla was, in fact, pure native JavaScript without any framework, often used as a benchmark for performance comparisons.

So how did Solid get there so fast? Even beyond our divine Vue and React.

This is because Solid does not take the Virtual DOM found in other mainstream front-end frameworks, but instead is statically compiled directly into real native DOM nodes, with updates controlled to a fine-grained local scope. This makes the Runtime lighter and smaller and eliminates the extra cost of so-called dirty checks and summary loops, making the performance almost the same as native JavaScript. In other words, the compiled Solid is JavaScript!

Solid works in much the same way as the new Svelte framework, compiling into native DOM, but why is it faster?

To find out, I searched for Solid. Js on Baidu, but found that there were hardly any Solid. Js related content in China. Later, I searched Google and found the answer, but the answer came from some great god, Isar…

To see why Solid is faster than Svelte, look at how the same piece of code is compiled by them.

God is very thoughtful to give an example, such as this code:

<div>{aaa}</div>
Copy the code

Svelte compiled code:

let a1, a2
a1 = document.creatElement('div')
a2 = docment.createTextNode(' ')
a2.nodeValue = ctx[0] // aaa
a1.appendChild(a2)
Copy the code

Solid compiled code:

let a1, a2
let fragment = document.createElement('template')
fragment.innerHTML = `<div>aaa</div>`
a1 = fragment.firstChild
a2 = a1.fristChild
a2.nodeValue = data.aaa
Copy the code

As you can see, Solid is playing a little trick when creating the DOM node, using innerHTML instead of createElement to further improve performance.

Of course, getting rid of the Virtual DOM doesn’t mean it’s a “silver bullet.” After all, everyone wrote native JavaScript before the various frameworks came out a decade ago. Light Runtime also has its drawbacks, which I won’t go into here.

In addition to being fast, Solid has a few other features, such as a compact syntax and WebComponent-friendly (customizable elements).

In general, I am very optimistic about this technology, and maybe we can shake up the big three together with Svelte in the future and give people more choices. This is also the fun part of technology selection. There is no absolute best technology, only the most suitable technology.

Can not help but sigh: alas, the development of technology is too fast, a lifetime to learn! (But front-end beginners don’t need to worry about that much, just learn the basics + Vue/React)

Finally, I will send you some learning resources to help me get the offer from dafang, up to 6 T!

Ran away, leaving behind 6T of resources!

How I got the offer from Tencent, Byte and other big factories through self-study, you can read this article, no longer confused!

I study computer for four years, mutual encouragement!

I am a fish skin, praise or request, I wish everyone can be happy, make a fortune, good luck.