Migrating to ES2015 and beyond °1

I’ll make a post every week about my progress & challenges migrating a large code base and adapting to this new fancy syntax!

Have you been working with javascript for years? did someone just come up to you and ask you the following question Have you started using ES2015?. A month ago my answer would be no. Yes, I have played around with it before but i always thought to myself, browser support is not there yet. But the truth is that you can use it today! There are a number of compilers out there, like babel for example, that will compile your ES6 code so it runs on legacy browsers etc, I’ll explain more later. 1 week ago I did the first migration to ES2015 and put some code on production. I now feel that the feature is present!

browser support isn’t there yet. Or is it ?

Series introduction

So what I’ll do in this series is to post some of the challenges and steps I take to migrate a code base with 1000's of lines of code multiple library dependences to the new fancy syntax, and some of the tools i will use in the process. Hopefully you’ll learn something new, I know I will while doing this migration! I’ll use some live examples in this series and some easy steps you can follow!

First of all, what is a compiler? And why do you need it?

Browser support is not 100% there yet for the new fancy ES6 syntax, so you would need a compiler to support all browsers. Basically what the compiler will do is turn your ES6 code into executable ES5 syntax.

Chapter 1

Let’s automate things

I will use a simple stack in the first posts to get started, no fancy frameworks in the beginning just vanilla JS. For automation i prefer Gulp, but you can choose whatever you prefer. I assume you have Node & Gulp installed, but if not, just install node and run this in your terminal.

npm install gulp -g

Getting started with gulp

1. Before we start compiling we need to install some packages and define our base folder structure.

$ mkdir test_es6 && cd test_es6
$ mkdir dev && mkdir prod
$ npm init
$ npm install --save-dev gulp-babel babel-preset-es2015

2. In your project create a new file and name it gulpfile.js.

3. Creating your first automation script

// gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
var paths = {
    dev_JS: 'dev/js/**/*.js',
    prod_JS: 'prod/js/'
} 
gulp.task('default', function() {
    gulp.start(['compile_scripts']);
    gulp.watch('dev/js/**/*.js', ['compile_scripts']);
});
gulp.task('compile_scripts', function() {
    gulp.src(paths.dev_JS)
        .pipe(babel({presets: ['es2015']})
        .pipe(gulp.dest(paths.prod_JS));
});

Start listen by typing $ gulp in the terminal

This script will simply listen for changes inside dev/js/, when a change has happened we pipe babel and compile our ES6 code. After that we move the production ready code to prod/js. Simple stuff so far, and if you haven’t played around with automation with javascript, congratulations! That was not hard right? :)

In the next step I will show some great ways to use the new cool functionality in ES2015, I’ll share what I like, and what I don’t like! Stay tuned!

Next step: Lets play around with ES6!

To be continued.