Ask HN: Front End Development 2022

I've been happy working as a back end developer my whole career, but now I want to learn front end development. It's a little daunting since the space is so large and things change so fast.

I have 2 questions:

1. If you were to start a new product and had complete control of the front end stack, which tech would you choose and why?

2. What are some good resources (books, tutorials, etc.) to learn front end development in general (patterns, best practices, etc.) or the tech in particular.

* Transmission - I am using HTTP to request assets into the page, I have managed to reduce my total asset requests down to only 4. Other than that I am using websockets for absolutely everything, because the way I am using websockets is 8x faster than HTTP. Its like all the benefits of gRPC without the frustration of protobuf. It isn't just faster its also way easier to manage from the application code because there is no round trip and no callback/promise/await on transmission. Just fire and forget.

* Automation - I am automating the shit out of it. I am automating my documentation, bundling, compilation, and a few other things as much as possible in my build step, which is under 4 seconds. I use TypeScript to type absolutely every declaration. I use TypeScript-ESLint to enforce use of TypeScript declarations and a bunch of custom rules to eliminate known bad practices like "this", bind, call, and apply.

* Framework - What a dirty word. I am not using any of this nonsense. TypeScript is good enough. I have a simple 4 step solution for state management, otherwise I just work directly to the DOM and my current application is an OS GUI. Don't knock it til you try it.

* Performance - You don't know how slow you are until you measure things with numbers. Today I managed to reduce my page load time with state restoration (an OS GUI in the browser) from about 300ms to 192ms by eliminating a CSS reflow and removing 90%+ instances of innerHTML. In the browser the performance tab/graph in the developer tools is fantastic. In Node I prefer to write my own performance tools that typically intertwine with test automation. I eliminated the css reflow by visually hiding all dynamically rendered elements until everything is fully built into the DOM. To dynamically size things vertically I removed some JavaScript arithmetic based upon parent container clientHeight and instead am using CSS min-height:100%.

Front end dev here, formerly full stack. For moderate to high complexity apps, I would choose Next.js on Vercel for its incredible developer experience relative to either vanilla JS or React without Next.

If you don't care about React (for its popularity) it might also be worth considering other frameworks.

I would remove as much of the backend as possible and store whatever I could on the edge and use serverless functions extensively (also built into Vercel and Next). Failing that, I would outsource the backend to a headless CMS or a managed database. I would abstract as much of it as possible instead of having to manage containers and VMs.

Javascript is incredibly powerful these days and the backend can often just be a dumb data store. Vercel is incredibly innovative and IMHO one of the two companies really pushing the Web forward (the other being Cloudflare).

My rationale is that this stack allows you to spend the vast majority of your code on business logic instead of infrastructure.

You can write each page in a few minutes, git push, and it's automatically built and hosted and cached. Stacks that used to take days to set up now takes mere minutes. It's so much better than it was even 4 or 5 years ago.

Next took me from hating React and JS to falling in love with it. I enjoy every new project I write in this stack, something I've never experienced before in any other language, frontend or back. It feels like the only stack that was designed with developer experience in mind. It's purpose built for web apps.

The Vercel CEO https://twitter.com/rauchg/status/1603965931293536257 and I would agree.

Also, many others and I would leverage a few extras. Typescript is practically a given these days, preventing a huge class of compilation and runtime bugs. Along with TailwindCSS for much improved styling, and NextAuth for auth.