I don’t like versus debates per se. I think each reasonably successful library or framework had good reasons (at the time being) to become so in the first place. We will compare conceptual differences behind jQuery and React.
List of items. Each item has details which are hidden by default. Whenever user clicks on an item, item will expand and show it’s details. Other items will turn to grey. If we click same item again, it will collapse and items will be in their initial state, collapsed and black. We can also just switch from one expanded item to another, collapsing previous one, expanding new one.
Our data and it’s state are not structured and are spread inside the DOM. Separation between data, state and presentation is vague.
We’re querying the data from the DOM with jQuery’s selectors
Then we’re changing state directly on the DOM with
I’ve written this code first some time ago and coming back, I needed to wrap my head around it to understand it again. Because features are so limited I could refactor it without breaking. But this wouldn’t scale nicely if we’d add more complicated features to it.
My first reaction was “wow, more code, this can’t be better”. But it is. Why?
- data is nicely separated in
- all the state we have is stored in
- all presentation logic is written in
- we can read code top to bottom
- I could easily understand everything it does after quick review (you might not know React yet, but it is fairly easy to learn)
I know this is pretty trivial example. But it still shows the fundamental differences between the libraries and how they help you separate concerns.