Day 2 – Node, Gulp, and ES2015


Ohh my!

In the last post, I said we were going to look at ES2015. Unfortunately, the latest version of JavaScript is not fully supported by browsers yet. Even worse than that, ES2016 is just around the corner with even newer features that aren’t supported by browsers. So, what can we do? We are left with two basic options. We can either only do what is supported by the browsers, or we can write using the new features and then convert our code to a version that the browsers do support. 6 figure developers can’t afford to sit around and wait on the browsers, so we are going to take charge and write the new code now.

How to transpile

ES2015 can be converted (transpiled) to ES5 using a few different utilities. One of those ways is Babel. Babel is a transpiler written in JavaScript and run in Node. Another transpiler is TypeScript. TypeScript has some very neat features. Including generics and named types. Because TypeScript was created by Microsoft, we could very easily choose to go with it for this project. I, however, have decided to use Babel as it is more customizable to the feature set that we want to use. TypeScript has some ES2016 features and some Microsoft only features that we are not trying to focus on just yet.

Using Babel

We could run Babel against every javascript file in our application manually, but that would be tedious and take a long time. So, we are going to use a build system. There are several build systems available to us that will run our javascript tasks. The first build system that I learned was Jake. After Jake I moved to Grunt. My stay in Grunt was short lived as I soon found Gulp. Lately the buzz on the internet that I have been seeing is to skip using a build system all together and instead use NPM Scripts. For this journey into ES2015, I think we will use Gulp as I am currently most familiar with it, and because Gulp is already included in the project template we used in Visual Studio.

Running Gulp Tasks

First, if you haven’t already, install Node. Once Node is installed, In Visual Studio, right-click on the gulpfile.js in the Solution Explorer and open the Task Runner Explorer.
TaskRunnerExplorerMenu

TaskRunnerExplorerView
The Task Runner Explorer is a shortcut to Gulp and Grunt tasks that you can use in Visual Studio to run the tasks we have configured. Double-clicking on a task with execute it. By default we are provided with clean and min tasks. Clean tasks usually will remove and of the already modified files from the deploy directory. Lets look at the code in the gulpfile to see how this works.
GulpfileCleanTask
Looking at line 29, we can see that the clean task is made of two other tasks. Clean:js and clean:css are defined above the clean task and are calling rimraf on paths and passing a callback. Rimraf is a node module that will simply delete whatever path you hand it. Looking further up in the gulpfile you can see were the paths are defined and what directories are being cleared out.
GulpfilePaths

Before Babel

We also want to be able to ES2015’s module system. Since no browsers support doing this and a javascript library must be used on the front end to support it. There are several for accomplishing the task of modularizing our post transpilation ES5. Browserify will turn the modules into commonJS format for us and allows us to bundle them all together. SystemJS is a dynamic module loader that will work with ES2015, AMD, and CommonJS modules. Finally, RequireJS will load the modules from the server to the browser and works with AMD modules. I am not going to make a decision on which of these modules systems to use right now. If anyone has one that they would like to see used, leave a comment and we will most likely go with the highest number of suggestions. Otherwise, I will decide which module system to use next time.

So much to do, so little time

As you can see, we didn’t really accomplish anything this post. We looked at a few options and started to make a few decisions. That is how this project will go some weeks. There are times in any software project where progress will slow to a halt because a decision needs to be made or because some boiler plate needs to be written. In this project, the decision of which transpliler to use and which module system to use are fairly significant. So, I want to make sure we spend a little bit of time choosing something that will fit the needs that we can foresee. Next time we will choose our module system and start writing our first ES2015 code.


Please Consider Sharing This Post:

FacebooktwitterredditlinkedinFacebooktwitterredditlinkedin