DEV Community

Cover image for Fre: another concurrent UI library

Fre: another concurrent UI library

132 profile image Yisar Updated on ・2 min read

Hello everyone, my name is yisar, a front-end enginer in China.

This is my first visit to media, and I want to share my framework with you.

React is very popular, especially after react 16. The most amazing thing is concurrent mode, which is not available in other frameworks.

Fre is the second framework to implement concurrent mode in addition to react. This implementation is different from the other vdom reconciliation algorithm. Its rendering is asynchronous, and many use cases are built on the premise of asynchronous rendering.

Fre is similar to react in many ways, such as fiber architecture using linked list, hooks API and functional component…

But at the same time, they are different. Fre has a better reconciliation algorithm. The most important thing is that fre only has 400 lines of code, the bundle size is just 1KB!

Alt Text

In most use cases, the performance of fre is close to that of vue3 and better than that of react.

At the same time, 1KB of code means that you can better understand the source code of fre, and even learn react with the help from fre.

It is worth mentioning that preact is as small as fre, but preact is completely synchronous. It does not support concurrent mode and keeps the opposite roadmap with react.

If you are looking for an alternative framework of 1KB react, fre is more suitable for you.

Alt Text

If you’re interested in concurrent mode, take a look at fre and you’ll get a ruby.

I really need partners, because fre has a lot to improve, let’s build together.

Discussion (7)

alexandrudanpop profile image
Alexandru-Dan Pop

Really like how the hooks API is implemented in 70 LOC & DOM updates in 45 LOC.
Very nice!

132 profile image
Yisar Author

Yes, only hooks API can achieve such a small implementation, this is a great invention

zhongmeizhi profile image

how niubi wa。my jiji

lukeshiru profile image

That's really interesting! I'll try it! Thanks for sharing!

132 profile image
Yisar Author

Thank you, looking forward to your feedback!

dennisfrijlink profile image
Dennis Frijlink

Nice! I love lightweight libraries/frameworks. One question. Does Fre uses a Virtual DOM?

132 profile image
Yisar Author

Yes, fre had. we use vdom for generating linked list called fiber.
What we traverse is a linked list, of course vdom is also very important, fre also has an efficient diff algorithm

Forem Open with the Forem app