Mint: Language Level Support for SPAs

Transcript

1. ©2018 Wantedly, Inc.
   Mint
   Language Level Support for SPA
   2.Aug.2018 - Naomichi Agata
   

   View Slide

2. ©2018 Wantedly, Inc.
   agatan
   Software engineer at Wantedly, Inc.
   Server side + Machine learning
   Github
   Twitter
   @agatan
   @agatan_
   

   View Slide

3. ©2018 Wantedly, Inc.
   Single Page Application
   Ͳ͏࡞Γ·͔͢ʁ
   

   View Slide

4. ©2018 Wantedly, Inc.
   React
   Vue
   Angular
   

   View Slide

5. ©2018 Wantedly, Inc.
   React
   Redux
   Vue
   react-router
   universal-router
   Angular
   styled-components
   webpack-serve
   Typescript
   Immutable.js
   

   View Slide

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
   

   View Slide

7. ©2018 Wantedly, Inc.
   https://www.mint-lang.com/
   

   View Slide

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
   

   View Slide

9. ©2018 Wantedly, Inc.
   Hello, world!
   DPNQPOFOU.BJO\
   GVOSFOEFS)UNM\
   EJW
   \l)FMMP XPSMEz^
   EJW
   ^
   ^
   

   View Slide

10. ©2018 Wantedly, Inc.
    Styling with CSS DPNQPOFOU.BJO\
    TUZMFCVUUPO\
    CBDLHSPVOESFE
    DPMPSXIJUF
    CPSEFS
    ^
    GVOSFOEFS)UNM\
    CVUUPOCVUUPO
    \$MJDL.&^
    CVUUPO
    ^
    ^
    Style ͸ఆٛ͞Εͨcomponentsͷ
    scopeʹด͡Δ
    

    View Slide

11. ©2018 Wantedly, Inc.
    Routing SPVUFT\
    \
    "QQMJDBUJPOTFU1BHF JOEFY
    
    ^
    
    VTFSTJE JE/VNCFS
    \
    EP\
    "QQMJDBUJPOTFU1BHF TIPX
    
    "QQMJDBUJPOMPBE6TFS JE
    
    ^
    ^
    ^
    

    View Slide

12. ©2018 Wantedly, Inc.
    Components
    DPNQPOFOU5FTU\
    QSPQFSUZTJ[F4USJOHTNBMM
    QSPQFSUZDPMPS4USJOHSFE
    
    GVOSFOEFS)UNM\
    EJW
    \DPMPS^
    \TJ[F^
    EJW
    ^
    ^
    React.Component
    property Λ࣋ͯΔ
    render ؔ਺Λ࣋ͭ
    

    View Slide

13. ©2018 Wantedly, Inc.
    Passing properties
    DPNQPOFOU.BJO\
    GVOSFOEFS)UNM\
    5FTUDPMPSCMVFTJ[FCJH
    ^
    ^
    ਌͔Βࢠͷ property Λ౉ͤΔ
    

    View Slide

14. ©2018 Wantedly, Inc.
    JavaScript interpolation
    DPNQPOFOU.BJO\
    GVOIBOEMF$MJDL FWFOU)UNM&WFOU
    7PJE\
    ABMFSU )FMMP
    A
    ^
    
    GVOSFOEFS)UNM\
    EJWPO$MJDL\IBOEMF$MJDL^\$MJDLUPBMFSU^EJW
    ^
    ^
    

    View Slide

15. ©2018 Wantedly, Inc.
    Anonymous functions
    DPNQPOFOU(SFFUFS\
    GVOSFOEFS)UNM\
    EJWPO$MJDL\ FWFOU)UNM&WFOU
    7PJE\EP\%FCVHMPH )FMMP
    ^^^
    \$MJDL.F^
    EJW
    ^
    ^
    

    View Slide

16. ©2018 Wantedly, Inc.
    Store
    TUPSF$PVOUFS4UPSF\
    TUBUFDPVOUFS/VNCFS
    GVOJODSFNFOU7PJE\
    OFYU\DPVOUFSDPVOUFS^
    ^
    GVOEFDSFNFOU7PJE\
    OFYU\DPVOUFSDPVOUFS^
    ^
    ^
    FluxͷStore
    

    View Slide

17. ©2018 Wantedly, Inc.
    Connect
    connect Ͱ
    component ͱ store Λͭͳ͙
    DPNQPOFOU.BJO\
    DPOOFDU$PVOUFSFYQPTJOH\DPVOU JODSFNFOU^
    GVOSFOEFS)UNM\
    EJW
    \/VNCFSUP4USJOH DPVOU
    ^
    CVUUPOPO$MJDL\ FWFOU)UNM&WFOU
    7PJE\
    JODSFNFOU
    
    ^^\^CVUUPO
    EJW
    ^
    ^
    

    View Slide

18. ©2018 Wantedly, Inc.
    Testing
    TVJUF.BJO\
    UFTU(SFFUT.JOU\
    XJUI5FTU)UNM\
    .BJO
    cTUBSU
    
    cBTTFSU5FYU0G EJW )FMMP.JOU
    
    ^
    ^
    ^
    

    View Slide

19. ©2018 Wantedly, Inc.
    dev-server
    ࣗಈίϯύΠϧ
    ܕݕࠪɺsyntax error ͷදࣔ
    

    View Slide

20. ©2018 Wantedly, Inc.
    ಺෦࣮૷
    Ὂ ίϯύΠϥͳͲ͸CrystalͰ࣮૷͞Ε͍ͯΔ
    Ὂ ίϯύΠϧ͢ΔͱReact ࣗલflux ʹͳΔ
    Ὂ component → React.Component
    Ὂ Ttore → global variableʹ
    

    View Slide

21. ©2018 Wantedly, Inc.
    Component before
    DPNQPOFOU.BJO\
    DPOOFDU$PVOUFSFYQPTJOH\DPVOU JODSFNFOU^
    GVOSFOEFS)UNM\
    EJW
    \/VNCFSUP4USJOH DPVOU
    ^
    CVUUPOPO$MJDL\ FWFOU)UNM&WFOU
    7PJE\
    JODSFNFOU
    
    ^^\^CVUUPO
    EJW
    ^
    ^
    

    View Slide

22. ©2018 Wantedly, Inc.
    Component after
    DMBTT.BJOFYUFOET$PNQPOFOU\
    HFUDPVOU
    \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
    \
    SFUVSOUIJTJODSFNFOUCJOE UIJT
    
    
    ^
    
    @OPSNBMJ[F&WFOU FWFOU
    
    
    
    ^
    >
    
    ^
    ^
    

    View Slide

23. ©2018 Wantedly, Inc.
    Store before & after
    DPOTU$PVOUFSOFX DMBTTFYUFOET4UPSF\
    DPOTUSVDUPS
    \
    TVQFS
    
    UIJTTUBUF\
    DPVOU
    ^
    ^
    HFUDPVOU
    \SFUVSOUIJTTUBUFDPVOU^
    JODSFNFOU
    \
    SFUVSOOFX1SPNJTF @SFTPMWF
    \
    UIJTTFU4UBUF @VQEBUF UIJTTUBUF OFX3FDPSE \
    DPVOUUIJTDPVOU
    ^
    
    @SFTPMWF
    
    ^
    
    ^
    ^
    
    $PVOUFS@@EJTQMBZ/BNFA$PVOUFSA
    TUPSF$PVOUFS\
    TUBUFDPVOU/VNCFS
    GVOJODSFNFOU
    7PJE\
    OFYU\DPVOUDPVOU^
    ^
    ^
    

    View Slide

24. ©2018 Wantedly, Inc.
    ඪ४ϥΠϒϥϦ
    Ὂ IUUQTHJUIVCDPNNJOUMBOHNJOUDPSF
    Ὂ Maybe, Promise, Result, etc.
    Ὂ ΄ͱΜͲjs interpolation
    NPEVMF"SSBZ\
    GVOTJ[F BSSBZ"SSBZ B
    
    /VNCFS\
    ABSSBZMFOHUIA
    ^
    ^
    NPEVMF+TPO\
    GVOQBSTF JOQVU4USJOH
    .BZCF 0CKFDU
    \
    A
    
    \
    USZ\
    SFUVSOOFX+VTU +40/QBSTF JOQVU
    
    
    ^DBUDI FSSPS
    \
    SFUVSOOFX/PUIJOH
    
    ^
    ^
    
    
    A
    ^
    ^
    

    View Slide

25. ©2018 Wantedly, Inc.
    ײ૝ͱ·ͱΊ
    Ὂ ΋ͷ͘͢͝Ϧον
    Ὂ ݴޠػೳ΋ͯΜ͜੝Γͩ͠ɺπʔϧతͳػೳ΋๛෋
    Ὂ dev-server, formatter, etc.
    Ὂ ෳࡶͳ SPAs Λ࡞ΔΞϓϩʔνͷҰͭͱ͓ͯ͘͢͠͝΋͠Ζ͍ͳͱࢥ͍·ͨ͠
    Ὂ ElmΛ͞ΒʹSPAsಛԽͤͨ͞Α͏ͳݴޠ
    Ὂ ࣮͸SPAsॻ͍ͨ͜ͱͳ͍Ͱ͢
    Ὂ JSerͷօ༷ͷײ૝Λௌ͖ͨͯ͘ൃද͠·ͨ͠
    Ὂ Elm΍mintͷΑ͏ͳΞϓϩʔνʹ͍ͭͯͲ͏ࢥ͍ͬͯ·͔͢ʁʁ
    

    View Slide