Add Superpowers to your React components using ES7 decorators

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
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
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