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>
}
How is a viewmodel better? It's way more skipping around in the codebase to find the parts you actually care about
- 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.
Hi do you have some examples or repos you'd be comfortable with sharing? This looks interesting.