crank VS sucrase

If you enjoy this approach, you might enjoy the Crank JS framework. https://crank.js.org/

> Crank uses generator functions to define stateful components. You store state in local variables, and `yield` rather than `return` to keep it around.

I'm very interested in seeing if using the commonly implemented forms of compiler support for async programming can also be well used for GUI programming. One wishawa[0] is also perusing this approach in Rust but I first came upon this idea from the crank-js[1] authors. It wasn't clear to me why that one never went anywhere. Was it failure with the approach or was React just a good solution in the space? I can say this though, there's something strikingly elegant about those initial samples of using JavaScript generators for components.

[0]: https://github.com/wishawa/async_ui

[1]: https://github.com/bikeshaving/crank

Take a look at crank.js, a JavaScript framework where components can be written as async functions or as generators. It seems similar to what you're trying to do :)

Well there's https://crank.js.org that uses native js generators where you would you normally put hooks in. Never used it but looked like a very neat idea.

Reminds me of https://github.com/bikeshaving/crank, which was rather fun for a PoC I made a while back.

Strictly speaking, the framework hides this complexity away, but it still exists and it is the framework that's now paying the extra cost. Of course a framework is allowed, and should, when possible, hide away these things. For example Crank.js uses generators to allow for async Components as first class citizens, https://github.com/bikeshaving/crank, but they're still having to deal with the pitfalls of asynchronous work.

To give the author of https://crank.js.org/ due credit, after reading through the descriptive posts I was impressed by the amount of thought and design that went into it.

> What do you propose as an alternative?

There are lots of alternatives, but perhaps the simplest would have been to use async generators. This is how Crank[0] (mentioned elsewhere in this thread) works, and it allows you to do anything (AFAIK) that's possible with hooks with a much simpler and more testable API.

> So, sure, there are limitations and rules you have to pay attention to with hooks... but that's just programming.

No, it's not. The biggest problem with React hooks is that they are not composed of transferable knowledge, meaning memorizing these rules and patterns does not transfer outside of React; likewise, I can't use much of the knowledge I have already built up over many years of my career when using hooks. It's the same argument that's made against Rails, where you have to learn tons of Rails-specific idioms (on top of having to understand general concepts like relational database access patterns) instead of just writing code in a way that's more direct and intuitive for anyone.

My brain has limited RAM. The more things I have to keep in my head when developing against an API, the more likely I am to make a mistake. With every release of React, I seem to have to keep more and more of these details in my brain as I work. Contrast this with something like Svelte, where you really only need to fully grok about two concepts to use it effectively. I understand that this is the tradeoff the React team made, but I'm not convinced it's worth it.

[0]: https://crank.js.org/ and https://crank.js.org/blog/introducing-crank

Thanks. As for the code compilation, that can be tested and seen in https://sucrase.io/

The demo page is only to show how we can transpile JSX in browsers.

Thanks u/OutlandishnessKey953, the playground built with React, Docusaurus(https://docusaurus.io/), CodeMirror(https://codemirror.net/), Sucrase(https://sucrase.io/), etc.

Hi, Sucrase author here.

To be clear, the benchmark in the README does not allow JIT warm-up. The Sucrase numbers would be better if it did. From testing just now (add `warmUp: true` to `benchmarkJest`), Sucrase is a little over 3x faster than swc if you allow warm-up, but it seemed unfair to disregard warm-up for the comparison in the README.

It's certainly fair to debate whether 360k lines of code is a realistic codebase size for the benchmark; the higher-scale the test case, the better Sucrase looks.

> worse it disables esbuild and swc's multi-threading

At some point I'm hoping to update the README benchmark to run all tools in parallel, which should be more convincing despite the added variability: https://github.com/alangpierce/sucrase/issues/730 . In an ideal environment, the results are pretty much the same as a per-core benchmark, but I do expect that Node's parallelism overhead and the JIT warm-up cost across many cores would make Sucrase less competitive than the current numbers.

First, npm i -D sucrase to install sucrase. Now you can do node -r sucrase/register ./index.ts to run TypeScript code directly with Node.

As you might know there are a lot of Javascript bundlers out there, such as webpack, sucrase, parcel, rollup and etc. Bear in mind, not because they have thousands of stars on Github that means they're the best. sometimes new libs are as good as the popular ones but they're still building up their image/popularity in the community. what I bring today is a not sooooo, popular JS bundler called esbuild.

Sucrase JS was 2x the speed of esBuild and 50% faster than SWC last I checked.

Webpack does way more than esbuild, including running a typechecking compiler instead of just transpiling, running compilers able to downlevel emit to ES5 and providing a deep plugin architecture allowing you to hook into any bit you like. But yes, it hasn't been designed with speed in mind - it has been designed with maximum extensibility instead. Its the same reason why Babel is slow compared to sucrase (written in JS, currently faster than SWC and esbuild but doing somewhat less - https://github.com/alangpierce/sucrase)

tsc has in fact been designed with speed in mind (I've been following the project since before it ended up on GitHub). Going beyond 1 order of magnitude performance improvement is highly unlikely.