TEA++

TEA で SPA を色々やって遊ぶ

Transcript

1. TEA++
   &WPMWJOHUIF&MN"SDIJUFDUVSF
   !KJOKPS
   

   View Slide

2. !KJOKPS
   :PTVLF5PSJJ
   "VUIPSPGʮجૅ͔ΒΘ͔Δ&MNʯ
   8SJUJOH&MNBU*EFJO*OD
   1SPpMF
   

   View Slide

3. 5&"
   

   View Slide

4. 5IF&MN"SDIJUFDUVSF
   

   View Slide

5. )551
   $PVOUFS
   'PSN
   5&"JTFBTZ
   

   View Slide

6. 3FVTBCMF$PNQPOFOUT
   41" *ODSFNFOUBMTFBSDI
   'PSNWBMJEBUJPO
   8FC4PDLFU
   -PDBM4UPSBHF
   3FTQPOTJWF %BUF1JDLFS
   0"VUI
   $PPLJF
   $PFEJUJOH
   (SBQI2-
   'JSFCBTF
   .JDSPTFSWJD
   
   VOUJMXFGBDFSFBMQSPCMFNT
   

   View Slide

7. 41"JTEJ⒏DVMU
   

   View Slide

8. 4JNQMF"SDIJUFDUVSF
   ʴ
   $PNNVOJUZT1SBDUJDF
   

   View Slide

9. 4JNQMF"SDIJUFDUVSF
   ʴ
   $PNNVOJUZT1SBDUJDF
   

   View Slide

10. )JTUPSZPG5SJBMTBOE&SSPST
    

    View Slide

11. 5&" .PEFM6QEBUF7JFX
    
    3FEVY
    /FTUFE$PNQPOFOUT
    4UBSU"QQ&⒎FDUT *OUSPEVDF$NE
    
    /P/FTUFE$PNQPOFOUT
    /P'31 *OUSPEVDF4VCTDSJQUJPOT
    
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT
    
    4UBSU"QQ
    FMNTQBFYBNQMF7
    3FBDU)PPLT
    

    View Slide

12. 5&" .PEFM6QEBUF7JFX
    
    3FEVY
    /FTUFE$PNQPOFOUT
    4UBSU"QQ&⒎FDUT *OUSPEVDF$NE
    
    /P/FTUFE$PNQPOFOUT
    /P'31 *OUSPEVDF4VCTDSJQUJPOT
    
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT
    
    4UBSU"QQ
    FMNTQBFYBNQMF7
    3FBDU)PPLT
    

    View Slide

13. View Slide

14. "T5IF&MN"SDIJUFDUVSF
    FNFSHFE JUCFDBNFDMFBSUIBU
    ZPVDPVMEEPBMNPTUBMMZPVS
    &MNQSPHSBNNJOHXJUIPVU
    UIJOLJOHBCPVUTJHOBMTBUBMM4P
    UIFTUBSUBQQQBDLBHFXBTBO
    FYQFSJNFOUUPTFFXIBU
    IBQQFOTXIFOXFQVTITJHOBMT
    XBZMBUFSJOUIFMFBSOJOHQBUI
    5IFSFTVMUTXFSFHSFBU'PMLT
    XFSFHFUUJOHTUBSUFERVJDLFS
    NBLJOHJUGBSUIFS BOEIBWJOH
    NPSFGVO*OUIFFOE XFIBE
    MPUTPGGPMLTXIPCFDBNF
    FYDFMMFOU&MNQSPHSBNNFST
    XJUIPVUFWFSSFBMMZMFBSOJOH
    NVDIBCPVUTJHOBMT5IFZXFSF
    OPUOFDFTTBSZ
    5IF&MN"SDIJUFDUVSF͕ొ৔͢Δ
    ͱɺ৴߸Λ·ͬͨ͘ߟ͑ͣʹ΄ͱ
    ΜͲ͢΂ͯͷ&MNϓϩάϥϛϯά
    Λ࣮ߦͰ͖Δ͜ͱ͕໌Β͔ʹͳΓ
    ·ͨ͠ɻ͕ͨͬͯ͠ɺTUBSUBQQ
    ύοέʔδ͸ɺֶशύεͷޙ൒Ͱ
    γάφϧΛϓογϡͨ͠ͱ͖ʹԿ
    ͕ى͜Δ͔Λ֬ೝ͢ΔͨΊͷ࣮ݧ
    Ͱͨ͠ɻ݁Ռ͸ૉ੖Β͔ͬͨ͠Ͱ
    ͢ʂਓʑ͸ΑΓૣ࢝͘ΊɺΑΓԕ
    ͘ʹɺͦͯ͠΋ͬͱָ͠ΜͰ͍
    ͨʂ࠷ऴతʹ͸ɺγάφϧʹ͍ͭ
    ͯଟ͘ΛֶͿ͜ͱͳ͘༏लͳ&MN
    ϓϩάϥϚʔʹͳͬͨଟ͘ͷਓʑ
    ͕͍·ͨ͠ɻͦΕΒ͸ඞཁ͋Γ·
    ͤΜͰͨ͠ɻ
    

    View Slide

15. 5&" .PEFM6QEBUF7JFX
    
    3FEVY
    /FTUFE$PNQPOFOUT
    4UBSU"QQ&⒎FDUT *OUSPEVDF$NE
    
    /P/FTUFE$PNQPOFOUT
    /P'31 *OUSPEVDF4VCTDSJQUJPOT
    
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT
    
    4UBSU"QQ
    FMNTQBFYBNQMF7
    3FBDU)PPLT
    

    View Slide

16. 5&" .PEFM6QEBUF7JFX
    
    3FEVY
    /FTUFE$PNQPOFOUT
    4UBSU"QQ&⒎FDUT *OUSPEVDF$NE
    
    /P/FTUFE$PNQPOFOUT
    /P'31 *OUSPEVDF4VCTDSJQUJPOT
    
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT
    
    4UBSU"QQ
    FMNTQBFYBNQMF7
    3FBDU)PPLT
    

    View Slide

17. ͜Ε͸ɺਓʑΛ࿭Θ͍ͤͯ·ͨ͠ɻෆద੾ͳঢ়گ
    ͰͦΕΒΛ࢖͍͗͢ͳ͍Α͏ʹɺਓʑ͕͜ΕΒͷ
    ֓೦ʹऔΓ૊Ή͜ͱ͕Ͱ͖ΔྫΛ༻ҙ͢Δඞཁ͕
    ͋Γ·͢ɻ
    

    View Slide

18. 5&" .PEFM6QEBUF7JFX
    
    3FEVY
    /FTUFE$PNQPOFOUT
    4UBSU"QQ&⒎FDUT *OUSPEVDF$NE
    
    /P/FTUFE$PNQPOFOUT
    /P'31 *OUSPEVDF4VCTDSJQUJPOT
    
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT
    
    4UBSU"QQ
    FMNTQBFYBNQMF7
    3FBDU)PPLT
    

    View Slide

19. 5&" .PEFM6QEBUF7JFX
    
    3FEVY
    /FTUFE$PNQPOFOUT
    4UBSU"QQ&⒎FDUT *OUSPEVDF$NE
    
    /P/FTUFE$PNQPOFOUT
    /P'31 *OUSPEVDF4VCTDSJQUJPOT
    
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT
    
    4UBSU"QQ
    FMNTQBFYBNQMF7
    3FBDU)PPLT
    

    View Slide

20. $PNQMFUFMZSFBSDIJUFDUFWFSZUIJOH
    

    View Slide

21. 4P UIFBSDIJUFDUVSFXBSpOJTIFE
    /0
    CVUNVDICFUUFSUIBOCFGPSF
    

    View Slide

22. 4P UIFBSDIJUFDUVSFXBSpOJTIFE
    /0
    CVUNVDICFUUFSUIBOCFGPSF
    

    View Slide

23. 5XPCFTUFYBNQMFT
    

    View Slide

24. FMNQBDLBHFFMNMBOHPSH
    SUGFMENBOFMNTQBFYBNQMF
    IUUQTHJUIVCDPN
    IUUQTHJUIVCDPN
    

    View Slide

25. QBDLBHFFMNMBOHPSH
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO
    $BDIFJO4FTTJPO
    -PHJO-PHPVU
    4FTTJPOJO1BHF
    $SFEFOUJBMT
    3PVUFUZQFT
    $36%
    4LFMUPO
    -PBEJOHTUBUF
    

    View Slide

26. QBDLBHFFMNMBOHPSH
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO
    $BDIFJO4FTTJPO
    -PHJO-PHPVU
    4FTTJPOJO1BHF
    $SFEFOUJBMT
    3PVUFUZQFT
    $36%
    4LFMUPO
    -PBEJOHTUBUF
    
    
    

    View Slide

27. 8IBUJT4FTTJPO
    

    View Slide

28. module Page.X exposing (..)
    type alias Model =
    { ...
    }
    init : Foo -> Bar -> Model -> (Model, Cmd Msg)
    update : Baz -> Msg -> Model -> (Model, Cmd Msg, Event)
    view : Hoge -> Fuga -> Model -> Html Msg
    -- Main.elm pass concrete args explicitly
    -- which makes Main.elm dirty!
    --
    -- Also, an extra event should be introduced
    -- to modify the global state.
    

    View Slide

29. module Page.X exposing (..)
    type alias Model =
    { session : Session
    , ...
    }
    init : Session -> Model -> (Model, Cmd Msg)
    update : Msg -> Model -> (Model, Cmd Msg)
    view : Model -> Html Msg
    -- Main.elm passes session type which contains
    -- various contexts such as user/credential,
    -- cached data, etc.
    

    View Slide

30. module Main exposing (..)
    getSession : Page -> Session
    getSession page =
    case page of
    FooPage { session } ->
    session
    BarPage { session } ->
    session
    ...
    -- Sometimes `setSession` or `updateSession`
    -- is also needed...
    

    View Slide

31. 1SPT
    .BJOFMNCFDPNFTDMFBOFS
    5IFFYUFOTJPOJTDMPTFEJOUIFQBHF
    (MPCBMTUBUFDBOCFEJSFDUMZNPEJpFE
    $POT
    /FXCPJMFSQMBUFTBSFJOUSPEVDFE
    $PNNPOPQFSBUJPOTTIPVMECFIBOEMFEJO
    FBDIQBHF
    

    View Slide

32. &YQFSJNFOU
    

    View Slide

33. KJOKPSFMNUFBQQ
    IUUQTHJUIVCDPN
    

    View Slide

34. QBDLBHFFMNMBOHPSH
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO
    $BDIFJO4FTTJPO
    -PHJO-PHPVU
    $SFEFOUJBMT
    3PVUFUZQFT
    $36%
    4LFMUPO
    -PBEJOHTUBUF
    3FUVSO
    FMNUFBQQ
    4IBSFEFSSPS
    4FTTJPOJO1BHF
    
    
    

    View Slide

35. QBDLBHFFMNMBOHPSH
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO
    $BDIFJO4FTTJPO
    -PHJO-PHPVU
    $SFEFOUJBMT
    3PVUFUZQFT
    $36%
    4LFMUPO
    -PBEJOHTUBUF
    3FUVSO
    FMNUFBQQ
    4IBSFEFSSPS
    4FTTJPOJO1BHF
    
    
    
    
    

    View Slide

36. module Page.X exposing (..)
    type alias Model =
    { ...
    }
    init : Session -> Model -> Return Model Msg
    update : Session -> Msg -> Model -> Return Model Msg
    view : Session -> Model -> Html Msg
    

    View Slide

37. update : Session -> Msg -> Model -> Return Model Msg
    update session msg model =
    case msg of
    NoOp ->
    return model
    GetUser ->
    return model
    |> withTask (Api.getUser GotUser)
    GotUser user ->
    return model
    |> withSession (Session.setUser user session)
    |> withCommand ...
    -- There is no `Cmd.none`.
    --
    -- More abstract than (Model, Cmd Msg), easy to
    -- extend the data structure.
    

    View Slide

38. 1SPT
    -FTTCPJMFSQMBUF
    &BTZUPFYUFOEUIFA3FUVSOATUSVDUVSF
    $POT
    %BUBqPXDBOCFDPNFNPSFDPNQMFY
    

    View Slide

39. QBDLBHFFMNMBOHPSH
    FMNTQBFYBNQMF
    #SPXTFSBQQMJDBUJPO
    $BDIFJO4FTTJPO
    -PHJO-PHPVU
    $SFEFOUJBMT
    3PVUFUZQFT
    $36%
    4LFMUPO
    -PBEJOHTUBUF
    3FUVSO
    FMNUFBQQ
    4IBSFEFSSPS
    4FTTJPOJO1BHF
    
    
    
    
    5IFSFBSFOPTJMWFSCVMMFUT
    'JOEUIFCFTU5&"GPSZPVSBQQ
    

    View Slide

40. 5IBOLZPV
    

    View Slide

41. https://github.com/elm/package.elm-lang.org
    https://twitter.com/jinjor
    https://github.com/rtfeldman/elm-spa-example
    https://github.com/jinjor/elm-teapp
    

    View Slide