ES6 Conversion Guide

1. Preconditions

Make sure you have a copy of the free Visual Studio Code editor installed and are using it to convert the classes. Visual Studio Code has some handy tools that will be used throughout this conversion guide.

2. Conversion Steps

2.1 Convert Constructor

The first step is to convert the old constructor function to the ES6 constructor. All old constructors are defined like the image below.

Visual Studio Code has a feature that allows you to convert this to an ES6 constructor. To do so, copy the highlighted part shown below to your clipboard and then delete it from the file.

If you hover over the name of the class, Visual Studio Code should give you the following option:

After converting, the class should now look something like this:

Paste the part you had copied in the previous part before the “Class (YOURCLASSNAME)” part. This should look something like this:

The next step is to implement inheritance. Check for the df.DefineClass function in the file. The second parameter in this function is the super class.

In this instance, the super class is df.WebBaseDEO.

Go back to your class definition and add the following after your class name:

extends YOURSUPERCLASS

This should look like the following:

There is one final step to get the constructor function working. The following line should be changed from:

to:

2.2 Move Functions to the Class

The next step is to move all the functions defined inside of df.DefineClass inside of the class we have just created. Copy all functions inside of df.DefineClass and paste them right below the closing bracket of the constructor. After you have done this, you can remove df.DefineClass from the file.

Visual Studio Code should now give you a bunch of errors that can be resolved quite quickly. For this to work efficiently, make sure all formatting is correct. This can be done with the SHIFT+ALT+F key bind.

The first error we will resolve has to do with the function syntax.

To fix this, highlight the following part of the function:

Right-click it and select “Change all occurrences.” Now press backspace. All errors related to the function syntax should now be fixed.

The next error we will solve has to do with ending all functions with a comma.

To fix this, highlight the following part.

Right-click again and press “Change all occurrences.” Now press backspace and retype “}.” All functions should now end like this.

This does, however, replace some commas in places that it should not, such as in some timeout functions. Visual Studio Code should tell you where missing commas are.

Add the commas back in the places where they should be.

All syntax errors should now be gone. Press SHIFT+ALT+F again to make sure all indentation is correct.

2.3 Fixing Super Calls

The last step is to fix the super calls. In the old JavaScript framework, super calls were done like the code below.

This should be changed to super.FUNCTIONNAME(paramshere). The keyword ‘this’ no longer needs to be passed during this super call. This will look something like the following two examples.

Check the file for all remaining super calls in the old syntax and replace them with the new one. That should be all you need to do to convert a JavaScript file to ES6.