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

Mint: Language Level Support for SPAs

Mint: Language Level Support for SPAs

A54cce9a3933a049ca19477b7382cdde?s=128

Agata Naomichi

August 02, 2018
Tweet

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\ GVOSFOEFS)UNM\ EJW \l)FMMP XPSMEz^

    EJW ^ ^
  10. ©2018 Wantedly, Inc. Styling with CSS DPNQPOFOU.BJO\ TUZMFCVUUPO\ CBDLHSPVOESFE DPMPSXIJUF

    CPSEFS ^ GVOSFOEFS)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 DPNQPOFOU5FTU\ QSPQFSUZTJ[F4USJOHTNBMM QSPQFSUZDPMPS4USJOHSFE  GVOSFOEFS)UNM\ EJW

    \DPMPS^ \TJ[F^ EJW ^ ^ React.Component property Λ࣋ͯΔ render ؔ਺Λ࣋ͭ
  13. ©2018 Wantedly, Inc. Passing properties DPNQPOFOU.BJO\ GVOSFOEFS)UNM\ 5FTUDPMPSCMVFTJ[FCJH ^ ^

    ਌͔Βࢠͷ property Λ౉ͤΔ
  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 ^ ^
  15. ©2018 Wantedly, Inc. Anonymous functions DPNQPOFOU(SFFUFS\ GVOSFOEFS)UNM\ EJWPO$MJDL\ FWFOU)UNM&WFOU 7PJE\EP\%FCVHMPH

    )FMMP ^^^ \$MJDL.F^ EJW ^ ^
  16. ©2018 Wantedly, Inc. Store TUPSF$PVOUFS4UPSF\ TUBUFDPVOUFS/VNCFS GVOJODSFNFOU7PJE\ OFYU\DPVOUFSDPVOUFS ^ ^

    GVOEFDSFNFOU7PJE\ OFYU\DPVOUFSDPVOUFS^ ^ ^ FluxͷStore
  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 ^ ^
  18. ©2018 Wantedly, Inc. Testing TVJUF.BJO\ UFTU(SFFUT.JOU\ XJUI5FTU)UNM\ .BJO cTUBSU 

    cBTTFSU5FYU0G 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$PVOUFSFYQPTJOH\DPVOU JODSFNFOU^ GVOSFOEFS)UNM\ EJW

    \/VNCFSUP4USJOH DPVOU ^ CVUUPOPO$MJDL\ FWFOU)UNM&WFOU 7PJE\ JODSFNFOU  ^^\ ^CVUUPO EJW ^ ^
  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  ^ <A A> >  ^ ^
  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 ^ ^ ^
  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 ^ ^
  25. ©2018 Wantedly, Inc. ײ૝ͱ·ͱΊ Ὂ ΋ͷ͘͢͝Ϧον Ὂ ݴޠػೳ΋ͯΜ͜੝Γͩ͠ɺπʔϧతͳػೳ΋๛෋ Ὂ dev-server,

    formatter, etc. Ὂ ෳࡶͳ SPAs Λ࡞ΔΞϓϩʔνͷҰͭͱ͓ͯ͘͢͠͝΋͠Ζ͍ͳͱࢥ͍·ͨ͠ Ὂ ElmΛ͞ΒʹSPAsಛԽͤͨ͞Α͏ͳݴޠ Ὂ ࣮͸SPAsॻ͍ͨ͜ͱͳ͍Ͱ͢ Ὂ JSerͷօ༷ͷײ૝Λௌ͖ͨͯ͘ൃද͠·ͨ͠ Ὂ Elm΍mintͷΑ͏ͳΞϓϩʔνʹ͍ͭͯͲ͏ࢥ͍ͬͯ·͔͢ʁʁ