best way to convert ES6 syntax to ES5 ?

[espace]

hi,

i have start my project with ES6 syntax, but for exporting to cocoon.io in canvas mode it must be ES5 syntax.

What's the easier way to do that ? (i have try with babeljs but without success)

if not i rewrite all with ES5 syntax but it's not convenient.... Another question why coding in Es6....finally is there a good benefit with mobiles games?

[gafami]

I believe that you should convert whole your ES6 scripts to ES5 right now. It's not just  for export to cocoon, to make sure your game works well on Safari iOS (8, 9), iOS HomeScreen Web App you need to build based on ES5 syntax (almost browser supported).  No worries if you have spent hard-work for ES6. Just go to this page: https://babeljs.io/repl

Tick ES2015 and paste your ES6 script into the left side box, they will help you convert it to ES5. My game https://www.iomgame.com/wariom/ also facing the problem like you. Hope it can help you.

I attach an example file from my game you can try it again on babeljs with these options: linewrap + es2015 + stage-2 

Don't rewrite the script because it's wasting time. Your logic code and animation way you choose  will decide performance on mobile games not ES6 or ES5.

example.js

[mattstyles]

Oooo, this thread could get flamey! Ha ha.

There are numerous advantages to using ES6, a quick google search will give you heaps of reasons, with the only con being that you probably have to up the complexity to transpile back to es5/3, however, all modern browsers support most of ES6 (and newer) syntax so unless you're supporting really old browsers (and you stick solely to ES6) then you probably don't need to transpile.

The biggest advantages of ES6 (for me, and I've missed loads here):

* ES6 was pushed through to create more complex applications, as such it has a lot of syntax that is more useful for doing so. Some are sugar methods only, some actually provide newer functionality (particularly those related to primitives and/or the DOM).

* New built-in extensions which make many tasks way way easier (and easier means less error-prone)

* Sugar methods mean less dev typing which generally means less mistakes. Some things ES6 makes easy are very very hard in ES5 and they are often things devs rely on regularly so making them easier to work with means writing code is less error-prone and reading code is clearer so you can focus on what your code does, not how it does it.

The biggest advantages of setting up a transpilation pipeline are (again, I'm missing loads):

* Access to a module system

* Access to whatever new syntax you want

The con of a transpilation system is increased project complexity and you have introduced a build step which takes some time to run, as your project grows this sometimes becomes prohibitive but you do have to have a very large project for this to happen and most modern build tools abstract away incremental builds and caching i.e. they only re-build the changes so incremental builds become smaller and faster.

Another con is related to the module system. Modules are awesome, very awesome. However, JS doesn't (yet) natively support them in the browser and even when they do there are additional problems i.e. if you use modules heavily (as you probably should) then your list of dependencies could easily be hundreds or even thousands of files, loading each of these one by one in the browser isn't a good idea and won't be in the foreseeable future.

A module system also implies that you need some way of getting dependencies. This isn't technically necessary but is often helpful. If you are writing games then often you'll be using one (or maybe two) large frameworks to help, unless they work nicely with a dependency management system (i.e. NPM) then I wouldn't worry about getting them as 'real' modules, just include them on the page and use them, then use a module system for your own code if you want to.

Newer syntax and mobile games

Any gaming is typical performance sensitive, newer syntax has a few things to consider:

* Browsers are well optimised for ES5, this isn't always true to ES6 (although ES6 is pretty good now as its fairly old and almost universally adopted in browsers)

* Given the above, transpiling is often better for performance

* The code generated by these tools during transpilation is superb, it is written by many many superb developers and has great community support so the hours invested in it must be astronomical i.e. in many cases these tools will write better code than you or I do!

* It is not a silver bullet -> if perf is a concern for you then you are still largely the sole arbiter of whether you achieve your perf goals.

How to use newer language features:

Babel is the defacto tool (although it isn't your only option). Babel requires a bit of setup work and additionally requires you to set up a build process for your code. Again, there is tooling for this. Additionally, there are many project scaffolds out there (and tools for creating them) that can abstract this away.

The absolute easiest way of getting access to these new language features but supporting older browsers is to use parceljs.

Parcel abstracts away most of the complicated build stuff and has a superb feature set. It involves a few pre-requisites:

* You must know how to run simple commands from the command line

* You must have Node and NPM installed

Once you have these things (which is generally true of any JS build system you might want to employ) then running builds is a simple one-line command. A watch task is also bundled in, this is another simple one-line command to run and watches the file system, every time you save a change it rebuilds only what has changed and propagates that to the browser. Parcel relies heavily on caching and multi-threading so is very very fast.

Other tools include webpack (which is very complicated, although newer versions I think make things way way easier for most use-cases) and browserify (which is simpler in scope, but can feel a little low-level for many people).