Understanding React Compiler

• jsx

  16 1,958 0.0 HTML

  The JSX specification is a XML-like syntax extension to ECMAScript.

  

  > Where is jsx defined, as a language?

  https://facebook.github.io/jsx/ is the primary home.

  > are there multiple transpiler implementations?

  Yes. Off the top of my head:

  Babel: https://babeljs.io/docs/babel-plugin-transform-react-jsx

  Typescript: https://www.typescriptlang.org/docs/handbook/jsx.html

  esbuild: https://esbuild.github.io/content-types/#jsx

  > is it standardized at all?

  In terms of well documented, yes. In terms of a TC-39 standard accepted as a part of JS and intended for browsers to consume? No. Unless you count how much it borrows from E4X [0] which was an optional part of the "lost version" of JS that was EcmaScript 4, then "sort of".

  [0] https://en.wikipedia.org/wiki/ECMAScript_for_XML

• InfluxDB

  www.influxdata.com featured

  Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.

  

• react-class-model

  2 7 4.0 TypeScript

  State management for React with hooks, inspired by Flutter's scoped_model

  

  State management is the worst part of React IMO. Basic things with `useState` aren't too bad but as soon as things get a bit more complex you need to reach for a separate library to make it easier. Unfortunately all of the popular options make use of weird patterns like reducers.

  I ended up rolling my own state management that lets you just write a normal JS class with normal fields and methods and use that for accessing and modifying your state. No reducers, atoms, stores, etc... Just a JS class for your state and logic.

  https://github.com/facepunch/react-class-model

• effect

  33 6,942 9.9 TypeScript

  An ecosystem of tools for building production-grade applications in TypeScript.

  

  I think React would get better developer experience and performance if they adopt language coroutine feature to implement direct style algebraic effect. In fact the React Fiber system is already an implementation of algebraic effect.[1] However, it’s “suspending” a routine by raising an exception. Thus unwinding all the call stack, therefore, it needs to re-run that same routine on resume. This is the core reason why they have a performance issue and why they created the compiler to cache values on reruns.

  JavaScript has language level coroutine features like async/await or yield/yield* and we have seen libraries using these features to implement direct style algebraic effect. For example Effect[2] and Effection[3]. You don’t need to memoize things if the language runtime can suspend and resume your functions instead of throwing exceptions and rerun them.

  [1]: https://youtu.be/7GcrT0SBSnI

  [2]: https://effect.website/

  [3]: https://frontside.com/effection/

• butterfloat

  6 8 8.4 TypeScript

  The greatest view engine for the modern web

  JSX as a syntax itself doesn't require `className` and `htmlFor`, it can support `

  Hello World

  ` just fine syntactically, that React API choice is a leak from the standard DOM API which use `className` and `htmlFor` for historic reasons (of bad parsers and stricter keyword parsing in earlier JS standards). In theory by using the DOM names React has less work to do when diffing DOM elements (though how much React actually benefits from it today is an interesting discussion).

  (Possibly relevant source/proof: my TSX-based library supports the HTML shortcut names just fine, like:

  `class`: https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb...

  `for`: https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb...)

• Svelte

  664 78,189 9.9 JavaScript

  Cybernetically enhanced web apps

  

  One radical lightweight alternative to React is Svelte

  https://svelte.dev/

  which is completely dependent on a compiler since it bakes in all of the updating logic at that stage. I haven't done big projects with it but for little projects I have been amazed at the speed and the small size of the bundles.

• redux-saga

  44 22,532 2.7 JavaScript

  An alternative side effect model for Redux apps

  

• react-rxjs

  3 548 4.2 TypeScript

  React bindings for RxJS

  

  That's a great library! Looking forward to use it in some personal project.

  In a React-based project, I managed to use RxJS through react-rxjs[0] to manage events and state. Thanks to it, I was able to fully streamline state management in that project.

  [0] https://react-rxjs.org/

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• mutraction

  3 17 8.5 TypeScript

  Futuristic web apps with model mutation tracking

  This sounds very similar to the development of my project. Basically every word of that could apply to https://mutraction.dev/

• combinator

  1 1 6.5 TypeScript

  A website that spits out what combos and shenanigans are in a given Magic: The Gathering deck list using the Commander's Spellbook database (by Naught0)

  The example supplied is what I was trying to get at.

  An empty dependency array means that the effect runs only once on mount. Same with memos and callbacks -- the value should remain stable. Here's a real world example of how I populate some state based on url query params:

  https://github.com/Naught0/combinator/blob/master/frontend/s...

  I may end up using a more robust routing solution to keep in sync with query params if I ever want to spend the effort, but this is a naive solution that works alright.

Suggest a related project