First, the links:
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:
Today's place: Jordan
Header: Olive trees along the countryside north of Amman.
Modern Modules, from AMD to ES6
Rewrite all our AMD modules to use ES6 Module syntax.
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 (in Jerash, Jordan)
Migrating to ES6 syntax
Convert some of the more basic constructs in our application from ES5 to ES6.
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:
Feel free to run any additional transforms, but I’ll stop there.
Delicious Kanefeh in downtown Amman
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.
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.