Whoa, whoa, whoa! I am 132 big brother! Today is an exciting day, nest nest, finally! Fre2 has been released!

Code name: Tianguan blessing

As shown, because we have code version, so! I also have!

In fact, thoughtful friends have also noticed that every article I sent in Zhihu has a very colorful top picture, today’s top picture is the lovely Prince of Heaven and his family’s blood rain detection. For this, I also specially wrote a word, although very ugly, but there is love duck!

“Tianguan blessing, no taboos”

fre2

Fre was named when, from free, if 1.0 by code, that must be free, Rin Yao life push

Fre2 is a react-like framework with 400 lines of code that implements the entire React Fiber architecture, and in some ways overtakes React fiber.

Better diff algorithm

Undoubtedly, this is the most important feature of FRE2. Since FRE uses the data structure of linked list, its traversal mode is extremely limited, so it is difficult to make an algorithm on this basis

I tried three different algorithms, such as vue2’s algorithm (traversal at both ends), IVI’s algorithm (longest increasing subsequence), and finally implemented an algorithm for FRE that supports asynchronous rendering (centralized drawing) and also preprocessing, but traversal order from left to right

This is a breakthrough for FRE2. Remember react doesn’t have an equivalent algorithm yet, and the performance of fre2 is almost as good as vue3

Better scheduling

Time slicing is a killer for asynchronous rendering, which can also be said to be the essential difference between FRE and other frameworks. Fre2 abstracts and adjusts on the basis of FRE1

This section is especially good for React fans looking at the source code. The FRE code is much better

Fragments support

Fragments are necessary for CSS Flex layouts. Fre1 support for fragments is incomplete. Thanks to the new fre2 algorithm, fragments are well supported

Give it a try

yarn add fre
Copy the code
import { render, useState } from 'fre'

function App() {
  const [count, setCount] = useState(0)
  return <>
      <button onClick={()= > setCount(count + 1)}>{count}</button>
    </>
}

render(<App />.document.body)
Copy the code

conclusion

Many people say that I have a good attitude, writing frame is not warm, no big factory or big man endorsement, I can still jump

Actually not, I have my own judgment on a lot of things, I think the front-end framework is not likely to be popular, even vuE3 is only 2W star, tepid has become a fact

Everyone started looking for new ideas, and FRE wasn’t going to make me money, but my experience writing FRE would help me in the next pit

In advance of the plot, I will open a new pit this year, which is a rendering engine written for the IOT era