5 ms·

Using ES7 Decorators as Mixins

16 points by kilimchoi 11y ago

amccloud 11y ago
This works really well with React components
dominotw 11y ago
I want to try decorators but I really dislike javascript classes.
- Bahamut 11y ago
  You don't have to use them with just classes: https://github.com/wycats/javascript-decorators https://github.com/wycats/javascript-decorators
  - dominotw 11y ago
    All the examples seem to be using classes. I think I am missing something here. Can you point me to an example without es6 classes?
elierotenberg 11y ago
One really useful pattern is React higher-order components, eg. https://github.com/elierotenberg/react-nexus#componentgetnexusbindings https://github.com/elierotenberg/react-nexus#componentgetnex... The pattern is function decorate(params) { return (Component) => class extends React.Component { ... // some code using params render() { return <Component {...this.props} /> } }; } my2c.
- mikewhy 11y ago
  I haven't seen that usage for higher-order components before. This is the pattern I've been following: function decorate (Component) { let HigherOrderComponent = React.createClass({ render () { return <Component {...this.props} /> } }) return HigherOrderComponent } as explained here: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 https://medium.com/@dan_abramov/mixins-are-dead-long-live-hi...
  - HeyImAlex 11y ago
    They are the same I think, only one has extra parameters. At least in Python, @fn(...args) evaluates the function first and uses the result as a decorator. The guy who wrote the blog post you mention actually uses the parent's pattern in react-dnd.
Ronsenshi 11y ago
Kinda makes me feel incompetent. Just started using ES6 in nodejs and here are people already gunning for ES7. Amazing.
- jjawssd 11y ago
  Don't get worked up over this. Let the dust settle and the smoke clear. Take a deep breath and relax. You'll need it in the JS community.
- nuxi7 11y ago
  dude, es6 is way too mainstream for cutting edge web programming. If you're not using es7 already you might as well still be using table layouts
  - huxley 11y ago
    I've started writing my own ES9 specification to get a jump on the really cutting-edge stuff, it's influenced by functional languages but only ironically.
- braythwayt 11y ago
  The subtext of this article is that underneath all this glitzy new syntax, class mixins are absolutely nothing new. The semantics are the same. The important thing is to focus on the underlying principles and let the syntax evolve as it wishes.
- girvo 11y ago
  Don't stress, while ES7 is exciting (and I'm using parts of it, async/await alone are worth using) a fair bit of it is still up in the air. Unless there are particular features you'd like (for myself that is async/await and decorators), es6 alone is well worth it.

16 points by kilimchoi 11y ago

amccloud 11y ago

This works really well with React components

dominotw 11y ago

I want to try decorators but I really dislike javascript classes.

Bahamut 11y ago
You don't have to use them with just classes: https://github.com/wycats/javascript-decorators https://github.com/wycats/javascript-decorators
- dominotw 11y ago
  All the examples seem to be using classes. I think I am missing something here. Can you point me to an example without es6 classes?

elierotenberg 11y ago

One really useful pattern is React higher-order components, eg. https://github.com/elierotenberg/react-nexus#componentgetnexusbindings https://github.com/elierotenberg/react-nexus#componentgetnex... The pattern is function decorate(params) { return (Component) => class extends React.Component { ... // some code using params render() { return <Component {...this.props} /> } }; } my2c.

mikewhy 11y ago
I haven't seen that usage for higher-order components before. This is the pattern I've been following: function decorate (Component) { let HigherOrderComponent = React.createClass({ render () { return <Component {...this.props} /> } }) return HigherOrderComponent } as explained here: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 https://medium.com/@dan_abramov/mixins-are-dead-long-live-hi...
- HeyImAlex 11y ago
  They are the same I think, only one has extra parameters. At least in Python, @fn(...args) evaluates the function first and uses the result as a decorator. The guy who wrote the blog post you mention actually uses the parent's pattern in react-dnd.

Ronsenshi 11y ago

Kinda makes me feel incompetent. Just started using ES6 in nodejs and here are people already gunning for ES7. Amazing.

jjawssd 11y ago
Don't get worked up over this. Let the dust settle and the smoke clear. Take a deep breath and relax. You'll need it in the JS community.
nuxi7 11y ago
dude, es6 is way too mainstream for cutting edge web programming. If you're not using es7 already you might as well still be using table layouts
- huxley 11y ago
  I've started writing my own ES9 specification to get a jump on the really cutting-edge stuff, it's influenced by functional languages but only ironically.
braythwayt 11y ago
The subtext of this article is that underneath all this glitzy new syntax, class mixins are absolutely nothing new. The semantics are the same. The important thing is to focus on the underlying principles and let the syntax evolve as it wishes.
girvo 11y ago
Don't stress, while ES7 is exciting (and I'm using parts of it, async/await alone are worth using) a fair bit of it is still up in the air. Unless there are particular features you'd like (for myself that is async/await and decorators), es6 alone is well worth it.