4 ms·

As a back-ender looking to dabble with modern front-end development best practices, I'm encouraged to find guides like this one. Even if the array of available

by czep 10y ago

As a back-ender looking to dabble with modern front-end development best practices, I'm encouraged to find guides like this one. Even if the array of available packages and tools appears dizzying, and often times faddish, it's nice to see the many options laid out rather concisely. I have a decent handle on React and some of its immediately related tools, which has greatly improved my fluency with contemporary front end work. I may not ever use all these tools, but again it's helpful to see their setup illustrated in an easy fashion. Apart from React, what would be the next most important tool to pickup?

pault 10y ago
The good news is that it can all be broken down into view library, state management, transpiler, build tools, and test framework. Almost all of these tools fit one or more of these categories. If you pick the one or two most popular libraries from each of these categories and build a toy app using them, you'll be 90% of the way there. The stack listed in this article is the current vogue. If you're not already using webpack with react, I would recommend putting the time in to learning that. It's a beast and the documentation leaves a lot to be desired, so you'll have to supplement your education with a lot of google searches, but it's quite powerful and flexible. React has come to dominate the ecosystem so rapidly that for the medium term you're probably fine just sticking with that, and learning complementary tools like various flux or relay/graphQL implementations. Angular is the only other tool I regularly run into as a freelancer, but this is less and less often. Almost all the clients I've worked for in the last six months have wanted react. Of course there are many more exotic stacks that some people swear by, but if your goal is to cover the largest percentage of the job market possible, react and angular will get you there with a minimum of effort.
dwaltrip 10y ago
I would look at adding SCSS to your workflow. It makes writing maintainable stylesheets much easier. The two biggest wins from using SCSS, in my opinion, are the variables and the ability to nest selectors. The node-sass package (on NPM) comes with a command line tool, so you don't even need to add a separate build tool. I have an NPM script that executes: node-sass -w styles/app.scss -o dist/ The -w flag tells the tool to stay in "watch" mode, such that it will auto recompile your SCSS code into CSS whenever a change is made.

by czep 10y ago

pault 10y ago

The good news is that it can all be broken down into view library, state management, transpiler, build tools, and test framework. Almost all of these tools fit one or more of these categories. If you pick the one or two most popular libraries from each of these categories and build a toy app using them, you'll be 90% of the way there. The stack listed in this article is the current vogue. If you're not already using webpack with react, I would recommend putting the time in to learning that. It's a beast and the documentation leaves a lot to be desired, so you'll have to supplement your education with a lot of google searches, but it's quite powerful and flexible. React has come to dominate the ecosystem so rapidly that for the medium term you're probably fine just sticking with that, and learning complementary tools like various flux or relay/graphQL implementations. Angular is the only other tool I regularly run into as a freelancer, but this is less and less often. Almost all the clients I've worked for in the last six months have wanted react. Of course there are many more exotic stacks that some people swear by, but if your goal is to cover the largest percentage of the job market possible, react and angular will get you there with a minimum of effort.

dwaltrip 10y ago

I would look at adding SCSS to your workflow. It makes writing maintainable stylesheets much easier. The two biggest wins from using SCSS, in my opinion, are the variables and the ability to nest selectors. The node-sass package (on NPM) comes with a command line tool, so you don't even need to add a separate build tool. I have an NPM script that executes: node-sass -w styles/app.scss -o dist/ The -w flag tells the tool to stay in "watch" mode, such that it will auto recompile your SCSS code into CSS whenever a change is made.