Keep JSX and functions
function MyComponent() {
return <span>Hello, React<span>;
}
Keep useState, but add full HTML syntax support, use click not onClick, class not className
function MyComponent() {
const [count, updateCount] = useState(0);
return <button click={_ => updateCount(count + 1)}>
Count: {count}</button>
}
useState with objects
function MyComponent() {
var me = useState({ firstName: "Ibrahim", lastName: "ben Salah"});
return (
<div>
fullName: {me.get("firstName")} {me.get("lastName"})
</div>
)
}
true first class support for async/await and promises, not the fake use
hook
async function MyComponent() {
const ditto = await fetch("https://pokeapi.co/api/v2/pokemon/ditto")
.then(e => e.json());
return (
<div>
{ditto.name}
</div>
)
}
Add support for async iterator
Not sure if one would expect this to end up with one final div and auto dispose all the previous, or all div's should be retained
async function *MyComponent() {
for (const delay of this.delays) {
await this.wait(delay);
yield <div>`Delayed response for ${delay} milliseconds`</div>;
}
}
Add support for observables (e.g. rxjs)
function MyCounter() {
const time = timer(0, 1000).pipe(map(() => new Date()));
return (
<div>Current time: {time}</div>
)
}
Conclusion
Do you agree on using the platform instead of inventing dubious hooks with many gotcha's? Or do you think it's an impossible idea? If the latter then you would be surprised to hear that the fastest UI library in the krausest js framework benchmark is already built with these concepts, it's called xania (named after a small district in Morocco).
benchmark results:
https://krausest.github.io/js-framework-benchmark/2022/table_chrome_104_windows.html
benchmark code:
https://github.com/xania/krausest-js-benchmark/blob/main/src/app.tsx
Top comments (2)
Saw this lib on us benchmark and looks amazing!!! Native async, Rex support and potentially resumableLooking forward to learn more
thanks for your encouragement :)