class Human {
constructor(name) {
this.name = name
}
speak() {
console.log(`Hi! My name is ${this.name}`)
}
}
ES 6 classes
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
function log(message) {
return console.log(message)
}
arrow functions
ES7 decorators
and we’re back
https://tc39.github.io/proposal-decorators
Slide 20
Slide 20 text
class decorators
class method decorators
ES7 decorators
Slide 21
Slide 21 text
syntax
class Title extends React.Component {
render () { return
hello {this.props.name}
}
}
Slide 22
Slide 22 text
class className {
func() {}
}
syntax
Slide 23
Slide 23 text
@class-decorator
class className {
@class-method-decorator
func() {}
}
syntax
Slide 24
Slide 24 text
class className {
@class-method-decorator
func() {}
}
class method decorators
Slide 25
Slide 25 text
class Human {
constructor(name) {
this.name = name
}
speak() {
console.log(`Hi! My name is ${this.name}`)
}
}
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
...
speak() {
console.log(`Hi! My name is ${this.name}`)
}
}
const siddharth = new Human('siddharth')
siddharth.speak = () => {console.log('Hi! My name is dum dum')
Slide 28
Slide 28 text
...
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
Slide 29
Slide 29 text
class Human {
constructor(name) {
this.name = name
}
@readonly
speak() {
console.log(`Hi! My name is ${this.name}`)
}
}
@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
Slide 35
Slide 35 text
class Human {
constructor(name) {this.name = name}
useAngular() {
console.log('writing angular code')
}
}
siddharth.writeAngular()
// writing angular code
Slide 36
Slide 36 text
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
const deprecate = (target, key, descriptor) => {
const original = descriptor.value
const name = `${target.constructor.name}.${key}`
}
Slide 39
Slide 39 text
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)
}
}
Slide 40
Slide 40 text
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
}
Slide 41
Slide 41 text
class Human {
constructor(name) {this.name = name}
@deprecate
useAngular() {
console.log('writing angular code')
}
}
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
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
import {readonly} from 'core-decorators'
class Human {
constructor(name) {
this.name = name
}
@readonly
speak() {
console.log('Hi! My name is ' + this.name)
}
}
core-decorators
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
class decorators
class method decorators
ES7 decorators
Slide 54
Slide 54 text
@class-decorator
class className {
func() {}
}
class decorators
Slide 55
Slide 55 text
@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
Slide 56
Slide 56 text
@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
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
HOC: design pattern
higher order components
Slide 59
Slide 59 text
A higher-order component is a function that takes a component and
returns a new (modified) component.
class Label extends React.Component
Slide 60
Slide 60 text
HOC = class decorators
Slide 61
Slide 61 text
class Title extends React.Component {
render () { return
hello {this.props.name}
}
}
Slide 62
Slide 62 text
class Title extends React.Component {
render () { return
hello {this.props.name}
}
}
/*
</Post>
/*
Slide 63
Slide 63 text
@loading('name')
class Title extends React.Component {
render () { return
hello {this.props.name}
}
}
/*
</Post>
/*
HOC
Slide 64
Slide 64 text
@loading('name')
class Title extends React.Component {
render () { return
hello {this.props.name}
}
}
const loading = key => target => class extends React.Component {
}
HOC
Slide 65
Slide 65 text
@loading('name')
class Title extends React.Component {
render () { return
hello {this.props.name}
}
}
const loading = key => Component => class extends React.Component {
}
HOC
Slide 66
Slide 66 text
@loading('name')
class Title extends React.Component {
render () { return
hello {this.props.name}
}
}
const loading = key => Component => class extends React.Component {
render () {
if (this.props[key]) return loading...
}
}
HOC