Experiment with ECMAScript 6 on Babylon.js with TypeScript 1.5
This article is part of a Microsoft web development series. Thank you for supporting the partners who make SitePoint possible.
Thanks to TypeScript, we were able to improve quality of our code, improve our productivity and create our fabulous playground we are so proud of: http://www.babylonjs-playground.com/, which provides auto-completion in the browser! We were also able to welcome new team members from a C # background and some painless JS skills. But thanks to the TypeScript compiler, we can also test the future without rewriting a single line of code!
We still code babylon.js using Visual Studio and TFS while regularly pushing our code to the github repository. By developing our project towards Visual Studio 2015 RTM, we were able to upgrade it to TypeScript 1.5.
When done let me show you how fast I have upgrading Babylon.js from ES5 to ES6. Right click on your project, navigate to “Building TypeScript“And rock the”ECMAScript version”From ES5 to ES6:
And that’s all!
Recompile the solution and you can test the future of ES6 today.
I posted an ES6 version from babylonjs.com here to let you play with it.
Microsoft Edge and ES6
You will notice that you need a very recent modern browser such as Microsoft Edge to be able to run this demo and code. Microsoft Edge and Firefox 41 are currently the most advanced browsers supported by ES6. You can check the current support of your ES6 browser here.
Throw it in Microsoft Edge on Windows 10 (build 10240), you will have these results:
67% of ES6 features supported in MS Edge and 68% in Firefox 41 out of the box. These results are impressive!
Yet if you run the ES6 version of Babylon.js in MS Edge you will see errors in F12:
Let’s navigate to babylon.math.js to check for the error. We fall here:
The “classify“The keyword” is not yet supported for production. This is because the specification changed recently and therefore all browsers put it behind a flag.
If you run the ES6 Compatibility Tool again: http://kangax.github.io/compat-table/es6/, you will now see that MS Edge upgrades to 81% ES6 functionality supported. It now supports classes, supers, and generators:
For this demo to work in Firefox or Chrome, you will probably need a nightly build.
It’s time to play with it in F12
Now that Microsoft Edge is properly configured, navigate to: http://www.babylonjs.com/indexES6.html/ and open F12 in a separate window. In the “Debugger“Tab, open”babylon.gamepadCamera.js»And define a Breakpoint on the line of code “super”:
Launch the “Manor“Demo and switch the camera to”Gamepad Camera“:
You will enter the code correctly as expected:
hurry F11 to jump into the extended class (BABYLON.FreeCamera):
You are currently debugging ES6 code! Isn’t that cool? 🙂
In the “Debugger“Tab, open”babylon.virtualJoystick.js”And set a breakpoint on line 78 inside the arrow function:
Switch the camera to “Virtual camera joysticks“, Touch the screen or left click on it and you will be able to debug the arrow function:
Restart the browser. Now add this line of code to the previous handle “
let foo = 'test'»And repeat the previous action:
Ok, let’s recap. This demo uses: ECMAScript 6 with Classes, Super & Arrow Functions, WebGL, Web Audio, Gamepad API, and Pointer Events. Thanks Babylon.js, thanks TypeScript and thanks Microsoft Edge! 😉
If you’re interested in other improvements we’ve made to F12, check out this article: Announcing the latest enhancements for F12 Developer Tools in Windows 10
We encourage you to test on different browsers and devices, including Microsoft Edge – the default browser for Windows 10 – with free tools at dev.modern.IE:
In-depth technical learning on Microsoft Edge and the web platform by our engineers and evangelists:
More free cross-platform tools and resources for the web platform: