TEA++ - Speaker Deck

Slide 1

Slide 1 text

TEA++ &WPMWJOHUIF&MN"SDIJUFDUVSF !KJOKPS

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

5&"

Slide 4

Slide 4 text

5IF&MN"SDIJUFDUVSF

Slide 5

Slide 5 text

)551 $PVOUFS 'PSN 5&"JTFBTZ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

41"JTEJ⒏DVMU

Slide 8

Slide 8 text

4JNQMF"SDIJUFDUVSF ʴ $PNNVOJUZT1SBDUJDF

Slide 9

Slide 9 text

4JNQMF"SDIJUFDUVSF ʴ $PNNVOJUZT1SBDUJDF

Slide 10

Slide 10 text

)JTUPSZPG5SJBMTBOE&SSPST

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

"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 ϓϩάϥϚʔʹͳͬͨଟ͘ͷਓʑ ͕͍·ͨ͠ɻͦΕΒ͸ඞཁ͋Γ· ͤΜͰͨ͠ɻ

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

$PNQMFUFMZSFBSDIJUFDUFWFSZUIJOH

Slide 21

Slide 21 text

4P UIFBSDIJUFDUVSFXBSpOJTIFE /0 CVUNVDICFUUFSUIBOCFGPSF

Slide 22

Slide 22 text

4P UIFBSDIJUFDUVSFXBSpOJTIFE /0 CVUNVDICFUUFSUIBOCFGPSF

Slide 23

Slide 23 text

5XPCFTUFYBNQMFT

Slide 24

Slide 24 text

FMNQBDLBHFFMNMBOHPSH SUGFMENBOFMNTQBFYBNQMF IUUQTHJUIVCDPN IUUQTHJUIVCDPN

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

8IBUJT4FTTJPO

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

&YQFSJNFOU

Slide 33

Slide 33 text

KJOKPSFMNUFBQQ IUUQTHJUIVCDPN

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

1SPT -FTTCPJMFSQMBUF &BTZUPFYUFOEUIFA3FUVSOATUSVDUVSF $POT %BUBqPXDBOCFDPNFNPSFDPNQMFY

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

5IBOLZPV

Slide 41

Slide 41 text

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