First of all i’m VERY fascinated about EmberJS. This is brilliant framework, but thats obvious. Thank you all for your work.
I’m thinking about native classes syntax in Ember. There will be some advanteges when we will be able to use ES6 syntax: 1: We will be able to use JSDoc without any confusions. 2: We will be able to extend every libraries/modules (i mean reusable by many frameworks) without limits in Ember. For example i could have config.js::
export default class {
data = {...};
getValue(key) { ... }
}
Above config class could be used both in node.js and emberJS app. And we could even add some mixins at the Ember App side by extending this config. Ofc it’s possible today to use above code in ember, but thats just example how it could looks like also for Ember classes.
3: In the current notation:
export default Ember.Component.extend({
someProm: 'abc',
someMethod: (attr) => {
return attr === 0;
}
});
Both properties and methods are considered by IDE’s as properties. 4: It looks like true classes and looks clearer and is easier to understand by developers who are trying to switch to ember, even from other languages like PHP/ActionScript.
I know that this is not possible to implement every Ember features in plain ES6 ATM without any plugins, EmberJS is definetly ahead of current EcmaScript features.
The ES6 notation which i’m thinking about is:
export default class extends Ember.Component {
someProp = 'abc';
someMethod(attr) {
return attr === 0;
}
}
I’ve tested above code and i’m surprised that this already works well (after i moved someProp definition to constructor)! But there are some limitiations already to write code with native ES6 syntax: 1: It’s not possible to use mixins. I know that our guru - Yehuda Katz - is the author of Decorators (proposal to implement in EcmaScript): Decorators proposal. And i hope it will be released soon to allow us to use mixins in native ES6 syntax ;). 2: It could be difficult to use computed properties. But luckily there is already Ember addon named: ember-computed-decorators which allows to use decorators to define computed properties. This is great notation, thank you again, Yehuda Katz that you’ve invented Decorators in JS! 3: I couldn’t imagine how to implement actions in the ES6 syntax, but maybe it will be some tricky way to do that. 4: Still class properties aren’t included into ES6 syntax. They are still in stage2 (Draft).
Some of above problems can be already solved by Babel Transpiller. Babel already supports decorators (by legacy plugin named: regenerator-plugin-transform-decorators-legacy). Also babel supports ES6 class properties. So in theory we can use new syntax today! Of course only in theory, because there are still 2 problems which i can’t solve ATM: 1: How to define actions in new syntax? 2: Ember-CLI is still using babel5, so i think we should wait untill it will support babel6. I don’t know how to use babel presets and plugins (which enables class properties and decorators) in current ember-cli version. The progress of implementing babel6 in ember-cli is available here: Babel 6.0 · Issue #5015 · ember-cli/ember-cli · GitHub.
Anyway, i think we are really close to achieve new syntax in Ember ;). Maybe it’s just my personal opinion about how it would looks like, and maybe current syntax can be consider as perfect and will not be changed. I will be glad for any opinions in this discussion.