Mint: Language Level Support for SPAs

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

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

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

©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

©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

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

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

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

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

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

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

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

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

©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 ^ ^

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

©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 ^ ^

©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> > ^ ^

©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 ^ ^ ^

©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 ^ ^

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

Mint: Language Level Support for SPAs

Mint: Language Level Support for SPAs

Agata Naomichi

More Decks by Agata Naomichi

Other Decks in Programming

Featured

Transcript

©2018 Wantedly, Inc. Mint Language Level Support for SPA 2.Aug.2018

©2018 Wantedly, Inc. agatan Software engineer at Wantedly, Inc. Server

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

©2018 Wantedly, Inc. React Vue Angular

©2018 Wantedly, Inc. React Redux Vue react-router universal-router Angular styled-components

©2018 Wantedly, Inc. React Redux Vue react-router universal-router Angular styled-components

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

©2018 Wantedly, Inc. Mint w IUUQTNJOUMBOHDPN w front-end web ͷͨΊͷϓϩάϥϛϯάݴޠ

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

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

©2018 Wantedly, Inc. Routing SPVUFT\ \ "QQMJDBUJPOTFU1BHF JOEFY ^

©2018 Wantedly, Inc. Components DPNQPOFOU5FTU\ QSPQFSUZTJ[F4USJOHTNBMM QSPQFSUZDPMPS4USJOHSFE GVOSFOEFS)UNM\ EJW

©2018 Wantedly, Inc. Passing properties DPNQPOFOU.BJO\ GVOSFOEFS)UNM\ 5FTUDPMPSCMVFTJ[FCJH ^ ^

©2018 Wantedly, Inc. JavaScript interpolation DPNQPOFOU.BJO\ GVOIBOEMF$MJDL FWFOU)UNM&WFOU 7PJE\ ABMFSU

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

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

©2018 Wantedly, Inc. Connect connect Ͱ component ͱ store Λͭͳ͙

©2018 Wantedly, Inc. Testing TVJUF.BJO\ UFTU(SFFUT.JOU\ XJUI5FTU)UNM\ .BJO cTUBSU

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

©2018 Wantedly, Inc. ಺෦࣮૷ Ὂ ίϯύΠϥͳͲ͸CrystalͰ࣮૷͞Ε͍ͯΔ Ὂ ίϯύΠϧ͢ΔͱReact ࣗલflux ʹͳΔ

©2018 Wantedly, Inc. Component before DPNQPOFOU.BJO\ DPOOFDU$PVOUFSFYQPTJOH\DPVOU JODSFNFOU^ GVOSFOEFS)UNM\ EJW

©2018 Wantedly, Inc. Component after DMBTT.BJOFYUFOET$PNQPOFOU\ HFUDPVOU \SFUVSO$PVOUFSDPVOU^ JODSFNFOU QBSBNT

©2018 Wantedly, Inc. Store before & after DPOTU$PVOUFSOFX DMBTTFYUFOET4UPSF\ DPOTUSVDUPS

©2018 Wantedly, Inc. ඪ४ϥΠϒϥϦ Ὂ IUUQTHJUIVCDPNNJOUMBOHNJOUDPSF Ὂ Maybe, Promise, Result,

©2018 Wantedly, Inc. ײ૝ͱ·ͱΊ Ὂ ΋ͷ͘͢͝Ϧον Ὂ ݴޠػೳ΋ͯΜ͜੝Γͩ͠ɺπʔϧతͳػೳ΋๛෋ Ὂ dev-server,