DEV Community

loading...
Cover image for Fre-2.1 has been pulished

Fre-2.1 has been pulished

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

I announce that fre2 is officially released, which is a major breakthrough version.

Offscreen rendering

The bigist breakthrough is offscreen rendering, a core algorithm refactor.

https://github.com/yisar/fre/releases/tag/2.1.0-alpha

before:

Alt Text

after:

Alt Text

Offscreen rendering is an algorithm level optimization, it traverses vdom in reverse order, from bottom to top, from right to left, to ensure that the front DOM pointer is in memory, and finally it is drawn to the screen at one time.

With off screen rendering, fre has become the best performance frameworks in vdom world, not one of.

Alt Text

Just as react 18 also released alpha version, fre 2.1 also tried to be compatible with them.

CreateRoot

import { render, useState } from 'fre'

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

createRoot(document.body).render(<App/>) // here
Enter fullscreen mode Exit fullscreen mode

This API is more ergonomic, and for the callback, you can do this:

function App({ callback }) {
  return (
    <div ref={callback}>
      <h1>Hello World</h1>
    </div>
  );
}

createRoot(document.body).render(<App callback={() => console.log("renderered")} />)
Enter fullscreen mode Exit fullscreen mode

startTransiton

This is an API for lowering priority, which is very useful, so I decide to build it in.

function App() {
  const [count, setCount] = useState(0)

  console.log(count) // 1 2

  const update = () =>{
    startTransition(()=>{
      setCount(2)
    })
    setCount(1)
  }
  return <>
      <h1>{count}</h1>
      <button onClick={update}>+</button>
    </>
}
Enter fullscreen mode Exit fullscreen mode

It works can be understood as setTimeout (cb, 0), but the callback function is executed synchronously, and the update is delayed asynchronously.

auto-updates

https://github.com/yisar/fre/blob/master/demo/src/auto-batch.tsx

Fre has always been supportive.

Suspense SSR

This is the only breakthrough of react 18. I like it very much, but fre doesn't support it now.

I need to spend some time to study it.

Summary

Fre2 has also been released. If you are interested in the front-end framework, you can jump to GitHub.

https://github.com/yisar/fre

It has all the advanced features of react 18, but only 400 lines of code, and its performance is much better than react.

Discussion (1)

Collapse
vnues profile image
vnues

Fre is much better than vue, React is on the way to catch up