Fre-2.1 has been pulished

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

befo…

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

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")} />)



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>
    </>
}

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.


Print Share Comment Cite Upload Translate
APA
Yisar | Sciencx (2024-03-29T01:37:38+00:00) » Fre-2.1 has been pulished. Retrieved from https://www.scien.cx/2021/06/11/fre-2-1-has-been-pulished/.
MLA
" » Fre-2.1 has been pulished." Yisar | Sciencx - Friday June 11, 2021, https://www.scien.cx/2021/06/11/fre-2-1-has-been-pulished/
HARVARD
Yisar | Sciencx Friday June 11, 2021 » Fre-2.1 has been pulished., viewed 2024-03-29T01:37:38+00:00,<https://www.scien.cx/2021/06/11/fre-2-1-has-been-pulished/>
VANCOUVER
Yisar | Sciencx - » Fre-2.1 has been pulished. [Internet]. [Accessed 2024-03-29T01:37:38+00:00]. Available from: https://www.scien.cx/2021/06/11/fre-2-1-has-been-pulished/
CHICAGO
" » Fre-2.1 has been pulished." Yisar | Sciencx - Accessed 2024-03-29T01:37:38+00:00. https://www.scien.cx/2021/06/11/fre-2-1-has-been-pulished/
IEEE
" » Fre-2.1 has been pulished." Yisar | Sciencx [Online]. Available: https://www.scien.cx/2021/06/11/fre-2-1-has-been-pulished/. [Accessed: 2024-03-29T01:37:38+00:00]
rf:citation
» Fre-2.1 has been pulished | Yisar | Sciencx | https://www.scien.cx/2021/06/11/fre-2-1-has-been-pulished/ | 2024-03-29T01:37:38+00:00
https://github.com/addpipe/simple-recorderjs-demo