3 ms·
Totally agree. It can be made better if you write it using non standard patterns - but the community is so dogmatic you'll get laughed out of the room. All of
by apatheticonion 8mo ago
Totally agree.
It can be made better if you write it using non standard patterns - but the community is so dogmatic you'll get laughed out of the room.
All of my personal react projects use the MVC/MVVM architecture and are so much easier to work with
export class AppViewModel {
@rx accessor message = new TextField()
}
export function App() {
const vm = useViewModel(AppViewModel)
return <div>
<p>{vm.message.value}</p>
<input
onChange={vm.message.fromEvent}
value={vm.message.value} />
<div>
}
Makes it vue/angular/svelte-like, but unlike Vue/Angular/Svelte, you pick the version of TypeScript, the tools and don't need brittle plugins for your IDE to work with it.
- h4x0rr 8mo agoHow is a viewmodel better? It's way more skipping around in the codebase to find the parts you actually care about
- apatheticonion 8mo ago- Allows you to use async/await and generators (useful for pagination/infinite scroll) - You can test the view model independently of the rendering logic - Dramatically reduces the code that lives directly in the component (it's only TSX) - Allows for better abstractions and state management (services) - Clear path to leveraging threads in front end applications - Simple "visual" components (like <Input />, <Button />) don't need view models, just orchestrating components. In practice, when writing traditional React, I focus too much on rendering cycles and the nuances of managing component state while spending much less time on making the application look good and feel performant/nice to use. Having a component be pretty much exclusively TSX gives me a clear separation of "view" and "what the view needs" - so I just think of the html structure and css. I tend to create much better looking and nicer applications this way. > It's way more skipping around in the codebase to find the parts you actually care about Not really. You cnt+click to an implementation. Say you have "await someApi.getItems()" - you just click and go directly there. Traditional React apps need to thunk with redux or have a bunch of custom hooks that quickly become a source of confusion.
- h4x0rr 8mo agoIsn't that similar to what react folks are doing with redux/zustand?
- adithyassekhar 8mo agoHi do you have some examples or repos you'd be comfortable with sharing? This looks interesting.
- apatheticonion 8mo agoI put the library here: https://github.com/alshdavid/mvvm https://github.com/alshdavid/mvvm There are some examples under: https://github.com/alshdavid/mvvm/blob/main/examples/basic/index.tsx https://github.com/alshdavid/mvvm/blob/main/examples/basic/i...
- adithyassekhar 8mo agoThanks