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 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
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.
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.
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 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 least until tomorrow when something cooler comes out.