Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mint: Language Level Support for SPAs

Mint: Language Level Support for SPAs

Agata Naomichi

August 02, 2018
Tweet

More Decks by Agata Naomichi

Other Decks in Programming

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
    \
    [email protected] UIJT

    ^
    DPNQPOFOU%JE.PVOU
    \
    [email protected] UIJT

    ^
    SFOEFS
    \
    [email protected]&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

    ^

    ^
    ^

    [email protected]@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