My Javascript Tools and Workflow Tips

It’s important for a modern front-end developer to have good tools and workflow that is going to survive the perpetually changing land of frameworks, ES specs, Typescript, and slightlybetterthanwhatyoudidyesterday.js craziness.
I’ve been working with modern JavaScript tools and frameworks for long enough to have nailed down a pretty good workflow, which I’ll share today. The tools I’ll talk about here work with different frameworks, even though I prefer Angular. These are especially important for working with teams using git.
I’ve mostly stolen it from better developers than me, so I take no credit for any of this. Let’s start with the essentials, Node and npm.

Node and npm

Node is basically a JavaScript server that helps you compile and run your code locally. You can do a lot with Node, but I only use it as a local server. I’ve found it’s not important to get deep into Node if you are just going to use it to compile projects locally.
You may already be familiar with npm, it’s a package manager for node.js. It makes it super easy to maintain all of your libraries and dependencies.
For our purposes here, just install Node by downloading the package from their site. That will also give you npm, which you’ll need for pretty much everything.
With Node installed, let’s move on to compiling.

Compiling

If you want to use a modern framework like React or Angular 2, you will need to compile your code before it can be used in a browser. This means you need to update your workflow from writing JS in a text editor and refreshing the browser to see your changes.
This has a lot of advantages, such as running tests, linting, concatenating into one file, compiling .scss, automatic live reload, etc.
There are definitely disadvantages, it makes your workflow more complex. This is just one more thing that can break, and one more thing to learn. However, I think the advantages outweigh the disadvantages. Unfortunately you don’t really have a choice if you want to use the newer frameworks and tools.
There are different ways to compile your projects, my favorite is webpack.

Webpack

With webpack we can compile ES6, JSX, Typescript, Angular 2, Sass, and more into code readable by web browsers. We can also automatically test our code, concatenate all scripts (including libraries) into one single minified .js file, and load up our Node server with live reload. This can all be done running one command in the terminal (boom).
Why webpack instead of gulp or grunt? Webpack is just a config file, you don’t need to write or maintain your own scripts.

The difference with Grunt and Gulp is that the majority of your needs (minification and compilation) can be covered by just adding some configuration, there’s no need to create scripts. – Julien Renaux

So how do you use webpack?
If you Google for ‘how to use webpack’ you’ll get a ton of overly complex articles. Before digging into the weeds, let me give you an easy way to start: use a boilerplate someone else has already configured. It’s as easy as git clone, npm install. Done.
Check out this project to get an intro to webpack, along with Angular 2 and Node. (Just follow the instructions in the readme)
All you have to do is download git clone that project and run npm install. You will get webpack along with all the other dependencies. Try npm run devserver to see the magic happen.
If you want to learn more, check out this tutorial. You can dig into creating/editing your own config files, but there are boilerplates for almost everything to help you get started.

ES6

ES6 is a new spec for JavaScript that introduces new syntax and features. It’s kind of like going from HTML4 to HTML5, it’s got new stuff but it doesn’t invalidate the current stuff.
ES6 is fully approved and it’s coming soon, it’s not some 3rd party library that’s optional. Every JS developer will need to know it. Right now it’s not supported widely in browsers, so you need a compiler to turn ES6 into ES5 like Babel. If you get setup with webpack, compiling happens automatically with no extra effort.
Highlights of ES6 include classes, variable block scoping, arrow functions, and more. This article has a pretty good summary.

Angular 2 or ReactJS

You need to learn one of these frameworks. Even if you don’t use it all the time, you should know how they work in case you have to work with someone else’s code.
Angular 2 and ReactJS are very similar, they both have similar performance, require compiling, and can be used in web and app platforms. I like both of them, but I have settled on Angular 2 mostly because of the Ionic Framework.
Ionic is the best framework for hybrid mobile apps, and it is built on Angular. They are moving to Angular 2, and with it’s integration with NativeScript, I could see fully native Ionic apps in the near future.
A lot of people love React, and it’s great. Your choice.
At the end of the day you need to have a good knowledge of Node, npm, ES6, and compilers like webpack. If you do that, and learn a good framework, you’ll be up to date with the latest Javascript technologies.
At least until tomorrow when something cooler comes out.