I learned “pure” JS back in 2013, when HTML5 was brand new, and I still don’t get most of the stuff going on nowadays.
I stepped out of webdev like 5 years ago. Now every time I try to get back into things to work on an open source project or whatever I just give up because I do not understand things.
Everything seems to be based on React which is some kind of magic templating library that does everything? And also dynamically updates thing in response to changes and talks to the server?
I much prefer the days of just using vanilla js to manipulate a DOM and talk to a well defined API.
I’m sorry but framework and library in this post are going to be used loosely, because even React, Vue, Angular, Svelte, etc devs use the terms loosely.
React is mostly a UI library like you would find in most native app development. Of them all them JS frameworks/libraries is one of the less opinionated and with less batteries included. By design it does not does everything. Most other frameworks do way more.
It lets you define custom components. The components can have properties that their parent component defines and internal state. If the state or the properties change the component gets redrawn (magically). There are some lifetime functionalities (things to do on first render for example) and performance improving stuff (memoization) but mostly that’s it.
All the other features you talk about are third party libraries or frameworks that can operate with react or are build on top of and cover the bases, like routing, fetching, caches, server side rendering, styling utility libraries, component libraries, animation libraries, global state management, etc.
The big difference with the vanilla way is that the approach is mostly declarative. The runtime takes charge of updating the DOM when your components state or properties change.
You take a big performance hit, and an even bigger bundle size one, but the speed of development and huge ecosystem of readymade solutions can be really important for some use cases.
Other frameworks take different approaches to solve the same problems:
- Component system for code reuse and organization.
- Some way to manage state
- Some way to decide what to re-render and when.
- Extra stuff. Some frameworks end here, some have tools for everything you would need for a web app.
Always confused when I see memes like this
You learn js, then you learn a bit about ts and pick react/vue if you want to do frontend or nodejs if you’re into backend. Then you do something basic, like a barebones twitter clone, weather app, etc. By the point when you’re 80% done, you will know most important parts of the ecosystem naturally
After that, learning all the supporting libraries/frameworks is super simple since next is just superset around react, same for nuxt. Solid, svelte, fresh etc are just different flavors of react. Even vue is looking like react this days with composition api, simply because they nailed the simplicity and dev comfort. Average dev will never face weird js/ts parts or confusing libraries because most of their day to day job will be moving buttons and looking how to persist user basket in browser storage…
Sure there are a lot of libraries and ways to do stuff, but 90% of them are irrelevant, only-for-hobby or simply dead and unused since 2010. Knowing ts+(react|vue)+(vuex|redux-tk|mobx)+(styled|tailwind) will land someone a basic job where they can progress and expand their knowledge lol
The joke is that nearly everything these libraries/frameworks do is complicate what used to be simple
