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

[starlingforge]

I am poking around for a new tool to learn as a mainly backend developer and coming to the conclusion that HTML, CSS and JS seem to be yesterday's options. I'm left wondering; if you were learning today and wanted to get proficient fast, what would you learn? Typescript? React? Vue? Purescript? Bucklescript? Bulma? Bootstrap 4? (to only name a few)

I realize there are categories such as styling kits, frameworks or UI libraries, but are there any that stand out as diamonds in the rough for quality of developer life or productivity rate in their category or overall?

[otras]

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

[BlackjackCF]

Same here. I went from front end when Angular was starting to pop up, but Angular never really clicked with me for some reason. I went into backend and platform development. Popped my head back into front end development recently. React is just such a pleasure to work with and exactly the way I've always wanted to be able to build front ends. (This sounds kinda dramatic, but it's true...)

[iKSv2]

Hi,

Any link you'd suggest for a starter in UI who wants to start with React JS and has worked always in backend (PHP / DB / OS stuff when developing)?

I am aware of JS and do minor contributions to libraries but those are very basic level (compared to what library of the size of ReactJS)

[soneca]

JS is not "yesterday's option", quite the contrary. The same for HTML and CSS. If you want to be proficient fast, you should focus on a good foundation on all three.

But if you are past that, I would suggest Vue. I have not used it myself, but lots of colleagues tell wonders about how easy, comfortable and fast it is to built things on it.

There are doubts about it being production-ready for larger companies and projects, but it seems to be the king of productivity nowadays.

[Corrspt]

I work mostly with EmberJS (www.emberjs.com) as my Single Page Application (SPA) framework and I really like my productivity.

Ember has 3 core projects (Ember, Ember-CLI, Ember-Data) that deal with Routing, Data Store, Build Tooling, Templates, everything you need to build a SPA application. Things are built to work together so most of the times, things just work.

The framework has been around since 2011 and keeps getting better/modern. I've started an app in 2015, with Ember 1.13, and I've been upgrading since (currently on 3.0).

There are a lot of community addons for most situations (date-pickers, select, deploy, analytics, etc... you can get a sense by browser ember-observer.com)

[ptdel]

I haven't really worked with any client-side languages before, so I picked up Elm because it was similar to other languages I'd used in the past. It's got a unique approach to things and an incredibly active community. It's adoption is not as widespread though. Most of my coworkers swear by React and Vue.

[starlingforge]

Does Elm's charm wear off if you aren't already a functional programmer? What were your favorite learning resources?

[ptdel]

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.

[collyw]

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.

[starlingforge]

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/ ?

[hluska]

I tend to argue that it's important to learn the base technologies (HTML, CSS and JS) before you jump into any frameworks. I've found that without a solid base in those three, it's too hard to debug problems.

After that, I'd pick one of Angular, React or Vue and see where it takes you.

[a-saleh]

If I had to do a project, probably vue or just vanila-js.

If I wanted to learn more, I really liked the purescript book [1]. It made many concepts I wanted to learn in Haskell click. I am not sure I would be confident enough to try to deliver a project in it, but I know some people do, I really liked the presentation of Claudia Doppioslash contrasting Elm and Purescript [2]

[1] https://leanpub.com/purescript/read

[2] https://www.youtube.com/watch?v=ngWo5e-294o

[zumu]

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.

[spectrum1234]

Try Styled Components.

[Theophraustous]

I personally love Angular (Not AngularJS) + TypeScript. If you can get along with how opinionated it is, you will be rewarded with a quick development time and great looking project that is easy as pie to manage.

Vue doesn't seem to be robust enough yet for larger projects, and I personally just don't fancy React's syntax.

If you want to just be able to get from 0 understanding of front-end to making a working demo, you really need basic HTML/CSS/JavaScript. It's like trying to write a book before you learn to read.

[devxpy]

We really need something like flutter for the web now.

I'm sick of writing markup and stylesheets (react jsx is basically html with a little sparkle).

Flutter integrates styling markup and business logic in such a wonderful way, I've never witnessed. It results in an extremely productive development cycle.

And then there's the intellij integration which is just crazy good.

Bottom line I never have to think about styling and logic differently. Almost no context switches. With stuff like react, there's at least 3, maybe 4 context switches.

[shubham_sinha]

I code mostly in React. But I find Vue to be more productive. Bulletproof routing and state management.

I use React because I mostly develop React Native apps and React web apps. Vue doesn't have anything close to React Native. React has a slight edge over Vue when compared to availability of components(npm packages). Thus I maintain JS sanity.

[turtlebits]

For small projects, I still use AngularJS. Ridiculous productivity and no build system. Of course it has it's warts, but it's my go-to for personal projects or MVPs/demos.

I've been meaning to learn Vue but haven't had the time.

[iLemming]

Clojurescript. Everything else is just too painful to use.