Halo, it’s been a long time

Haven’t come out for a long time ::>_<::, mainly before the reconstruction of C station, now the reconstruction is finished

It’s time to rebuild my wheels…

So, as you can see, Smox, FRE, ePlayer have all been updated

This article is mainly about the design of fRE framework

Use

import { h, render, useState } from 'fre'

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

render(<Counter />, document.getElementById('root'))
Copy the code

This code should be familiar, the React Hooks API is a miracle

And I’m kind of obsessed with seeing this API that I can’t think of in my right mind how to implement, right

nature

Why are the React hooks API so difficult to implement, essentially because this is missing

If this were vUE, we would know which component it was by relying on the collection, whereas React doesn’t

In fact, the React hooks are in Fiber

The principle of

Alas, I accidentally mentioned fiber again, so embarrassing

There are a lot of posts on Fiber, and most of them are vague, so for hooks, the key is to iterate on the linked list

Unlike recursive traversal, a linked list traverses all nodes in one chain

The siblings of recursion are disconnected

Fiber allows us to go through and get all the function nodes in sequence, and then a global variable is replaced, and this is what we want

The design philosophy

Hm, it says a little bit about hooks, which are kind of off topic…

The key is frame design! Actually frame, it is the different collocation of individual be fond of, this is only

So, let’s look at a chart, and I’m going to start writing my essay

componentization

React is primarily a class solution, Vue is a template engine and single file, and fre is function…

First of all, IT’s true that I don’t like vue’s template engine

But it also has advantages, such as the built-in Runtime, such as the ability to control compilation, easier to compile into small programs, and even I see didi’s CML framework directly using tags to implement polymorphic protocol (compile with specified markup content).

But when it comes to design, I still categorize it as hopelessly componentized

Then there’s the React Class solution, which browsers support, but has its drawbacks

Classes are hard to do in 1KB because they have lifecycle events, they have context, and they have desperate extensions like HOC, render props, extend, and so on

Hooks API, which has the advantage of being easy to reuse, function is a lock, and the magic of the API is fatal, can’t get this, can’t do a lot of things, no extra characters, can’t compile

You know, the domestic framework, in the end to do a lot of compilation are…

Status updates

Another element of the framework, the status update mechanism, look at the diagram

After voting, it can be seen that the final remaining scheme is React and VUe3

Personally, I like SAO’S API so much that I choose proxy

Of course, FRE is Fiber, so it’s actually not my favorite, but I can’t help it. I used Proxy for the first version, but later I found that it’s better to keep the same as React… Easy copy

But I do like proxies best of all, no doubt, but I’ll talk about that later

vdom diff

In fact, we see many frameworks without diff, such as vue1. X, and then recursive diff, such as Preact and vue2. X

There’s also Fiber for React

In fact, for Vue, diff is not necessary, but for React, fiber is not necessary either.

So, for mature frameworks, this mechanism is just a necessity for a highly abstract, unified non-browser environment

So if you write a framework, I think you still have to add a layer of VDOM

Priority scheduling

React prioritized scheduling. In plain English, it removes the browser stack. High-priority tasks are always executed, and low-priority tasks are always executed

The implementation of this scheduling scheme depends on either Fiber or Runtime

So react and Vue can actually do it

But I didn’t like the Vue Runtime, and FIBER couldn’t figure it out for a while

Alas, it’s still Micro Task inside FRE

conclusion

All told, fRE’s solutions, when taken together, are really just 1KB with a decent finish

Hooks API is cool, but it doesn’t do much compilation, it’s a problem later

And I don’t like the vUE template, and I want to do scheduling, so… If I wanted to write an ideal framework, it would look something like this:

1. Proxy status update scheme, SAO
2. Class componentization scheme, considering the best componentization scheme
3. Use web-Component as runtime for scheduling
4. Have VDOM DIff and use JSX

Above, is my thinking to the new frame, I first do not do, you come!

Finally, add fre’s Github address:

github.com/132yse/fre

Welcome star and PR ::>_<::