Using ES7 Decorators as Mixins

#1

Post by kilimchoi » Fri, Jun 26, 2015, 6:24 PM UTC

Using ES7 Decorators as Mixins
raganwald.com

Re: Using ES7 Decorators as Mixins

#2

Post by amccloud » Fri, Jun 26, 2015, 8:23 PM UTC

This works really well with React components

Re: Using ES7 Decorators as Mixins

#3

Post by dominotw » Fri, Jun 26, 2015, 9:23 PM UTC

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

Re: Using ES7 Decorators as Mixins

#4

Post by Bahamut » Fri, Jun 26, 2015, 9:42 PM UTC

dominotw wrote: post #3

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

You don't have to use them with just classes: https://github.com/wycats/javascript-decorators

Re: Using ES7 Decorators as Mixins

#5

Post by elierotenberg » Fri, Jun 26, 2015, 9:49 PM UTC

One really useful pattern is React higher-order components, eg. 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 
      }
    };
  }

my2c.

Re: Using ES7 Decorators as Mixins

#6

Post by mikewhy » Fri, Jun 26, 2015, 10:29 PM UTC

elierotenberg wrote: post #5

One really useful pattern is React higher-order components, eg. 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 } }; } my2c.

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 
        }
      })
      
      return HigherOrderComponent
    }

as explained here: https://medium.com/@dan_abramov/mixins-are-dead-long-live-hi...

Re: Using ES7 Decorators as Mixins

#7

Post by HeyImAlex » Fri, Jun 26, 2015, 11:03 PM UTC

mikewhy wrote: post #6

elierotenberg wrote: post #5

One really useful pattern is React higher-order components, eg. 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 } }; } my2c.

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 } }) return HigherOrderComponent } as explained here: https://medium.com/@dan_abramov/mixins-are-dead-long-live-hi...

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.

Re: Using ES7 Decorators as Mixins

#8

Post by Ronsenshi » Fri, Jun 26, 2015, 11:22 PM UTC

Kinda makes me feel incompetent.

Just started using ES6 in nodejs and here are people already gunning for ES7. Amazing.

Re: Using ES7 Decorators as Mixins

#9

Post by jjawssd » Sat, Jun 27, 2015, 12:38 AM UTC

Ronsenshi wrote: post #8

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

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.

Re: Using ES7 Decorators as Mixins

#10

Post by nuxi7 » Sat, Jun 27, 2015, 1:32 AM UTC

Ronsenshi wrote: post #8

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

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