Introduction
I was always striving for something better, first I was making my own little tools working with JQuery, then I started learning more about VanilaJS, after all I found React. It was a Heaven that day, but learning deeply was really something incredible difficult and felt like hell.
Now I'm very used to React, I don't even think about how things work anymore, I'm just building - which is great! Unless you want to strive for more.
While learning React I was trying out how I could build application with different architectures. The thing I figured out is that everything is possible, but you need hooks :)
This means you can't use your tools you've been developing and polishing for years in another frameworks or just in VanilaJS.
Limits are Reached
While figuring out architecture patterns and how I can organize things with React, I realize I can't go even further just because React itself doesn't allow me to do so, I can't really customize it. It might seem like too much, but that's maybe just for you as a user-developer, but for as Developer-Tools developer, that's something I'm missing very much.
The complexity of React is not going anywhere, they can't fix it, it wouldn't be React anymore. It's easily proven by React Team themself since they Pre-Released React Compiler, which should help avoid that fundamental complexity - even they understand that it can't be fixed.
That's why some developers choose other frameworks over React like Angular, Vue, Svelte, SolidJS, ...
Tired 😩
I'm honestly tired from React, that's true that it's my Money-Making machine and that's a tool I can use to quickly build something - even faster than AI as for now. However, I'm striving for even better reality and I'm really tired of using this one tool for too long with not so many improvements.
Like why I need that useOptimistic if I could build that hook on my own, just let me do that - they don't.
Maybe let me introduce at least ONE SINGLE new attribute so I don't suffer with importing a function over and over again, why I can't just do that?
Is that really so difficult?
<div classBEM={["base", { active: true }]} />
Sketching into Reality
When I had enough of it, I just started sketching the better React and was a chaos to be honest. I was imagining a beast, but eventually I took the practical approach and simplified many things, it took almost a whole year to just sketch what I wanted - It took another year to reach several severe goals I wanted.
Now I'm ready to give something I'm proud of
https://denshya.github.io/proton/learn/
This is something between React, SolidJS and VanilaJS - you can create components almost like in React with Observables like in SolidJS, while attaching Components like regular VanilaJS elements!
Quick Example
function RangeApp() {
const progress = new State(0)
return (
<div>
<input type="range" min="0" max="100" step="1" value={progress} />
<progress value={progress} max="100">{progress} %</progress>
<button>Reset</button>
</div>
)
}
const inflator = new WebInflator
const AppView = inflator.inflate(<App />)
document.getElementById("root").append(AppView) // And you can move it arround.
Why it's better
If you're too lazy to the whole docs, I will give a quick list of why I would prefer Proton over React for the next project:
- No hooks - Do things and reuse them anywhere (even in React).
- Observables - no need to rely on Component lifecycle, I can design and develop state flows and then use/reuse them in components or directly in elements as globals.
- Customization - I can add my own attributes to elements and even render DOM Nodes directly to JSX.
- No root hijacking - I'm just building components and then put them as see it fits - all the components can be Root Components right now.
- Super lightweight - I'm an extreme footprint optimizer, so for me saving 200kb of code means a lot! Proton is just ~5kb!
Seemingly Successful Road
In the beginning I tried it on my own personal projects - it was not so good, I was really questioning if it's even worth continuing building.
But now I'm building a website for the company I'm working at (Pinely) and we're planning to spread it to another projects we had if clients do not mind.
So I think it's somewhat a success for me, I've been inspired by many people and library I've seen outer no one is looking at - so I want to say thanks to these libraries as well:
- https://github.com/WebReflection/uhooks
- https://github.com/WebReflection/usignal
- https://github.com/WebReflection/dom-augmentor
- https://github.com/WebReflection/heresy-ssr
- https://github.com/ReactiveHTML/rimmel
- https://github.com/snabbdom/snabbdom
- https://github.com/yelouafi/unReact
- https://github.com/kitajs/html
Top comments (1)
This sounds awesome! I can't wait to try Proton out myself and see how it compares to React. Thanks for sharing your journey and this cool new approach!