Need help with fre?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

yisar
2.2K Stars 222 Forks MIT License 1.6K Commits 8 Opened issues

Description

:ghost: Tiny Concurrent UI library with Fiber.

Services available

!
?

Need anything else?

Contributors list

fre logo

Fre

👻 Tiny Concurrent UI library with Fiber.

Build Status Code Coverage npm-v npm-d brotli

  • Concurrent with Fiber — This is an amazing idea, which implements the coroutine scheduler in JavaScript, and the rendering is asynchronous, which supports Time slicing and Suspense.

  • Highly-optimized algorithm — Fre has a better reconciliation algorithm, which traverses from both ends with O (n) complexity, and supports keyed.

  • Do more with less — After tree shaking, project of hello world is only 2KB, but it has most features, virtual DOM, hooks API, Fragment and more.

Use

yarn add fre
import { render, useState } from 'fre'

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

{count}

setCount(count + 1)}>+ > }

render(, document.body)

Hooks API

useState

useState
is a base API, It will receive initial state and return an Array

You can use it many times, new state is available when component is rerender

function App() {
  const [up, setUp] = useState(0)
  const [down, setDown] = useState(0)
  return (
    <>
      

{up}

setUp(up + 1)}>+

{down}

setDown(down - 1)}>- > ) }

useReducer

useReducer
and
useState
are almost the same,but
useReducer
needs a global reducer
function reducer(state, action) {
  switch (action.type) {
    case 'up':
      return { count: state.count + 1 }
    case 'down':
      return { count: state.count - 1 }
  }
}

function App() { const [state, dispatch] = useReducer(reducer, { count: 1 }) return ( <> {state.count} dispatch({ type: 'up' })}>+ dispatch({ type: 'down' })}>- > ) }

useEffect

It is the execution and cleanup of effects, which is represented by the second parameter

useEffect(f)       //  effect (and clean-up) every time
useEffect(f, [])   //  effect (and clean-up) only once in a component's life
useEffect(f, [x])  //  effect (and clean-up) when property x changes in a component's life
function App({ flag }) {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = 'count is ' + count
  }, [flag])
  return (
    <>
      

{count}

setCount(count + 1)}>+ > ) }

If it returns a function, the function can do cleanups:

useEffect(() => {
  document.title = 'count is ' + count
  return () => {
    store.unsubscribe()
  }
}, [])

useLayout

More like useEffect, but useLayout is sync and blocking UI.

useLayout(() => {
  document.title = 'count is ' + count
}, [flag])

useMemo

useMemo
has the same rules as
useEffect
, but
useMemo
will return a cached value.
const memo = (c) => (props) => useMemo(() => c, [Object.values(props)])

useCallback

useCallback
is based
useMemo
, it will return a cached function.
const cb = useCallback(() => {
  console.log('cb was cached')
}, [])

useRef

useRef
will return a function or an object.
function App() {
  useEffect(() => {
    console.log(t) // { current:
t
} }) const t = useRef(null) return
t
}

If it uses a function, it can return a cleanup and executes when removed.

function App() {
  const t = useRef((dom) => {
    if (dom) {
      doSomething()
    } else {
      cleanUp()
    }
  })
  return flag && I will removed
}

Suspense

This is another feature of concurrent rendering, which can achieve asynchronous refresh without the aid of state.

const LazyComponent = lazy(Component)

function App() { return Loading...}> }

jsx2

plugins: [
  [
    '@babel/plugin-transform-react-jsx',
    {
      runtime: 'automatic',
      importSource: 'fre',
    },
  ],
]

Compare with other frameworks

The comparison is difficult because the roadmap and trade-offs of each framework are different, but we have to do so.

  • react

React is the source of inspiration for fre. Their implementation and asynchronous rendering are similar. The most amazing thing is concurrent mode, which means that react and fre have the same roadmap -- Exploring concurrent use cases.

But at the same time, fre has obvious advantages in reconciliation algorithm and bundle size.

  • vue / preact

To some extent, vue and preact are similar. They have similar synchronous rendering, only the API is different.

The reconciliation algorithm of fre is similar to vue, but the biggest difference is that vue/preact do not support concurrent mode, this means that the roadmap is totally different.

| framework | concurrent | reconcilation algorithm | bundle size | | --------- | ---------- | ----------------------- | ----------- | | fre2 | √ | ★★★★ | 2kb | | react17 | √ | ★★ | 39kb | | vue3 | × | ★★★★★ | 30kb | | preactX | × | ★★★★ | 4kb |

License

MIT @yisar

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.