Halo, everybody! It’s been a long time! Finally!!! I’m on the last day of 2020! Finish a long-cherished wish – fre2!

See the title want to kill my rhythm? Ha ha ha ha don’t worry, let me elaborate

Basic: Better Diff

Fre1’s diff algorithm copied React, which has been criticized for not being a good algorithm. The biggest change in Fre2 is the new algorithm

Fre2’s algorithm mainly uses double-endian traversal, which gives it the opportunity to deal with common prefixes and suffixes

1 2 3 4
1 3 2 4
Copy the code

1 is the same as 4, so I skip it, and it becomes the comparison of the middle element

  2 3
  3 2
Copy the code

Vue, Inferno and other frameworks all use this preprocessing, and it’s said that this small preprocessing can lead to a big performance improvement

In the realization of the algorithm, mainly use the two ends of the loop, so as to ensure O(N) complexity under the premise of saving code

newStart = 0
newEnd = newChildren.length
oldStart = 0
oldEnd = oldChildren.length

while(newStart <= newEnd && oldStart <= oldEnd) {
  if(same(newChildren[newStart], oldChildren[oldStart]) {
    // update
    newStart++; oldStart++
  }
  else if(same(newChildren[newEnd], oldChildren[oldEnd]) {
    // update
    newEnd--; oldEnd--
  }
}

if(oldStart > oldEnd) {
  while(newStart <= newEnd)
    // insert
}
else if(newSart > newEnd) {
  while(oldStart<= oldEnd)
    // remove
}
else{... }Copy the code

This algorithm is mentioned in the React comment, stating that it cannot be implemented because the linked list has no reverse pointer

Github.com/facebook/re…

The solution for fRE was to do the algorithm during the creation of the linked list rather than iterate over it, which the React team obviously didn’t think of at first

The new DIff algorithm is significant for FRE

I used to be a loser. When people asked me what the difference was between react and Fre, I was speechless

Now I can finally hold my head high: FRE’s algorithm is better than React

I can finally announce: Fre stands up!

Future: Fiber, tearing, compile

The algorithm is the basis of the framework. In addition to the basic algorithm, the general direction of FRE2 is similar to react

tearing

Fre1 is known as a 1KB React-like framework. It has the same API as React and the same concurrent mode, such as time slicing

I prefer to call it Fiber because Fiber is an implementation of a coroutine, and priority scheduling is multithreaded

The biggest problem with this mode is Tearing, which is why Concurrent Mode has been unable to officially enter production

As shown in the figure, it is easy to understand that a component’s rendering can be broken if it relies on an “external state” such as Redux, Mobx, etc

This state then changes during rendering, causing the component to render the next content in the new state and the previous content in the old state

This tear is so common that almost all third party libraries have problems

Resolving the tearing problem is a major task for FRE2 and one of the solutions is the uMS

Github.com/reactjs/rfc…

This is essentially giving the external state a “version number”, and if the version is inconsistent, the component needs to be re-rendered, which is not the best solution because it can lead to repeated rendering

However, exploring more safe and efficient asynchronous rendering will be a major focus of FRE2

compile

React recently released a new feature: Server Component

To tell you the truth, a dozen eyes look really not how, a word not to drive, drive is the history of reverse

However, I am more concerned with the optimization of AOT and the possibility of intermediate code, and FRE2 will also try to do this

But it’s not built into the FRE, it’s probably an extra library that does extra things

For example, I can now think of rendering the intermediate code as a string on the server side to get a better SSR with no Runtime and no need for secondary hydration

Fre2 might do SSR based on server Component

QA

  1. Fre vs React vs vue?
The framework concurrent The diff algorithm size
fre2 Square root ⭐ ⭐ ⭐ ⭐ 1kb
react17 Square root ⭐ ⭐ 39kb
vue3 x ⭐ ⭐ ⭐ ⭐ ⭐ 30kb
preactX x ⭐ ⭐ ⭐ ⭐ 4kb

As above, each framework has its own strengths and weaknesses, so judge for yourself. None of these benchmarks really matters. None of the four frameworks is slow

The point is, for example, if you want something, you want a job, it’s likely that vue and React are for you, and you want to explore the implementation of concurrent, consider fre

  1. Test coverage

At present, all tests of FRE1 have been completed. However, from the issue, there are still cases that have not been covered, which need to be completed

conclusion

Other aspects, such as DevTool and time travel, can be played in Fre2

2020, say goodbye to FRE1, new FRE, new algorithm, new direction, new journey…

Finally, let me show you Fre’s GitHub address

github.com/yisar/fre

Fiber, Concurrent mode, time slicing, asynchronous rendering, etc. In addition to the React source code, you can also read fRE

I hope in the New Year, I can meet more friends, we can create together!

In addition, discussion has been opened in FRE, please feel free to speak ~