I'm a 40-something software engineer who, for the past ten years, has primarily been doing distributed systems backend work. Before that I was full-stack. I'm wondering what your recommendations are for getting back up to speed on the frontend world.
I've dabbled in React, D3, and some of the modern browser APIs (fetch, promises, better DOM selectors). I'm vaguely aware of a thing called Babel. And apparently Node is used for more than just running a server.
My confusion about where to focus my relearning efforts comes from an impression, rightly or wrongly, that frontend dev went kind of nuts and turned itself into a big mess. This is just my impression from the outside, not an informed professional judgment. It has seemed like we've been churning through frameworks, tools, and paradigms on a semiannual basis. Is this still happening, or have things started to stabilize?
What I'm looking for is a standard core that I can focus on, and some best practices, without getting into the weeds on anything superfluous.
Once you've built a few small projects, hopefully you'll have a sense of the pain points modern frameworks fix. Most people use global variables for state or even store their state in their html and then use JS to update the html. Modern frameworks do it differently, asking you to manage state and then creating a view as a function of that state.
If you do go the react route don't confuse yourself by using redux. People associate them so heavily they even refer to it as "learning react/redux". I've never seen a great use case for redux in the wild and believe it to be an antipattern. I've never written a redux reducer, but I've removed hundreds of lines of redux code, always to the betterment and simplification of the app.
You can form your own opinions later, but I really recommend learning to build react apps without global state, learning the basics like props, hooks, event bubbling, etc. Then if you ever need safe, immutable global state you can learn redux.
[0]: https://developer.mozilla.org/
[2]: https://github.com/developit/htm
[3]: https://svelte.dev/
React is the big change. Everything is defined as how different it is from React, so if you know how it works, you’re no longer lost in frontend.
The biggest change of react is that it brought something akin to imgui to web frontend. The “render => event => update state => render” loop is really cool.
Then react sucks a lot in many ways. Especially when trying to call non-react libraries...
I personally use my own render-event-update-render loop with no virtual dom, and it’s been all good.
Then regarding html/css, There are really 2 schools. Those who do tailwind, and thos who style things the old way. Learning html/css is a pain, but no more than before.
Regardind babel/webpack and the sorts don’t sweat it, these come for “free” when you start a project. Very few programmers know the details of everything that happens there. It’s not very interesting anyways...
Webpack is still a nightmare but things like snowpack et al try to remove some of that complexity.
Also this is just my own observation, your mileage may vary, but when back end teams are tasked with upgrading front end tech they pick Angular, and when experienced front end guys are given a project for a tech refresh/rewrite they go with React.
Most build tool arguments IMHO are weeds. Core is having a goal - something you need to get working on a deadline. That tends to be a great weedkiller.
Postcss + Tailwindcss (for css bundling)
Eslint for linting
uwebsockets.js for high performance http with websockets (alternative to express fastify koa hapi and ws)
Stay with react or vue if you're comfy with it. Preact svelte etc have their own set of bugs too, pick your poison.