Functional programming for UI

Turn the pyramid of doom into a line of happiness

Transcript

1. Teddy Ku 'VODUJPOBM
   QSPHSBNNJOH
   GPS
   6*
2. 2 Copyright © Merpay, Inc. All Rights Reserved. 5FEEZ
   ,V !ULVJDIPPTFZPV !ULVJDIPPTFZPV 4UBUVT
   
3. 3 Copyright © Merpay, Inc. All Rights Reserved. 'FBUVSF
   0OCPBSEJOH
   UVUPSJBMT
4. 4 Copyright © Merpay, Inc. All Rights Reserved. 'FBUVSF
   0OCPBSEJOH
   UVUPSJBMT
5. 5 0OCPBSEJOH
   UVUPSJBMT Copyright © Merpay, Inc. All Rights Reserved.
6. 6 Copyright © Merpay, Inc. All Rights Reserved. class BalloonView: UIView { var onTapped: (() -> Void)? var contentView: UIView func show() { /* ... */ } func dismiss() { /* ... */ } /* ... */ }
7. 7 Copyright © Merpay, Inc. All Rights Reserved. class ViewController: UIViewController { func showTutorialFlow() { let tutorialOne = tutorialOneBalloonView() let tutorialTwo = tutorialTwoBalloonView() let tutorialThree = tutorialThreeBalloonView() tutorialOne.onTapped = { [weak tutorialOne] in tutorialOne?.dismiss() tutorialTwo.show() } tutorialTwo.onTapped = { [weak tutorialTwo] in tutorialTwo?.dismiss() tutorialThree.show() } tutorialThree.onTapped = { [weak self, weak tutorialThree] in tutorialThree?.dismiss() self?.hideGrayOverlay { } } showGrayOverlay { tutorialOne.show() } }
8. 8 Copyright © Merpay, Inc. All Rights Reserved. class ViewController: UIViewController { func showTutorialFlow() { let tutorialOne = tutorialOneBalloonView() let tutorialTwo = tutorialTwoBalloonView() let tutorialThree = tutorialThreeBalloonView() %PO`U
   XBOU
   UP
   JOTUBOUJBUF
   FWFSZUIJOH
   VQGSPOU 0OMZ
   OFFE
   POF
   WJFX
   BU
   B
   UJNF
9. 9 Copyright © Merpay, Inc. All Rights Reserved. 3FXSJUF
   POF
   WJFX
   BU
   B
   UJNF
10. class ViewController: UIViewController { func showTutorialFlow() { let tutorialOne = tutorialOneBalloonView() tutorialOne.onTapped = { [weak tutorialOne] in tutorialOne?.dismiss() let tutorialTwo = tutorialTwoBalloonView() tutorialTwo.onTapped = { [weak tutorialTwo] in tutorialTwo?.dismiss() let tutorialThree = tutorialThreeBalloonView() tutorialThree.onTapped = { [weak self, weak tutorialThree] in tutorialThree?.dismiss() self?.hideGrayOverlay { } } tutorialThree.show() } tutorialTwo.show() } showGrayOverlay { tutorialOne.show() } } 10 Copyright © Merpay, Inc. All Rights Reserved. Pyramid of doom
11. 11 Copyright © Merpay, Inc. All Rights Reserved. /FTUFE
    DMPTVSFT
    
    )PX
    UP
    EFBM
    XJUI
    UIFN
12. 12 Copyright © Merpay, Inc. All Rights Reserved. 'VODUJPOT
    JO
    GVODUJPOT -FU`T
    VTF
    GVODUJPOT 'VODUJPOBM
    1SPHSBNNJOH
13. 13 Copyright © Merpay, Inc. All Rights Reserved. 5IJOL
    UPQ
    EPXO
    
    8IBU
    XPVME
    UIF
    JEFBM
    TPMVUJPO
    MPPL
    MJLF
14. 14 Copyright © Merpay, Inc. All Rights Reserved. func showTutorialFlow() { let tutorialBalloon = tutorialOneBalloonView() let transitions = tutorialBalloon.onTapped({ inputBalloonView in inputBalloonView?.dismiss() return tutorialTwoBalloonView() }) >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialThreeBalloonView() } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFourBalloonView() } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFiveBalloonView() } >>> { [weak self] inputBalloonView in inputBalloonView?.dismiss() self?.hideGrayOverlay { } return nil } tutorialBalloon.show(onTapped: transitions) } $PNQPTBCMF
    USBOTJUJPO
    GVODUJPOT
15. 15 Copyright © Merpay, Inc. All Rights Reserved. )PX
    XPVME
    XF
    JNQMFNFOU
    UIJT
16. 16 Copyright © Merpay, Inc. All Rights Reserved. typealias BalloonTransition = (BalloonView?) -> BalloonView? // associativity: right infix operator >>>: FunctionArrowPrecedence func >>> (
 transitionOne: @escaping BalloonTransition, 
 transitionTwo: @escaping BalloonTransition) -> BalloonTransition { return { balloonView in balloonView?._nextTransition = transitionTwo return transitionOne(balloonView) } } 1 >>> (2 >>> (3 >>> (4 >>> 5)))
17. 17 Copyright © Merpay, Inc. All Rights Reserved. func >>> (
 transitionOne: @escaping BalloonTransition, 
 transitionTwo: @escaping BalloonTransition) -> BalloonTransition { return { balloonView in balloonView?._nextTransition = transitionTwo return transitionOne(balloonView) } } 1 >>> (2 >>> (3 >>> (4 >>> 5))) func showTutorialFlow() { let tutorialBalloon = tutorialOneBalloonView() let transitions = tutorialBalloon.onTapped({ inputBalloonView in inputBalloonView?.dismiss() return tutorialTwoBalloonView() }) >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialThreeBalloonView() } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFourBalloonView() } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFiveBalloonView() } >>> { [weak self] inputBalloonView in inputBalloonView?.dismiss() self?.hideGrayOverlay { } return nil } tutorialBalloon.show(onTapped: transitions) }
18. 18 Copyright © Merpay, Inc. All Rights Reserved. func showTutorialFlow() { let tutorialBalloon = tutorialOneBalloonView() let transitions = tutorialBalloon.onTapped({ inputBalloonView in inputBalloonView?.dismiss() return tutorialTwoBalloonView() }) >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialThreeBalloonView() } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFourBalloonView() } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFiveBalloonView() } >>> { [weak self] inputBalloonView in inputBalloonView?.dismiss() self?.hideGrayOverlay { } return nil } tutorialBalloon.show(onTapped: transitions) } func >>> (
 transitionOne: @escaping BalloonTransition, 
 transitionTwo: @escaping BalloonTransition) -> BalloonTransition { return { balloonView in balloonView?._nextTransition = transitionTwo return transitionOne(balloonView) } } } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFiveBalloonView() } >>> { [weak self] inputBalloonView in inputBalloonView?.dismiss() self?.hideGrayOverlay { } return nil } -BTU
    UXP
    DMPTVSFT
19. Copyright © Merpay, Inc. All Rights Reserved. { balloon4 in balloon4.nextTransition = { [weak self] balloon5 in balloon5?.dismiss() self?.hideGrayOverlay { } return nil } balloon4?.dismiss() return tutorialFiveBalloonView() } } >>> { inputBalloonView in inputBalloonView?.dismiss() return tutorialFiveBalloonView() } >>> { [weak self] inputBalloonView in inputBalloonView?.dismiss() self?.hideGrayOverlay { } return nil } FYFDVUF
    XIFO
    CBMMPPO
    
    JT
    UBQQFE FYFDVUF
    XIFO
    
    CBMMPPO
    
    JT
    UBQQFE 8IBU
    
    EPFT
    SFUVSOT
    B
    DMPTVSF
    OPU
    BDUVBM
    DPEF
20. Copyright © Merpay, Inc. All Rights Reserved. balloon3.nextTransition = { balloon4 in balloon4.nextTransition = { [weak self] balloon5 in balloon5?.dismiss() self?.hideGrayOverlay { } return nil } balloon4?.dismiss() return tutorialFiveBalloonView() } balloon3?.dismiss() return tutorialFourBalloonView() 
    GVODUJPO
    XJMM
    TFU
    UIF
    DMPTVSF
    UP
    UIF
    QSFWJPVT
    #BMMPPO7JFX 8IBU
    
    EPFT
    OPU
    BDUVBM
    DPEF
21. Copyright © Merpay, Inc. All Rights Reserved. balloon2.nextTransition = { balloon3 in balloon3.nextTransition = { balloon4 in balloon4.nextTransition = { [weak self] balloon5 in balloon5?.dismiss() self?.hideGrayOverlay { } return nil } balloon4?.dismiss() return tutorialFiveBalloonView() } balloon3?.dismiss() return tutorialFourBalloonView() } balloon2?.dismiss() return tutorialThreeBalloonView() 8IBU
    
    EPFT
    OPU
    BDUVBM
    DPEF
22. Copyright © Merpay, Inc. All Rights Reserved. tutorialBalloon.show(onTapped: { balloon1 in balloon1.nextTransition = { balloon2 in balloon2.nextTransition = { balloon3 in balloon3.nextTransition = { balloon4 in balloon4.nextTransition = { [weak self] balloon5 in balloon5?.dismiss() self?.hideGrayOverlay { } return nil } balloon4?.dismiss() return tutorialFiveBalloonView() } balloon3?.dismiss() return tutorialFourBalloonView() } balloon2?.dismiss() return tutorialThreeBalloonView() } balloon1?.dismiss() return tutorialTwoBalloonView() }) 8IBU
    
    EPFT
    OPU
    BDUVBM
    DPEF
23. Copyright © Merpay, Inc. All Rights Reserved. tutorialBalloon.show(onTapped: { balloon1 in balloon1.nextTransition = { balloon2 in balloon2.nextTransition = { balloon3 in balloon3.nextTransition = { balloon4 in balloon4.nextTransition = { [weak self] balloon5 in balloon5?.dismiss() self?.hideGrayOverlay { } return nil } balloon4?.dismiss() return tutorialFiveBalloonView() } balloon3?.dismiss() return tutorialFourBalloonView() } balloon2?.dismiss() return tutorialThreeBalloonView() } balloon1?.dismiss() return tutorialTwoBalloonView() })
24. 24 Copyright © Merpay, Inc. All Rights Reserved. .JTTJPO
    BDDPNQMJTIFE 3FBEBCMF
    DPEF 0OMZ
    POF
    #BMMPPO7JFX
    JO
    NFNPSZ
25. 25 Copyright © Merpay, Inc. All Rights Reserved. $VSSZJOH
    func add(x: Int) -> ((Int) -> Int) { return { y in return x + y } } // Removed in Swift 3 // https://github.com/apple/swift-evolution/blob/master/proposals/0002-remove-currying.md func foo(x: Int)(y: Int)
26. 26 Copyright © Merpay, Inc. All Rights Reserved. typealias Filter = (CIImage) -> CIImage let myFilter = blur(blurRadius) >>> colorOverlay(overlayColor) let result = myFilter(image) *OTQJSBUJPO
    'VODUJPOBM
    4XJGU
    PCKDJP
27. 27 Copyright © Merpay, Inc. All Rights Reserved. 4XJGU
    
    0CKFDUJWF$
28. 28 Copyright © Merpay, Inc. All Rights Reserved. 5IBOL
    ZPV HJUIVCDPNNFSDBSJ#BMMPPO7JFX