Can I use EcmaScript 6 by default now?

[mychiilist 3]

Hi, it's been a while since I've been in web development world, including HTML5 for games.

I'm just wondering if I can finally use EcmaScript 6 features by default (class, let, const, extends, etc.)? How about you?

If not, what are the transpilers that you can recommend me?

Thanks

[javalang 87]

Good question, I also asked this by myself. Normally I use typescript and set the transpiler to ES6, and in the html pages I also use ES6 syntax, no problems detected so far...

If you're writing plain js-files, the advantage of typescript is, that the syntax is nearly the same than ES6 (and you have the big advantage of type checking) and you can switch to ES5 immediately if requred.

Hope that helps,

Cheers

 

 

[mattstyles 667]

You can check compatibility here, its extremely well maintained. All modern browsers support most of the ES6 spec.

To give an alternative view of Typescript I'd say be extremely wary of type checking, whilst type checking can be very useful (it would be better if Typescript had runtime hooks like Flow does rather than purely build-time) its mostly for developer comfort and documentation, it catches almost no bugs in dynamic languages, so keep up with writing your test cases etc etc etc and moves you further away from spec (more relevant than ever before to stay close to spec). It's always frustrating to see a code-base riddled with <any> when a developer either gets lazy or can not work out what type of object their function expects, bit of a code smell to be honest but indicative of banging a square peg into a round hole. Type checking in JS is slowly gaining a bit of popularity and its been going for long enough its unlikely to be a bubble, just don't expect it to be a silver armour that protects you from any nasties because it isn't.

[alex_h 114]

One big element that is largely missing though is module support

http://caniuse.com/#feat=es6-module

so you'll likely want to use a module bundler like webpack.

https://webpack.js.org/

If you do want to use features that aren't yet supported in browsers then Babel is normally the preferred choice.

http://babeljs.io/

[mychiilist 3]

Thanks for the response guys. I'll start off with ES6 by default now, with Babel in consideration as it uses native syntax.

I've used TypeScript and I loved it. But then I went into problem when importing 3rd party libraries as I may have to create my own header files, that's why I really look forward for the native one. Babel is nice when it comes to this.

Regarding to module, the good thing is, of all features, module support is the least I need as I have my own compiler to combine the classes (by files) automatically.

Cheers!

[alex_h 114]

10 minutes ago, mychiilist said:

the good thing is, of all features, module support is the least I need as I have my own compiler to combine the classes (by files) automatically.

Great that you have your own tools, but it's worth pointing out here that there is more to modules than just concatenation. It's perfectly possible to code without using them but I'd recommend reading up a bit on them as they are quite widely used so worth understanding in more detail.

[mattstyles 667]

I absolutely echo what alex_h has said, module systems like browserify, webpack, rollup et al do much much more than simple file concatenation. It'll also prep you for when modules are usable 'natively'.

[mychiilist 3]

Yeah I know them. Just so people not wondering, mine is not just a simple concatenation; it automatically put orders depending on the inheritance hierarchy (Just like Java and not like TypeScript that forces you to use file references and end up in circular reference issue just like in C++ headers). The script gets simpler thanks to ES6. I also have my own way to do namespaces (if that's what anyone means by other useful thing by modules) just like C++ namespace.

So, until now I'm not sure how module could work for me. I've used Dart.js before (I believe it has the exact same way of module) and I didn't really buy it. Maybe until it works just like Node.js require, but even Node.js require multiple files, which is a different case that I'd rather have a single, public, obfuscated core file in client-side.

I like the idea of using the module to be prepared natively as it is unavoidable, but that's what I felt about ES6 4 years ago. I'll check again further maybe when it is useful later, 2019 or 2020. One at a time.

[mattstyles 667]

Browserify is made to shim node's flavour of commonJS for the browser. It turns each module (file) into a separate function and then either invokes them or invokes them early and stores the response to use as dependencies (thinking about it, it must be the latter of those options to mock node's dependency cache). This avoids circular refs. Webpack, I think, does something similar but has a different delivery method and I've no idea about Rollup.

Some of the more useful things, which the webpack community is exploring probably most fervently, is stuff like tree-shaking and other optimisations. I've tried out some of these optimisations and, to be honest, they aren't very mature. For example, lodash is a prime candidate for tree shaking but current generic implementations (i.e. at the webpack/rollup level, I've tried tree shaking with both several times as part of R&D) provide significantly larger builds than doing it at the AST level (i.e. via a babel plugin) although usually smaller than without it (I did get a situation where setting up tree shaking somehow increased the size of the bundle).

Part of the problem of comparing browserify and webpack against Typescript and Dart is that the former communities are far far larger then the latter with many more devs working with the tech and developing it, plus, both Dart and Typescript have many other concerns to further thin the effort. The difference and maturity between dedicated module tooling and other stuff that includes modules is vast so no wonder you were unimpressed with TS and Dart.

Your system certainly sounds interesting though, have you got it in a repo somewhere?

[alex_h 114]

@mychiilist - sorry, sounds like I misunderstood your tools capabilities.

While we're on the topic I just came across some interesting reading about native module support in browsers here https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/