4 min read Anna

So You Want to Build an App in ES6, Part One

What is ES6 and what does it mean for development?

There's a lot of talk about ES6. There's a lot of discussion about using ES6 as soon as this summer hits. There are tons of people discussing it and how to use it in your projects. So many, that it seems daunting at first glance. Maybe daunting enough to stop you from looking further into it.

What is ES6?

ES6 is the new version of JavaScript that is set to start hitting production as soon as this summer. It stands for ECMAScript 6 (Harmony), and is going to replace ECMAScript 5 (ES5) as the new standard for JavaScript. Most people are familiar with ES5, since it is the current default and has been in production environments for a few years now.

Why Does Everyone Want To Use It?

With ES6 comes a lot of new functionality and a larger featureset. This includes fun things like Generators, Symbols, and Arrow Functions. The new functionality takes heavily from functional programming and C#-style object oriented programming concepts. As JavaScript becomes a more widely used language for development, we've seen the increased need for a current, standardized set of features and functions.

Why Did I Make the Switch?

It took me a little while to jump on the bandwagon for ES6. It was difficult to break out of my normal mode of ES5 development. However, with some pushing, prodding and beating with a stick from my friend @TomNeyland, I finally made the switch about six months ago. It was not an easy task to make the switch. It took a lot of time, a lot of hand holding, a lot of Googling, and so much banging my head against my desk it's a surprise that I don't have more migraines.

In light of all of this, it turns out that ES6 is surprisingly nice. I come from a long background of object oriented programming. JavaScript does a lot of things in a much different way than I expected. There's no real concept of objects in the way someone with a C/C++ background understands them. There's no static typing (which may be "fixed" with TypeScript.) ES6 strives to change this and make programming in JavaScript comfortable to a lot of people with different backgrounds.

What Did This Mean to My Front End Development?

Jumping on the ES6 bandwagon, while difficult at times, has significantly improved my ability to put out code. Not only are things easily re-usable, I can write code in a way that makes sense to me as a C/C++ developer.

I am now able to write code, inject it as necessary, build it into a single file, and never have to worry about if I forgot a dependency or messed up a class. The build stack I use, and the one we are going to discuss in this series, is like using RequireJS, but better in nearly every respect.

My friend @stvnkslr brought up a good point about Browserify and RequireJS. The difference between Require and Browserify is pretty huge in terms of the code you need to write.

In plain JavaScript, there is no concept for importing another file. In order to do this, you'd have to manipulate the DOM to add a new script node, and then change the source, and then add an event handler for when the source finishes loading.

In RequireJS, you can import dependencies using their format:

requirejs(['helper/util'], function (util) {
  // Use 'util' variable for the functionality in this function
  // it will be loaded as needed.
});

Compare this to the ES6 syntax (that Browserify uses) for imports:

import Util from './helper/util';

What Do You Need For This Series?

This series expects a few things from you.

First, you should be familiar with JavaScript. The topics we will be covering won't necessarily be the most advanced use cases, but they will not be simple "Hello World" type things.

Second, you should be familiar with using some build tools, including NodeJS, NPM, Grunt or Gulp. These will be used to help automate development as much as possible, while still giving you the ability to customize things as you need.

Third, you should be familiar with using unit testing tools. I use Karma/Jasmine on top of PhantomJS for testing needs. These aren't the end-all be-all of testing suites, but they work quickly, they work easily, and they work.

Fourth, you should be familiar with AngularJS. We will be using AngularJS in this series, including controllers, services, and directives. Being able to build these things is going to be important to understanding how to set up your application for the future.

Finally, you should have some experience using the command line. I cannot stress enough how important being able to do even simple things on the command line is in terms of helping you quickly do things in your projects.

This series hopes to teach you a few things.

  1. How to set up your environment for building an application.
  2. How to use tools like Browserify, Babelify, and Partialify to transpile ES6 code into ES5 code that your web application can consume on a majority of consumers' devices.
  3. How to properly set up your application directories to speed performance, allow a more modular build system, and extend existing functionality.
  4. How to set up your unit tests with Karma and Jasmine.

What's Next?

Anna Poulakos

I'm the Solution Architect at a top ed tech company.
United States