Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

©2018 Wantedly, Inc. React Vue Angular

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

©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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

©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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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