Hello Folks 👋

Farzad YZ

Software Engineer

  • Javascript, GraphQL, React, State Managements, Node.js, Static Generators
  • Open Source (🙏 Github)
  • FP: Like Elm, Love Reason

Passionate about: Meetups, Conferences, Talks.

Where to find me

React without React 🤨

React(ish) thinking is Great

  • Revolution in FE
  • Declarative API
  • Component based UI
  • Built-in State handling
  • Sync/Async rendering
  • Built-in code splitting
  • Decoupled UI/business with Hooks
  • Reusability by design systems
  • Brings other goodies with itself 🍾

What is the problem then?

  • Adding up to Runtime job
  • Scripting time ==> Slower bootstrap time
  • Asset size: 95.8 (RD) + 5.9 (R) = 101.7
  • Not using the platform
  • Shipping native platform bindings, not the framework!

The idea

  • Ship UX and not the DX (React)
  • Save great DX stuff such as React for development
  • Compile native bindings to do the required job
  • Native bindings: Native mobile, DOM, Web Components, WASM, ...

Pioneers

  • SvelteJS, The magical disappearing UI framework by Rich Harris
  • StencilJS, The magical, reusable web component compiler by Ionic Team

What about React then?

rawact (babel-plugin-rawact) by Tobias Koppers

When does it make sense?

  • Small apps, less components == decrease in total bundle size
  • Code splitted apps == without react,react-dom initial bootstrap is faster
  • 👆 Gatsby and Next.js apps 👆
  • Compile React Components to WC == no need to ship React
  • Apps with lots of component instances ==> native bindings are faster and has less overhread
  • Apps with focus on low-end devices ==> native bindings are faster and has less overhread

Notes

  • It's still a proof of concept.
  • Supports all React features besides Suspense and Inceremental rendering.
  • Alternatives might be choosing Elm or Reason.
  • A last resort might also be Preact and hyperApp.

Demo time

👉 only bundle size for now

  • Note that it's still POC

Thanks for being patient ❤️

RawactDemo 1Demo 2

Slides Available at:

https://react-without-react.netlify.com