I kind of sought to answer this for myself in a roundabout way. My first experience with web dev was React. I never learned "why" so on a recent personal project I figured I'd start from the ground-up.
First I wrote a little 'RTS' game in Javascript where the player writes code for the units in game and runs the code in the browser. But the player/programmer needs more info about the game's state. Which means I need dynamic html components to display the changing state of the game. Easy enough, I used a lightweight library called slim-js to give me the functionality I needed minus the ugly boilerplate of the Shadow Dom. But now my dynamic components were re-rendering every single frame, since they were tied to a callback that was triggered when the game re-rendered. Ok, I'll just save the state of the game into a map and only update when there's a missing value or a new value. But all of this state management and custom component logic is overhead that makes the page harder to maintain.
I also wanted to use typescript to make sure I was passing the right values back and forth, which means transpiling every time I make a change. I also need to serve the index.html with a webserver, so I can import ES modules. Http-server works well enough for this, but what if I want to add another page to my site for watching tournaments run on the backend?
It was a nice exercise to learn /why/ frameworks like React exist. Moving forward I'm definitely going to move to a React-based page since I'm already starting to outgrow my vanilla-ish stack.
First I wrote a little 'RTS' game in Javascript where the player writes code for the units in game and runs the code in the browser. But the player/programmer needs more info about the game's state. Which means I need dynamic html components to display the changing state of the game. Easy enough, I used a lightweight library called slim-js to give me the functionality I needed minus the ugly boilerplate of the Shadow Dom. But now my dynamic components were re-rendering every single frame, since they were tied to a callback that was triggered when the game re-rendered. Ok, I'll just save the state of the game into a map and only update when there's a missing value or a new value. But all of this state management and custom component logic is overhead that makes the page harder to maintain.
I also wanted to use typescript to make sure I was passing the right values back and forth, which means transpiling every time I make a change. I also need to serve the index.html with a webserver, so I can import ES modules. Http-server works well enough for this, but what if I want to add another page to my site for watching tournaments run on the backend?
It was a nice exercise to learn /why/ frameworks like React exist. Moving forward I'm definitely going to move to a React-based page since I'm already starting to outgrow my vanilla-ish stack.
Here's the game if you'd like to check it out: https://ai-arena.com/