Ask HN: What front end tools do you find yourself most productive with?

JQuery or plain Javascript.

I am in the same boat backend dev who needs to do some front end. I now have an app to maintain with an Angular monstrosity on the front end. I can see why everyone dropped it, I am still trying to work out where all the hype came from 5 or 6 years ago.

If you are looking for employment options then React seems to be the way to go.

Yep, I haven't heard a lot of great things about Angular and my JQuery itself is a bit rusty so I figured I'd start fresh with something new. React seems more robust than Vue on close inspection, but maybe harder to learn. I hate CSS and HTML is often excessively tedious to me so a UI kits are looking attractive. Has anyone used Sketch plus https://ant.design/ ?

I was familiar with Haskell but I wouldn't consider myself a functional programmer, most of my career has been on the Object Oriented side of things. I actually found it to be quite approachable. It's charm has stayed so far as I've found it offers a lot of advantages in terms of code re-use. The elm-lang.org resources, hosted Core lib documentation were most of what I've used. They have live examples in a web repl that is helpful. I would recommend checking with their git though as the pace of the languages development can go through spurts.

I use React and TypeScript.

I'm very productive with React, but I've also had a lot of practice with the React style of thinking (data passed down from parents, state management, JSX syntax). There are tools that make your life easier, like create-react-app[0], that let you focus on learning the framework and not worry about the process (webpack, babel, etc.).

When learning something new, especially when there are so many ever-changing tools for front end work, I'm a fan of limiting the scope of new material to just the thing I'm focused on understanding. Similarly, you'll see React and Redux as a unit nearly everywhere, but it's worth it to work with and learn React on its own before adding the additional learning curve of Redux. I find it's important to understand the problem a tool is solving before adopting that tool. Kind of like building a web app without a framework to understand why it's helpful!

I also use TypeScript, but not to make me more productive in the short-term. It actually takes a little more time for the initial development, but I view it as a worthy investment that benefits the next person to work with the code, be it another developer or me in a few months.

[0] https://github.com/facebook/create-react-app

React + CSS modules is a good place to start.

The CSS modules is to teach you how to write CSS that is tightly scoped, but something like BEM or styled components could do the same thing. Avoid global styles.

I'd also learn a tiny bit of functional programming. JS isn't quite a functional language, but lends itself nicely to simple functional patterns. React is also explicitly functionally influenced. Think composition over inheritance. Don't go overboard.

TypeScript or Flow for type checking are probably a good idea. TypeScript is far more supported, but kind of encourages the OO style. I prefer Flow, but most will say TypeScript won.

I will also say VSCode is a really great editor for JS and front end development.