Explain trade-offs

[oliviertassinari]

Explain trade-offs

[oliviertassinari]

Thanks for the extra details, a section like https://preactjs.com/guide/v10/differences-to-react in the documentation could be valuable.

[issue-label-bot]

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

[kuldeepkeshwar]

@oliviertassinari thanks for posting it here.

filbert-js was built with a top down approach, keeping the api similar to other css-in-js libraries (styled-components/emotion) and do minimal things while achieving the outcome.

On surface filbert-js provides most features provided by other css-in-js libraries. So from usage point it is quite similar to styled-components/emotion & migration to/from filbert pretty easy & straight forward.
Apart from features, filbert also covers integration with friends in react eco-system(CRA/Next.js/Gatsby/Preact/Babel plugin & macro) & some of the integrations are in WIP e.g tailwind.

filbert's architecture is based on layered approach.

• React API: a layer of react based components/hooks/functions
• hashing/interpolation: filbert uses DJB2 based hashing & interpolation involves a tiny function which fills holes in template string
• style manager : is core of filbert which is responsible for delegating work to adaptor layer & parser
  • browser adaptor
  • server adaptor
• css parser: a tiny css parser

Some of the things right now not in filbert are:

• 1. Object based styling
• 2. Typescript support
• 3. React Native support
• 4. Alternate execution path for static styles vs dynamic styles (Perf)
• 5. use CSSStyleSheet API (Perf)

For i/ii/iv/v are easy and some of them are in WIP & soon will land in coming releases.
For iii, I am looking for community support as am not much into RN

[kuldeepkeshwar]

@oliviertassinari sure I'll add that to website