jpeterson-esristaff

How to Tame your Web App - ES6 and Modern Modules

Blog Post created by jpeterson-esristaff Employee on Mar 7, 2017
First, the links:

Crowdsource Reporter Repo: https://github.com/esri/crowdsource-reporter

My Migration Repo: https://github.com/jpeterson/crowdsource-reporter

 

Where we are

This is the second part in a seven-part blog series called How to Tame your Web App. Here’s where we are:

  1. The Plan
  2. ES6 and Modern Modules (you are here)
  3. Module Bundling 101
  4. Module Bundling 201 - Optimization
  5. Linting
  6. UX and DX: The Best of Both Worlds
  7. Legacy Support - coming soon

 

Today's place: Jordan

Header: Olive trees along the countryside north of Amman.

 

AmmanAmman, Jordan (taken from Al Qasr Metropole Hotel)

 

Modern Modules, from AMD to ES6

The Plan

Rewrite all our AMD modules to use ES6 Module syntax.

 

The Reason

The ES6 Module specification has been approved and is part of JavaScript. While an ES6 Module loading spec has not been finalized – we can prepare for the future by writing code according to the new spec now and using a module bundler to fill the temporary gap.

 

The Commits

https://github.com/jpeterson/crowdsource-reporter/pull/1/commits

 

The tool we’re going to use here is called amd-to-es6. It simply converts AMD modules into ES6 modules via the command line (I’m assuming you have NodeJS already installed, and are at least familiar with npm).

 

It doesn’t get much easier than this. Simply:

> npm install amd-to-es6 –g

 

Then run the tool. In my case, the command was:

> amdtoes6 --dir js/ --out js/

 

Note that if your app uses Dojo’s Module Identifiers (i.e. the “package” property in your dojoConfig), you will need to update your new import statements to use relative paths instead of package names. The Crowdsource Reporter used this feature of the Dojo Loader, and here is the commit where I had to manually update module paths.

 

That’s it for the AMD to ES6 Modules step. Relatively painless, right? Unfortunately, since browsers don't support ES6 Modules yet, we’ve entered a dark time where our app is inoperable, which means we can’t really test our progress. Let’s trudge ahead; we’ll have a functioning app back up in no time.

 

Arch of Hadrian

Arch of Hadrian (in Jerash, Jordan)

Migrating to ES6 syntax

 

The Plan

Convert some of the more basic constructs in our application from ES5 to ES6.

 

The Reason

ES6 is the current version of JavaScript. Writing ES6 is delightful, and I think you’ll enjoy it.

 

The Commits

https://github.com/jpeterson/crowdsource-reporter/pull/2/commits

 

For this step, we’re going to use an awesome tool called Lebab (yes, that is Babel backwards). As the name aptly implies, this tool does the opposite of Babel – it transpiles your ES5 code into ES6. It works by running individual transforms on your code to address one ES6 feature at a time. You can pick and choose which transforms you want to run. Grab Lebab with a quick:

> npm install lebab -g

 

Next, we’ll run some transforms (if you're following along with my commits: my apologies for running all the transforms in one go… I highly recommend you run them one at a time and check the output to make sure things look okay).

 

Here is my recommended order:

  1. arrow
  2. let
  3. template
  4. obj-shorthand

 

Feel free to run any additional transforms, but I’ll stop there.

 

Kanefeh

Delicious Kanefeh in downtown Amman

 

I want to call out something Dojo-specific here. Dojo is over 10 years old, which means it does some things that were very necessary at the time, but have since been accomplished natively by JavaScript. Let’s call these “language functions” (hint, a lot of them live in dojo/_base/lang).

 

Probably the most infamous of these language functions is dojo/_base/lang:hitch, which helps handle scope. There are others though, like most of dojo/_base/array. Many of these functions were written when JS couldn’t do certain things (efficiently) on its own, but ES6 (and even ES5) has added basic support for a lot of them.

 

Understandably, Lebab doesn’t know about Dojo, so it can’t convert lang.hitch into an arrow function or array.forEach into a plain array.prototype.forEach. If you’re interested in teaching Lebab about Dojo, it would be pretty rad to build some Dojo-specific Lebab transforms… The Lebab project welcomes contributions.

 

If you are interested in converting some of these language functions, I would recommend putting a bookmark on it and continuing at least until we have a functioning app again, then revisit them.

 

Alright, we’ve brought our app up to date with the current version of JavaScript!

 

In the next post, we’ll get our app back up and running by translating our awesome ES6 modules into something browsers can understand.

 

On to part 3 of this series, Module Bundling 101.

Outcomes