Mint: Language Level Support for SPAs

Transcript

1. ©2018 Wantedly, Inc. Mint Language Level Support for SPA 2.Aug.2018 - Naomichi Agata
2. ©2018 Wantedly, Inc. agatan Software engineer at Wantedly, Inc. Server side + Machine learning Github Twitter @agatan @agatan_
3. ©2018 Wantedly, Inc. Single Page Application Ͳ͏࡞Γ·͔͢ʁ
4. ©2018 Wantedly, Inc. React Vue Angular
5. ©2018 Wantedly, Inc. React Redux Vue react-router universal-router Angular styled-components webpack-serve Typescript Immutable.js
6. ©2018 Wantedly, Inc. React Redux Vue react-router universal-router Angular styled-components webpack-serve Typescript Immutable.js CSS Modules flow prettier preact redux-saga redux-thunk npm esdoc webpack parcel jest mocha jasmin hyperapp Vuex
7. ©2018 Wantedly, Inc. https://www.mint-lang.com/
8. ©2018 Wantedly, Inc. Mint w IUUQTNJOUMBOHDPN
   w front-end web ͷͨΊͷϓϩάϥϛϯάݴޠ
   w ੩తܕݕࠪ
   w SPAs
   ͷͨΊͷ༷ʑͳػೳΛݴޠϨϕϧͰαϙʔτ
   • Reusable components • Styling • Routing • Global and local state handling • Synchronous and asynchronous computations that might fail
9. ©2018 Wantedly, Inc. Hello, world! DPNQPOFOU
   .BJO
   \
   
   
   
   
   GVO
   SFOEFS
   
   )UNM
   \
   
   
   
   
   
   
   
   
   EJW
   
   
   
   
   
   
   
   
   
   
   
   
   \
   l)FMMP
   XPSMEz
   ^
   
   
   
   
   
   
   
   
   EJW
   
   
   
   
   ^
   ^
10. ©2018 Wantedly, Inc. Styling with CSS DPNQPOFOU
    .BJO
    \
    
    
    
    
    TUZMF
    CVUUPO
    \
    
    
    
    
    
    
    
    
    CBDLHSPVOE
    SFE
    
    
    
    
    
    
    
    
    DPMPS
    XIJUF
    
    
    
    
    
    
    
    
    CPSEFS
    
    
    
    
    
    ^
    
    
    
    
    GVO
    SFOEFS
    
    )UNM
    \
    
    
    
    
    
    
    
    
    CVUUPOCVUUPO
    
    
    
    
    
    
    
    
    
    
    
    
    \
    $MJDL
    .&
    ^
    
    
    
    
    
    
    
    
    CVUUPO
    
    
    
    
    ^
    ^ Style ͸ఆٛ͞Εͨ
    components
    ͷ
    
    scope
    ʹด͡Δ
11. ©2018 Wantedly, Inc. Routing SPVUFT
    \
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    "QQMJDBUJPOTFU1BHF JOEFY
    
    
    
    
    ^
    
    
    
    
    
    
    
    VTFSTJE
    JE
    /VNCFS
    \
    
    
    
    
    
    
    
    
    EP
    \
    
    
    
    
    
    
    
    
    
    
    
    
    "QQMJDBUJPOTFU1BHF TIPX
    
    
    
    
    
    
    
    
    
    
    
    
    "QQMJDBUJPOMPBE6TFS JE
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    ^
12. ©2018 Wantedly, Inc. Components DPNQPOFOU
    5FTU
    \
    
    
    
    
    QSPQFSUZ
    TJ[F
    
    4USJOH
    
    TNBMM
    
    
    
    
    QSPQFSUZ
    DPMPS
    
    4USJOH
    
    SFE
    
    
    
    
    
    
    
    GVO
    SFOEFS
    
    )UNM
    \
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    
    
    
    
    
    
    \
    DPMPS
    ^
    
    
    
    
    
    
    
    
    
    
    
    
    \
    TJ[F
    ^
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    ^
    ^ React.Component property Λ࣋ͯΔ
    render ؔ਺Λ࣋ͭ
13. ©2018 Wantedly, Inc. Passing properties DPNQPOFOU
    .BJO
    \
    
    
    
    
    GVO
    SFOEFS
    
    )UNM
    \
    
    
    
    
    
    
    
    
    5FTU
    DPMPSCMVF
    TJ[FCJH
    
    
    
    
    ^
    ^ ਌͔Βࢠͷ property Λ౉ͤΔ
14. ©2018 Wantedly, Inc. JavaScript interpolation DPNQPOFOU
    .BJO
    \
    
    
    
    
    GVO
    IBOEMF$MJDL
    FWFOU
    
    )UNM&WFOU
    
    7PJE
    \
    
    
    
    
    
    
    
    
    ABMFSU )FMMP A
    
    
    
    
    ^
    
    
    
    
    
    
    
    GVO
    SFOEFS
    
    )UNM
    \
    
    
    
    
    
    
    
    
    EJW
    PO$MJDL\IBOEMF$MJDL^\
    $MJDL
    UP
    BMFSU
    ^EJW
    
    
    
    
    ^
    ^
15. ©2018 Wantedly, Inc. Anonymous functions DPNQPOFOU
    (SFFUFS
    \
    
    
    
    
    GVO
    SFOEFS
    
    )UNM
    \
    
    
    
    
    
    
    
    
    EJW
    PO$MJDL\ FWFOU
    
    )UNM&WFOU
    
    7PJE
    
    \
    EP
    \
    %FCVHMPH )FMMP
    ^^^
    
    
    
    
    
    
    
    
    
    
    
    
    \
    $MJDL
    .F
    ^
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    ^
    ^
16. ©2018 Wantedly, Inc. Store TUPSF
    $PVOUFS4UPSF
    \
    
    
    
    
    TUBUF
    DPVOUFS
    
    /VNCFS
    
    
    
    
    
    
    GVO
    JODSFNFOU
    
    7PJE
    \
    
    
    
    
    
    
    
    
    OFYU
    \
    DPVOUFS
    
    DPVOUFS
    
    
    ^
    
    
    
    
    ^
    
    
    
    
    GVO
    EFDSFNFOU
    
    7PJE
    \
    
    
    
    
    
    
    
    
    OFYU
    \
    DPVOUFS
    
    DPVOUFS
    
    
    ^
    
    
    
    
    ^
    ^ Flux
    ͷ
    Store
17. ©2018 Wantedly, Inc. Connect connect Ͱ component ͱ store Λͭͳ͙ DPNQPOFOU
    .BJO
    \
    
    
    
    
    DPOOFDU
    $PVOUFS
    FYQPTJOH
    \
    DPVOU
    JODSFNFOU
    ^
    
    
    
    
    GVO
    SFOEFS
    
    )UNM
    \
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    
    
    
    
    
    
    \
    /VNCFSUP4USJOH DPVOU
    ^
    
    
    
    
    
    
    
    
    
    
    
    
    CVUUPO
    PO$MJDL\ FWFOU
    
    )UNM&WFOU
    
    7PJE
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    JODSFNFOU
    
    
    
    
    
    
    
    
    
    
    
    
    ^^\
     
    ^CVUUPO
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    ^
    ^
18. ©2018 Wantedly, Inc. Testing TVJUF
    .BJO
    \
    
    
    
    
    UFTU
    (SFFUT
    .JOU
    \
    
    
    
    
    
    
    
    
    XJUI
    5FTU)UNM
    \
    
    
    
    
    
    
    
    
    
    
    
    
    .BJO
    
    
    
    
    
    
    
    
    
    
    
    
    c
    TUBSU
    
    
    
    
    
    
    
    
    
    
    
    
    c
    BTTFSU5FYU0G EJW
    )FMMP
    .JOU
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    ^
19. ©2018 Wantedly, Inc. dev-server ࣗಈίϯύΠϧ ܕݕࠪɺsyntax error ͷදࣔ
20. ©2018 Wantedly, Inc. ಺෦࣮૷ Ὂ ίϯύΠϥͳͲ͸
    Crystal
    Ͱ࣮૷͞Ε͍ͯΔ
    Ὂ ίϯύΠϧ͢Δͱ
    React
    ࣗલ
    flux ʹͳΔ
    Ὂ component → React.Component Ὂ Ttore → global variable
    ʹ
21. ©2018 Wantedly, Inc. Component before DPNQPOFOU
    .BJO
    \
    
    
    
    
    DPOOFDU
    $PVOUFS
    FYQPTJOH
    \
    DPVOU
    JODSFNFOU
    ^
    
    
    
    
    GVO
    SFOEFS
    
    )UNM
    \
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    
    
    
    
    
    
    \
    /VNCFSUP4USJOH DPVOU
    ^
    
    
    
    
    
    
    
    
    
    
    
    
    CVUUPO
    PO$MJDL\ FWFOU
    
    )UNM&WFOU
    
    7PJE
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    JODSFNFOU
    
    
    
    
    
    
    
    
    
    
    
    
    ^^\
     
    ^CVUUPO
    
    
    
    
    
    
    
    
    EJW
    
    
    
    
    ^
    ^
22. ©2018 Wantedly, Inc. Component after DMBTT
    .BJO
    FYUFOET
    $PNQPOFOU
    \
    
    
    
    
    HFU
    DPVOU
    \
    SFUVSO
    $PVOUFSDPVOU
    ^
    
    
    
    
    JODSFNFOU QBSBNT
    \
    SFUVSO
    $PVOUFSJODSFNFOU QBSBNT
    ^
    
    
    
    
    DPNQPOFOU8JMM6ONPVOU
    \
    
    
    
    
    
    
    
    
    $PVOUFS@VOTVCTDSJCF UIJT
    
    
    
    
    ^
    
    
    
    
    DPNQPOFOU%JE.PVOU
    \
    
    
    
    
    
    
    
    
    $PVOUFS@TVCTDSJCF UIJT
    
    
    
    
    ^
    
    
    
    
    SFOEFS
    \
    
    
    
    
    
    
    
    
    SFUVSO
    @DSFBUF&MFNFOU EJW
    \^
    </VNCFSUP4USJOH UIJTDPVOU
    @DSFBUF&MFNFOU CVUUPO
    \
    
    
    
    
    
    
    
    
    
    
    
    
    PO$MJDL
    FWFOU
    
    FWFOU
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    UIJTJODSFNFOUCJOE UIJT
    
    
    
    
    
    
    
    
    
    
    
    
    ^ @OPSNBMJ[F&WFOU FWFOU
    
    
    
    
    
    
    
    
    ^
    <A A> >
    
    
    
    
    ^
    ^
23. ©2018 Wantedly, Inc. Store before & after DPOTU
    $PVOUFS
    
    OFX
    DMBTT
    FYUFOET
    4UPSF
    \
    
    
    
    
    DPOTUSVDUPS
    \
    
    
    
    
    TVQFS
    
    
    
    
    UIJTTUBUF
    
    \
    
    
    
    
    
    
    
    
    DPVOU
    
    
    
    
    
    ^
    
    
    ^
    
    
    HFU
    DPVOU
    \
    SFUVSO
    UIJTTUBUFDPVOU
    ^
    
    
    JODSFNFOU
    \
    
    
    
    
    SFUVSO
    OFX
    1SPNJTF @SFTPMWF
    
    \
    
    
    
    
    
    
    UIJTTFU4UBUF @VQEBUF UIJTTUBUF
    OFX
    3FDPSE \
    
    
    
    
    
    
    
    
    
    DPVOU
    UIJTDPVOU
    
    
    
    
    
    
    
    
    
    ^
    @SFTPMWF
    
    
    
    
    ^
    
    
    ^
    ^
    $PVOUFS@@EJTQMBZ/BNF
    
    A$PVOUFSA TUPSF
    $PVOUFS
    \
    
    
    
    
    TUBUF
    DPVOU
    /VNCFS
    
    
    
    
    
    
    GVO
    JODSFNFOU
    
    7PJE
    \
    
    
    
    
    
    
    
    
    OFYU
    \
    DPVOU
    
    DPVOU
    
    
    ^
    
    
    
    
    ^
    ^
24. ©2018 Wantedly, Inc. ඪ४ϥΠϒϥϦ Ὂ IUUQTHJUIVCDPNNJOUMBOHNJOUDPSF
    Ὂ Maybe, Promise, Result, etc. Ὂ ΄ͱΜͲ
    js interpolation
    NPEVMF
    "SSBZ
    \
    
    
    
    
    GVO
    TJ[F
    BSSBZ
    
    "SSBZ B
    
    /VNCFS
    \
    
    
    
    
    
    
    
    
    ABSSBZMFOHUIA
    
    
    
    
    ^
    ^ NPEVMF
    +TPO
    \
    
    
    
    
    GVO
    QBSTF
    JOQVU
    
    4USJOH
    
    .BZCF 0CKFDU
    \
    
    
    
    
    
    
    
    
    A
    
    
    
    
    
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    
    
    USZ
    \
    
    
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    OFX
    +VTU +40/QBSTF JOQVU
    
    
    
    
    
    
    
    
    
    
    ^
    DBUDI
    FSSPS
    \
    
    
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    OFX
    /PUIJOH
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    
    
    A
    
    
    
    
    ^
    ^
25. ©2018 Wantedly, Inc. ײ૝ͱ·ͱΊ Ὂ ΋ͷ͘͢͝Ϧον
    Ὂ ݴޠػೳ΋ͯΜ͜੝Γͩ͠ɺπʔϧతͳػೳ΋๛෋
    Ὂ dev-server, formatter, etc. Ὂ ෳࡶͳ SPAs Λ࡞ΔΞϓϩʔνͷҰͭͱ͓ͯ͘͢͠͝΋͠Ζ͍ͳͱࢥ͍·ͨ͠
    Ὂ Elm
    Λ͞Βʹ
    SPAs
    ಛԽͤͨ͞Α͏ͳݴޠ
    Ὂ ࣮͸
    SPAs
    ॻ͍ͨ͜ͱͳ͍Ͱ͢
    Ὂ JSer
    ͷօ༷ͷײ૝Λௌ͖ͨͯ͘ൃද͠·ͨ͠
    Ὂ Elm
    ΍
    mint
    ͷΑ͏ͳΞϓϩʔνʹ͍ͭͯͲ͏ࢥ͍ͬͯ·͔͢ʁʁ