Ask HN: Learning FE web dev as a BE engineer

[fzingle]

I've spent my entire career doing backend systems engineering (C/C++/Rust/Java). On occasion I'd find myself wanting a UI, so I'd reach for Qt.

But it seems more and more that it would be really useful to learn web development. The web is ubiquitous these days, and tools like Tauri take some of the smell out of Electron, so it can be pressed into device on the desktop.

It seems all the FE web dev guides are about learning the latest flavour of the month (React, Angular, Vue, etc...) and not about understanding how any of it works, what design patterns are useful, performance trade-offs, etc...

Is there a "FE dev for the experienced system engineer" type of resource?

[acemarke]

Yes! I have a blog series that I wrote, entitled "How Web Apps Work". It covers a variety of aspects of web dev, but with a particular focus on the client side. I specifically wrote it to help devs with Java/C++ experience get a feel for the key terms and concepts of web dev:

https://blog.isquaredsoftware.com/series/how-web-apps-work

You may also find my "JS for Java Devs" slides useful - they're a cheatsheet style overview of JS syntax, concepts, and the ecosystem:

https://blog.isquaredsoftware.com/2019/05/presentation-js-fo...

I've also put together a large list of additional learning resources for JS, React, Redux, and TypeScript, as part of the Reactiflux Discord website:

https://www.reactiflux.com/learning

[austincheney]

First ask yourself if you want to learn UI to build products or achieve employment. The distinction is monumental.

Employment route:

Learn React. Then React stuff like Next.js, GraphQL, Redux, and whatever. Your code will be short, declarative, and possibly OOP.

Actually build stuff route:

Avoid all the bullshit. You don’t need it. This work takes practice but it isn’t that hard if you can actually program.

Avoid OOP where possible. It buys you nothing in JavaScript and will make your code much larger. Simply don’t use this keyword. Get cozy with functions and the concept of functions as first class citizens (they can go anywhere and contain anything).

You can write code with interactions faster than OS desktop equivalents with JavaScript in the browser (presuming the latest hardware and drawing less than 50,000 nodes simultaneously) if you know what you are doing. Get cozy with the DOM, especially the old static methods. Everything else is sugar on top of it. Query selectors are slow. The DOM is a tree so walking that tree requires a formal appreciation of node relationships and your code will be highly imperative.

Understand events. Event handlers receive an implicit event object that probably contains everything you need. With a thorough understanding of events and custom event declarations you can write user interaction automation.

[muzani]

I've always been so frustrated that the route to building stuff is so starkly different to the employment route.

[rozenmd]

These "flavour of the month" examples have been around and solid for over 5 years now.

For evaluating the differences between frameworks, pick a simple project and implement it in each framework.

In my own experience, I rewrote my personal blog from HTML to React - and that was enough to land my first React job. To keep learning, I kept making side projects in React while employed full time.