General developer forum

Proposal to include ES6 support in Moodle

Picture of Ryan Wyllie
Re: Proposal to include ES6 support in Moodle

Thanks for taking the time to read the tracker issue and replay, Rex. Much appreciated.

ES6 is just improved syntax for JavaScript. You can think of it as more equivalent to upgrading from PHP 5.6 to PHP 7.0 than it is to including a whole new framework, for example.

The benefits are that ES6 includes shorthand operators to perform common operations in JavaScript that would have otherwise needed several lines of code to implement in ES5 (older syntax). Using these new operators leads to less code duplication, less bugs, and shorter/simplified code which ultimately makes it easier to understand and maintain.

Additionally, there is more familiar looking syntax for creating/extending classes so people coming from other languages (such as PHP) can understand the JavaScript quicker because it looks like what they are used to seeing.

30KB sounds like a lot however on a production system that file is heavily cached on local disk and within the browser so it really only adds to the network overhead on the first request. After that it's cached in the browser so it'll no longer be sent from the server.

As I mentioned in the tracker issue, you don't need to run grunt each time you make a change. While developing you can simply run "grunt watch" in your Moodle directory and grunt will watch for changes to your JavaScript files and automatically build those files for you. The only real change to the development process is needing to run "grunt watch" to provide the same experience as we had previously.

With regards to debugging in the browser's development tools when running the site in development mode Moodle will send source maps back to the browser along with the minified code. This allows the browser to map the minified code back to the original unminified source file which means that you will see all of the code in the browser's source tree unminified and you can still add breakpoints, step through the code, etc as you did before. 

I think the experience is actually slightly improved because now the unminified source files are actually split into individual modules and group into directories in the source tree according to their component. This makes it much quicker to find the code you're looking for because you no longer have to scan one giant first.js file.

The build pipeline section was just a set of possibilities. Personally, that is the direction that I'd like to see Moodle moving towards because currently we use quite old technology which forces us to write lots of code to do simple things. This inevitably leads to bugs, slower delivery of features, etc. 

It's not something that is happening right now however almost all new frameworks will use ES6 and require some kind of build process. So having people familiar with ES6 and building their JavaScript now will make further improvements in the future a little easier.

You'll still be able to write JavaScript using ES5 syntax with AMD exactly as you are now. In fact the ES6 modules compile back into ES5 with AMD anyway. So for your university you can continue business as usual. However I would highly encourage you to look up some of the new syntax improvements for ES6 (I linked to them in my tracker issue) because you may find them really beneficial when writing your JavaScript module.

I agree that if the costs outweigh the gains then it isn't worth doing however in this case I feel like there is almost no cost at all while providing a significant gain.

I hope that helps! Thanks again for getting involved in the discussion!

Average of ratings: Useful (1)