Add Superpowers to your React components using ES7 decorators

Add Superpowers to your React components using ES7 decorators

Ea26ebbe66c3bb6afb5f711cfe766dff?s=128

Siddharth Kshetrapal

January 14, 2017
Tweet

Transcript

  1. add superpowers to your React components with ES7 decorators

  2. javascript architect @ practo @siddharthkp

  3. ES7 decorators stage 2 https://tc39.github.io/proposal-decorators

  4. https://babeljs.io/docs/plugins/transform-decorators/ npm install babel-plugin-transform-decorators-legacy --save

  5. but, first template literals ES 6 Classes arrow functions

  6. const firstName = 'siddharth' const lastName = 'kshetrapal' const fullName

    = firstName + ' ' + lastName Template literals
  7. const firstName = 'siddharth' const lastName = 'kshetrapal' const fullName

    = firstName + ' ' + lastName const fullName = `${firstName} ${lastName}` Template literals
  8. class Human { } ES 6 classes

  9. class Human { constructor(name) { this.name = name } speak()

    { console.log(`Hi! My name is ${this.name}`) } } ES 6 classes
  10. class Human { constructor(name) { this.name = name } speak()

    { console.log(`Hi! My name is ${this.name}`) } } const siddharth = new Human('siddharth') siddharth.speak() // Hi! My name is siddharth ES 6 classes
  11. function log(message) { return console.log(message) } arrow functions

  12. function log(message) { return console.log(message) } const log = (message)

    => { return console.log(message) } arrow functions
  13. function log(message) { return console.log(message) } const log = message

    => { return console.log(message) } arrow functions
  14. function log(message) { return console.log(message) } const log = message

    => console.log(message) arrow functions
  15. function log(message) { return function () { return console.log(message) }

    } arrow functions
  16. arrow functions function log(message) { return function () { return

    console.log(message) } } const log = message => { return () => { return console.log(message) } }
  17. arrow functions function log(message) { return function () { return

    console.log(message) } } const log = message => { return () => console.log(message) }
  18. arrow functions function log(message) { return function () { return

    console.log(message) } } const log = message => () => console.log(message)
  19. ES7 decorators and we’re back https://tc39.github.io/proposal-decorators

  20. class decorators class method decorators ES7 decorators

  21. syntax class Title extends React.Component { render () { return

    <div>hello {this.props.name}</div> } }
  22. class className { func() {} } syntax

  23. @class-decorator class className { @class-method-decorator func() {} } syntax

  24. class className { @class-method-decorator func() {} } class method decorators

  25. class Human { constructor(name) { this.name = name } speak()

    { console.log(`Hi! My name is ${this.name}`) } }
  26. class Human { constructor(name) { this.name = name } speak()

    { console.log(`Hi! My name is ${this.name}`) } } const siddharth = new Human('siddharth') siddharth.speak() // Hi! My name is siddharth
  27. ... speak() { console.log(`Hi! My name is ${this.name}`) } }

    const siddharth = new Human('siddharth') siddharth.speak = () => {console.log('Hi! My name is dum dum')
  28. ... speak() { console.log(`Hi! My name is ${this.name}`) } }

    const siddharth = new Human('siddharth') siddharth.speak = () => {console.log('Hi! My name is dum dum') siddharth.speak() // Hi! My name is dum dum
  29. class Human { constructor(name) { this.name = name } @readonly

    speak() { console.log(`Hi! My name is ${this.name}`) } }
  30. syntax @decorator = function const decorator = (target, key, descriptor)

    => { }
  31. const readonly = (target, key, descriptor) => { }

  32. const readonly = (target, key, descriptor) => { console.log(target, key,

    descriptor) } /* Human {}, 'speak', { value: [Function: speak], writable: true, enumerable: false, configurable: true } */
  33. const readonly = (target, key, descriptor) => { descriptor.writable =

    false return descriptor }
  34. @readonly speak() { console.log(`Hi! My name is ${this.name}`) } }

    const siddharth = new Human('siddharth') siddharth.speak = () => {console.log('Hi! My name is dum dum'} siddharth.speak() // Hi! My name is siddharth
  35. class Human { constructor(name) {this.name = name} useAngular() { console.log('writing

    angular code') } } siddharth.writeAngular() // writing angular code
  36. class Human { constructor(name) {this.name = name} @deprecate useAngular() {

    console.log('writing angular code') } } siddharth.writeAngular() // speak@Human: this feature will be deprecated soon! // writing angular code
  37. const deprecate = (target, key, descriptor) => { }

  38. const deprecate = (target, key, descriptor) => { const original

    = descriptor.value const name = `${target.constructor.name}.${key}` }
  39. const deprecate = (target, key, descriptor) => { const original

    = descriptor.value const name = `${target.constructor.name}.${key}` const message = 'this feature will be deprecated soon!' descriptor.value = () => { console.log(`${name} : ${message}`) original.apply(this, arguments) } }
  40. const deprecate = (target, key, descriptor) => { const original

    = descriptor.value const name = `${target.constructor.name}.${key}` const message = 'this feature will be deprecated soon!' descriptor.value = () => { console.log(`${name} : ${message}`) original.apply(this, arguments) } return descriptor }
  41. class Human { constructor(name) {this.name = name} @deprecate useAngular() {

    console.log('writing angular code') } }
  42. class Human { constructor(name) {this.name = name} @deprecate useAngular() {

    console.log('writing angular code') } } siddharth.writeAngular() // speak@Human: this feature will be deprecated soon! // writing angular code
  43. class Human { constructor(name) {this.name = name} @deprecate('will be deprecated

    in v2.0.0') useAngular() { console.log('writing angular code') } } siddharth.writeAngular() // speak@Human: will be deprecated in v2.0.0 // writing angular code
  44. syntax @decorator = function const decorator = (target, key, descriptor)

    => { } @decorator(argument) = higher order function const decorator = (argument) => { return (target, key, descriptor) => { } }
  45. syntax @decorator = function const decorator = (target, key, descriptor)

    => { } @decorator(argument) = higher order function const decorator = argument => (target, key, descriptor) => { }
  46. @deprecate = function const deprecate = (target, key, descriptor) =>

    { const original = descriptor.value const name = `${target.constructor.name}.${key}` const message = 'this feature will be deprecated soon!' descriptor.value = () => { console.log(`${name} : ${message}`) original.apply(this, arguments) } return descriptor }
  47. @deprecate(message) = higher order function const deprecate = message =>

    (target, key, descriptor) => { const original = descriptor.value const name = `${target.constructor.name}.${key}` const message = 'this feature will be deprecated soon!' descriptor.value = () => { console.log(`${name} : ${message}`) original.apply(this, arguments) } return descriptor }
  48. @deprecate(message) = higher order function const deprecate = message =>

    (target, key, descriptor) => { const original = descriptor.value const name = `${target.constructor.name}.${key}` message = message || 'this feature will be deprecated soon!' descriptor.value = () => { console.log(`${name} : ${message}`) original.apply(this, arguments) } return descriptor }
  49. don’t fret

  50. jayphelps/core-decorators npm install core-decorators --save

  51. import {readonly} from 'core-decorators' class Human { constructor(name) { this.name

    = name } @readonly speak() { console.log('Hi! My name is ' + this.name) } } core-decorators
  52. import {time} from 'core-decorators' class Human { constructor(name) { this.name

    = name } @time('speak') // Human.speak-0: 1.582ms speak() { console.log('Hi! My name is ' + this.name) } } core-decorators
  53. class decorators class method decorators ES7 decorators

  54. @class-decorator class className { func() {} } class decorators

  55. @type('mammal') class Human { constructor(name) { this.name = name console.log('I

    am' + this.name + ', a ' + this.type) } } /* class Dolphin class Crocodile class Fish */ class decorators
  56. @type('mammal') class Human { constructor(name) { this.name = name console.log('I

    am' + this.name + ', a ' + this.type) } } const type = value => target => { // add {type: value} to the target class } class decorators
  57. None
  58. HOC: design pattern higher order components

  59. A higher-order component is a function that takes a component

    and returns a new (modified) component. class Label extends React.Component
  60. HOC = class decorators

  61. class Title extends React.Component { render () { return <div>hello

    {this.props.name}</div> } }
  62. class Title extends React.Component { render () { return <div>hello

    {this.props.name}</div> } } /* <Post> <Title name="..."/> </Post> /*
  63. @loading('name') class Title extends React.Component { render () { return

    <div>hello {this.props.name}</div> } } /* <Post> <Title name="..."/> </Post> /* HOC
  64. @loading('name') class Title extends React.Component { render () { return

    <div>hello {this.props.name}</div> } } const loading = key => target => class extends React.Component { } HOC
  65. @loading('name') class Title extends React.Component { render () { return

    <div>hello {this.props.name}</div> } } const loading = key => Component => class extends React.Component { } HOC
  66. @loading('name') class Title extends React.Component { render () { return

    <div>hello {this.props.name}</div> } } const loading = key => Component => class extends React.Component { render () { if (this.props[key]) return <Component {...this.props} else return <div>loading...</div> } } HOC
  67. https://github.com/acdlite/recompose npm install recompose --save

  68. import {withProps} from 'recompose' recompose

  69. import {withProps} from 'recompose' @withProps({name: 'world'}) class Title extends React.Component

    { render () { return <div>hello {this.props.name}</div> } } recompose
  70. import {withHandlers, compose} from 'recompose' const handlers = withHandlers({ onClick:

    props => event => mixpanel.track('Clicked', props) }) recompose
  71. import {withHandlers, compose} from 'recompose' const handlers = withHandlers({ onClick:

    props => event => mixpanel.track('Clicked', props) }) const analytics = compose(handlers) recompose
  72. import {withHandlers, compose} from 'recompose' const handlers = withHandlers({ onClick:

    props => event => mixpanel.track('Clicked', props) }) const analytics = compose(handlers) @analytics class Title extends React.Component { render () { return <div>hello {this.props.label}</div> } } recompose
  73. import {onlyUpdateForKeys} from 'recompose' @onlyUpdateForKeys(['name']) class Title extends React.Component {

    render () { return <div>hello {this.props.name}</div> } } /* <Post> <Title {...props}/> </Post> /* recompose
  74. class Title extends React.Component { constructor () {} /* javascript

    constructor */ css () {} /* css constructor ? */ render () { return <div>hello {this.props.name}</div> } } rant/wish
  75. None
  76. https://github.com/siddharthkp/css-constructor npm install css-constructor --save

  77. import css from 'css-constructor' class Title extends React.Component { constructor

    () {} @css` font-size: 16px; color: {this.props.colors}; &:hover {color: #FFF;} @media {max-width: 480px} {&: font-size: 18px;} ` render () { return <div>hello {this.props.name}</div> } } css-constructor
  78. @css(styles) = higher order function const css = styles =>

    (target, key, descriptor) => { } css-constructor
  79. @css(styles) = higher order function const css = styles =>

    (target, key, descriptor) => { const prettyCSS = process(styles) // fill props, media queries, etc. const cssClass = getUniqueClassName(prettyCSS) document.head.styles += {cssClass: prettyCSS} return componentWithClassName(cssClass) } css-constructor
  80. Fin.

  81. @siddharthkp