Functional programming for UI

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