Ask HN: Where to start with getting back into front end?
14 comments
The basics are the same as they've been for a long time. You can easily build a working front end app using html/css/js in a single file. Build a few projects so you can familiarize yourself with modern apis without the burden of tooling.
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.
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.
Our team uses hooks only, as we found classes distasteful. Most projects can be built without redux, too. React + tailwind goes a long way, lol, but yea redux has its own use case if and only if you need it
I don't think hardly anyone uses classes anymore, but classes vs hooks are implementation details. The important thing is the react compositional model, and it's easiest to learn that without any other tooling.
I'm sure redux has a few use cases, but the primary use case I've seen is "I've coded myself into a corner and I don't want to refactor anything."
I'm sure redux has a few use cases, but the primary use case I've seen is "I've coded myself into a corner and I don't want to refactor anything."
Yeah, it's a mess. Learn CSS. For real. Use the cascade, it's there for a reason. CSS has variables and animations and can even do interactivity. Vanilla JS will take you far if you learn it thoroughly. (MDN[0] is your friend) ES Modules exist and work natively in the browser. Use them to organize your code. React is crazy popular, learning it is good to have it on your résumé if nothing else, but it needs huge and slow dev tooling. If you want a framework, use Preact[1] (React but tiny, if you use it with htm[2] you won't need a build step) or Svelte[3]. Babel isn't needed unless you are targeting old browsers, and even if you are Closure Compiler[4] works better.
[0]: https://developer.mozilla.org/
[1]: https://preactjs.com/
[2]: https://github.com/developit/htm
[3]: https://svelte.dev/
[4]: https://developers.google.com/closure/compiler/
[0]: https://developer.mozilla.org/
[1]: https://preactjs.com/
[2]: https://github.com/developit/htm
[3]: https://svelte.dev/
[4]: https://developers.google.com/closure/compiler/
My advice is to learn some React/Redux, and then don’t use it.
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...
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...
Things have started stabilizing. React is a clear winner in the framework wars (but there are some promising new upstarts). I'd build a small app in React and go from there. Next.js is extremely easy to get started with out of the box.
Webpack is still a nightmare but things like snowpack et al try to remove some of that complexity.
Webpack is still a nightmare but things like snowpack et al try to remove some of that complexity.
Yea react is lindy in terms of stability (for us). There's esbuild now which is high performant alternative to webpack babel snowpack rollup, try it out folks.
The wars are over, the component abstraction won. Angular, React, VueJS and Svelte all begin squarely with the UI component. They only differ in their syntax and structure for wrapping up CSS, HTML, and JS/TS into a unit.
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.
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.
IMO React kind of epitomizes modern front-end/Node full-stack development (for better or worse) so I think if you want just one thing to focus on, focus on React. Once you get past the stage of basic React stuff, you will naturally run into all of these other tangential topics (Babel, SSR, isomorphic fetch, Svelte, Webpack, general JS craziness if that’s what you’re looking for)
Esbuild (replacement of webpack and babel for js transpiling and bundling)
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.
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.
I was in a similar position and the book Rediscovering JavaScript helped me understand syntax and structural changes, which made learning about new frameworks and tools easier.
Had a quick look at it. It skims/oversimplifies some important aspects that are famous in JS community to cause all sorts of issues down the line. Maybe you don't know JS would be better?
Would recommend mdn javascript docs any day. Every once in a while i forget something, i just google "mdn array sort" or some variant of it for my problem, and the answers there are clear
I am a fan of Svelte
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.