革命と秩序とSPA - Speaker Deck

革命と秩序とSPA

by joe_re

Slide 1

Slide 1 text

ֵ໋ͱடংͱSPA @joe_re

Slide 2

Slide 2 text

Who am I? • twitter: @joe_re • github: @joe-re • freeeͱ͍͏ޒ൓ాͷ  ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ  ࡞͍ͬͯ·͢

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

࿩͢͜ͱ • ϑϩϯτΤϯυͷύϥμΠϜγϑτͱ  freeeͷؔΘΓํ • React + Fluxͷߏங • ﬂowtypeʹΑΔtype-safe ﬂux

Slide 5

Slide 5 text

ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ http://qiita.com/joe-re/items/3b6730eb90dbeb2f8272

Slide 6

Slide 6 text

ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "KBYͷൃݟ  1SPUPUZQFKTɺK2VFSZͷ੮ר #BDLCPOFKTͷొ৔  ϑϩϯτΤϯυʹ.7$͕࣋ͪࠐ·ΕΔ XBZCJOEJOHͷྲྀߦ .77.   "OHVMBSKTɺ7VFKTɺ.BSJOPOFUUFKTFUDʜ ձܭGSFFFϩʔϯν 7JSUVBM%0.ͷొ৔  %FLVɺ3FBDUɺ7VFKT Y FUDʜ main topics of fronted history of freee 2010 2005 2012 2014 څ༩ܭࢉGSFFFϩʔϯν ձܭGSFFF։ൃ։࢝ ձࣾઃཱGSFFFϩʔϯν now!

Slide 7

Slide 7 text

ॳظͷձܭfreeeͷϑϩϯτΤϯυ • 2012೥౰࣌ΑΖ͘͠ɺϑϩϯτ͸Backbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.js͸ಈ͖Λ͚ͭΔఔ౓ • SPAͰ͸ͳ͍

Slide 8

Slide 8 text

͕࣌ܦͭʹͭΕߴ·ΔSPAཉ

Slide 9

Slide 9 text

ঃʑʹBackboneMVCΛ  ϑϧʹ׆͔ͨ͠  ΞʔΩςΫνϟ΁  (ϖʔδ୯ҐͰͷSPA)

Slide 10

Slide 10 text

ͦͯ͠ߴ·ΔͭΒΈ

Slide 11

Slide 11 text

ͭΒΈ • Backbone.jsͷviewಉ࢜ͷΠϕϯτϋϯυϦϯάͭ Β͍ • ਌ࢠؔ܎ʹ͋Δviewͷఆ͕ٛᐆດ • ։ൃऀ͕૿͑Δʹ͕ͨͬͯ͠ɺΠϕϯτͷߪಡղআ ϛεʹΑΔϝϞϦϦʔΫ͕ى͖ͨΓͯͨ͠ • ͦ΋ͦ΋DOMૢ࡞ਓؒͷ΍Δ͜ͱ͡Όͳ͍

Slide 12

Slide 12 text

ֵ໋

Slide 13

Slide 13 text

freee-mvc-framework  ͱ͍͏ࣾ಺ϑϨʔϜϫʔΫ͕  ੜ·Εͨ

Slide 14

Slide 14 text

freee-mvc-frameworkͰ  ΍͍ͬͯΔ͜ͱ • backbone.jsΛϥοϓͯ͠ػೳڧԽ • viewͷΤϯτϦʔϙΠϯτͱͳΔ’page view’ͷ௥Ճ • backbone.jsͷϥΠϑαΠΫϧΛڧԽ • renderingͷޙʹɺ1౓͚ͩΑ͹ΕΔϥΠϑαΠΫϧ΍renderingޙʹݺͿϥΠϑαΠΫ ϧͷ௥ՃͳͲͳͲ • ঢ়ଶ؅ཧ΋ڧԽͯ͠ɺin-documented͔ͦ͏Ͱͳ͍͔ͳͲΛߟྀͨ͠͏͑Ͱͷ  ϋϯυϦϯά΋Մೳʹͨ͠ • ਌ࢠؔ܎ͷDOMૢ࡞ɺΠϕϯτϋϯυϦϯάͷڧԽ • ͋ͱద౰ʹศརౕΛಥͬࠐΉ

Slide 15

Slide 15 text

ͦΕͰ΋DOMૢ࡞ͷͭΒΈ͸ ܰݮ͞Εͳ͍͠ɺ  ΠϕϯτϋϯυϦϯά΋  ଟ͗ͯ͢ෳࡶոحͳͷ͸  มΘΒͣ

Slide 16

Slide 16 text

ͦͷࠒੈؒͰ͸  2way-binding͕ྲྀߦ͠ɺ  ੈ͸·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌୅  (2013ʙ2014)

Slide 17

Slide 17 text

࣌Λಉͯ͘͡͠  څ༩ܭࢉfreeeͷϩʔϯν

Slide 18

Slide 18 text

څ༩ܭࢉfreeeͷελοΫ • freee-js-framework(based on backbone) • Vue.js(MVVM) • ׬શͳSPA

Slide 19

Slide 19 text

ͱ͜ΖͰMVVMͱ͸ 7JFX .PEFM 7JFX.PEFM User  2way binding apply notify interaction #BDLCPOF7JFX #BDLCPOF.PEFM 7VF

Slide 20

Slide 20 text

MVVMʹΑͬͯಘͨ΋ͷ • 2way-bindingʹΑΔDOMૢ࡞͔Βͷ։์ • View͸ঢ়ଶΛ࣋ͨͳͯ͘ྑ͍(VM΁) • View͔Β൥ࡶͳϩδοΫͷআڈ

Slide 21

Slide 21 text

ﬁn..?

Slide 22

Slide 22 text

ͦΜͳΘ͚͸ͳ͘ • ෳ਺Ϟσϧ͕ొ৔͢ΔViewͰ͸  VMͰؔ࿈Λ੍ޚ͢Δͷ͕ͭΒ͍ • ModelͱVMͷঢ়ଶͷ྆ํΛ؅ཧ͢ΔͷͭΒ͍ • ·ͱΊΔͱঢ়ଶ؅ཧͭΒ͍ • Object.obseve΋ࢮΜͩ͠…

Slide 23

Slide 23 text

·͞ʹ͜Ε(͜ͷਤ͸MVC͚ͩͲ) https://www.infoq.com/news/2014/05/facebook-mvc-ﬂux

Slide 24

Slide 24 text

͋ͱVue.jsɺ0.10.6͔Β0.11.x΁ ͷBreaking changesଟ͗͢ • https://github.com/vuejs/vue/wiki/0.10- to-0.11-migration-guide

Slide 25

Slide 25 text

freee-mvc-framework͸  εέʔϧ͠ͳ͍ • ෳࡶԽ͍ͯ͘͠ΞϓϦέʔγϣϯʹ͸  ঃʑʹଠ౛ଧͪͰ͖ͳ͘ͳ͍ͬͯΔ • ΠϕϯτϋϯυϦϯά΍Viewͷ਌ࢠؔ܎ΛՄࢹԽ͢Δ͜ͱ ͕ୈҰͷ໨తͳͷͰɺDOMૢ࡞ͷͭΒ͞͸ܰݮ͞Εͳ͍ • ύϥμΠϜͷมԽʹରԠ͢Δؾྗ͸ͳ͘ɺਰୀ͍ͯ͘͠ • ·͊ࣾ಺ಠࣗFWͷ຤࿏ͳΜͯ͜Μͳ΋ͷͰ͢ΑͶ

Slide 26

Slide 26 text

ֵ໋

Slide 27

Slide 27 text

React + Flux

Slide 28

Slide 28 text

React͓͞Β͍ • Facebook੡ͷViewϥΠϒϥϦ • ঢ়ଶ؅ཧΛపఈతʹview͔Βഉআ͢Δ  (ঢ়ଶ؅ཧ͸ﬂuxʹΑΓStore΁) • Propsͱͯ͋͠Δ஋Λ౉͞ΕΔݶΓɺ  ඞͣಉ͡ϨϯμϦϯάΛ͢Δؔ਺ܕతΞϓϩʔν  (React͸DOMม׵ثʹͳΔ) • ࠩ෼Λܭࢉͯ͠൓ө͢ΔɺVirtualDOMͷ࣮૷

Slide 29

Slide 29 text

Flux͓͞Β͍ • ୯ํ޲σʔλϑϩʔΛ࣮ݱ͢Δ࣮૷ύλʔϯ • ActionCreator → Dispatcher → Store → View • Component͔Βঢ়ଶ͸੾Γ཭͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫ͸StoreʹͭΊ͜ΈɺViewʹ͸ඳըʹඞཁͳ৘ใ͕ߏ੒ࡁΈ  Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ

Slide 30

Slide 30 text

2015೥ॳ಄ɺԶ͕࠷ڧͷFlux ࣮૷ͩઓ૪ຄൃ • Alt • Reﬂux • Fluxxor • Fluxible • nuclear-js • Arda • Material Flux • Delorean • Flummox • Redux • etc...

Slide 31

Slide 31 text

ଟ͍…

Slide 32

Slide 32 text

ԿΛબͿ͔  ͋Δ͍͸બ͹ͳ͍͔

Slide 33

Slide 33 text

Reduxͷ୆಄(2015೥5݄) • શͯͷঢ়ଶ͸1ͭͷJSONͰද͢(Single Store) • Data Flowͷొ৔ਓ෺(Action, Reducer)͸  Pureͳؔ਺ʹͳΔ • state͕ActionΛ௨ͯ͡ߋ৽͞ΕΔࡍʹɺ  reducerͱ͍͏Pureͳؔ਺Λ௨͢͜ͱͰߋ৽͢Δ

Slide 34

Slide 34 text

ReduxͷੈքΛͬ͘͟Γ

Slide 35

Slide 35 text

طଘ࣮૷͕͋Δͱ͜Ζʹ  ಋೖ͢Δ্ͰɺRedux͸ͭΒ͍

Slide 36

Slide 36 text

ͪͳΈʹ࠷ॳʹಋೖ͞Εͨػೳ ͸͜Ε(on Backbone view)

Slide 37

Slide 37 text

Single Store͸Ͳ͜ʹ  ࣋ͭ…??

Slide 38

Slide 38 text

flux-utilsΛ࢖͏ͱ͍͏બ୒ • ReduxΛ࢝Ίͱ͢Δflux࣮૷Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ facebook͕͍͍ͱ͜औΓͨ͠(ओ؍) • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘  Storeͷϕʔε࣮૷ͱContainerͱ͍͏֓೦͕௥Ճ͞Εͨ • fluxʹର͢Δཉ๬Λશͯຬͨ͢΋ͷͰ͸ͳ͍  (ϛχϚϜͳ࣮૷ͰɺϩοΫΠϯ͕গͳ͍) • ౰࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘  εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ΋͋Δ

Slide 39

Slide 39 text

αϙʔτൣғ͸খ͍͞  (ϑϨʔϜϫʔΫͰ͸ͳ͍)

Slide 40

Slide 40 text

Reduxͱͷڞ௨఺ • ContainerComponent → Container • Reducer → Reduce Store

Slide 41

Slide 41 text

ﬂux-utilsͷ͍͍ͱ͜Ζ • طଘͷﬂux͔Βဃ཭͠ͳ͍ • αϙʔτൣғ͕খ͍͞෼ɺϩοΫΠϯ͕গͳ ͍(͍͟ͱͳΕ͹ࣗ෼Ͱ࣮૷Ͱ͖ΔϨϕϧ) • ΞϓϦέʔγϣϯશମʹؔΘΔϞδϡʔϧ͸ ͳ͍ͷͰɺ෦෼తʹద༻Մೳ

Slide 42

Slide 42 text

ͦͯ͠΍͍ͬͯ͘ؾ࣋ͪ • ϑϩϯτΤϯυҕһձΛ݁੒ • bowerΛ΍Ίͯnpm΁Ҡߦ • SprocketsΛࣺͯͯwebpack΁ • ౖ౭ͷґଘղܾྗ(sprockets͔Βͷ୤٫) • React + FluxΛಋೖͰ͖Δج൫Λ੔͑ͨ

Slide 43

Slide 43 text

ﬁn..?

Slide 44

Slide 44 text

ͱ͍͏Θ͚͸ͳ͘ • ϩοΫΠϯ͠ͳ͍෼ɺ࣮૷ʹ͸ࣗ༝͕͋Δ • Actionͷ࣮૷΍IFʹ౷Ұੑ͕ͳ͍ • Storeͷঢ়ଶ͕ෳࡶʹ͋Γɺ࣌ͱͯ͠Viewʹ  ϩδοΫ͕࿙Εग़ͯ͠Δ • StoreΛݟ͚ͨͩͰ͸Ͳ͏͍͏ঢ়ଶΛ؅ཧ͍ͯ͠Δͷ ͔෼͔ΓͮΒ͍

Slide 45

Slide 45 text

ػೳ௥Ճͷࡍʹ֤૚ͷIFΛ  ཧղͤͣʹ৔౰ͨΓతʹ࣮૷ ͞ΕΔͷ͕ෳࡶ͞Λ૿͢ҰҼ ʹͳ͍ͬͯΔ

Slide 46

Slide 46 text

jsʹ΋ܕ͕͋Ε͹…

Slide 47

Slide 47 text

ܕ…

Slide 48

Slide 48 text

டং

Slide 49

Slide 49 text

ﬂowtype

Slide 50

Slide 50 text

ﬂowtype͓͞Β͍ • Facebook੡ͷJavaScriptͷੈքʹ੩తͳܕνΣοΫΛಋೖͰ͖Δπʔϧ • OCaml੡ • ASTղੳͯ͠ɺґଘؔ܎ͷ͋Δ΋ͷ͚ͩΛ  νΣοΫର৅ʹ͢ΔͷͰ2౓໨Ҏ߱ͷίϯύΠϧ͕ര଎ • ڧྗͳܕਪ࿦ • ఏڙ͢Δͷ͸ܕ෇͚༻ͷγϯλοΫεͱɺͦͷղੳͱิ׬ͷΈ  (Not AltJS) • ͢ͰʹbabelΛ࢖͍ͬͯΔ৔߹ʹ͸pluginΛ௥Ճ͢Δ͚ͩͰ͙͢࢖͑Δ

Slide 51

Slide 51 text

ཱ৔ • jsʹඞͣ͠΋ܕ͕ඞཁ͔ͱ͍͏ͱͦ͏Ͱ͸ͳ͍͚Ͳɺ  νʔϜ։ൃͰ͸ඞਢͱߟ͍͑ͯΔ • ࣗ෼͕࣮૷ͨ͠ϞδϡʔϧͷIFΛ໌֬ʹ͢Δ͜ͱͰ  յΕʹ͍࣮͘૷ʹͰ͖Δ  (յ͞ΕͨΒΤϥʔʹͳΔ) • νΣοΫ͕Ұ൪ͷ໨త͚ͩͲɺ  ิ׬ʹΑΔ։ൃޮ཰ͷ޲্΋ૂͬͯߦ͖͍ͨ

Slide 52

Slide 52 text

ﬂow-typed component UZQF1SPQT\ UJUMFTUSJOH WJTJUFECPPMFBO PO$MJDL WPJE ^ DMBTT#VUUPOFYUFOET3FBDU$PNQPOFOU\ QSPQT1SPQT TUBUF\ EJTQMBZTUBUJDcIPWFScBDUJWF ^ ʜ ^ Ϋϥε௚Լʹ1SPQTɺ4UBUFͷUZQFΛࢦఆ  ˞ཁUSBOTGPSNDMBTTQSPQFSUJFT TUBHF

Slide 53

Slide 53 text

ﬂow-typed component FYQPSUEFGBVMUDMBTT)PHF$PNQPOFOUFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO #VUUPOUJUMFIJHFWJTJUFE\GBMTF^ ^ ^ PO$MJDLϓϩύςΟΛ౉͠๨Ε͍ͯΔͷͰ  Τϥʔ͕ग़Δ qPX )PHF$PNQPFOUOKTY #VUUPOUJUMFIJHFWJTJUFE\GBMTF^ ???????????????????????????????????????3FBDUFMFNFOUA#VUUPOA QSPQT1SPQT ?????QSPQFSUZAPO$MJDLA1SPQFSUZOPUGPVOEJO4FFCVUUPOKTY #VUUPOUJUMFIJHFWJTJUFE\GBMTF^ ???????????????????????????????????????QSPQTPG3FBDUFMFNFOUA#VUUPOA

Slide 54

Slide 54 text

flow-typed action UZQF'&5$)@"--\UZQFbGFUDI@BMM` IPQFT"SSBZ)PHF^ UZQF4"7&\UZQFTBWF IPHF)PHF^ UZQF%&-&5&\UZQFEFMFUF JEOVNCFS^ FYQPSUUZQF"DUJPO5ZQFT'&5$)@"--c4"7&c%&-&5& GVODUJPOEJBQBUDI QBSBNT"DUJPO5ZQFT \ "QQ%JTQBUDIFSEJTQBUDI QBSBNT ^ FYQPSUEFGBVMU\ GFUDI"MM \ HFU bIPHF` UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFTEBUBIPHFT^ ^ ^ TBWF IPHF)PHF \ QVU AIPHF\IPHFJEÂ \ʜIPHF`TQBSBNT^   UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^ ^ ^ EFMFUF JEOVNCFS \ EFMFUF AIPHF\JEÂ UIFO @EBUB EJTQBUDI \UZQFbEFMFUF` JE^ ^ ֤"DUJPOͷUZQFΛఆٛ͠ɺ  VOJPOUZQFTͱͯ͠·ͱΊΔ BDUJPOͰEJTQBUDI͢ΔUZQFΛ  ఆٛͨ͠VOJPOUZQFTʹ͢Δ ֤EJTQBUDI͸ఆٛͨ͠  VOJPOUZQFTͷ͍ͣΕ͔Λ  ຬͨ͢

Slide 55

Slide 55 text

flow-typed action FYQPSUEFGBVMU\ GFUDI"MM \ HFU bIPHF` UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFTEBUBIPHFT^ ^ ^ TBWF IPHF)PHF \ QVU AIPHF\IPHFJEÂ \ʜIPHF`TQBSBNT^   UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^ ^ ^ EFMFUF JEOVNCFS \ EFMFUF AIPHF\JEÂ UIFO @EBUB EJTQBUDI \UZQFbEFMFUF` JE^ ^ FYQPSUEFGBVMU)PHF$PNQPOFOUFYUFOET3FBDU$PNQPOFOU\ IBOEMF$MJDL%FMFUF)PHF F \  "DUJPOEFMFUF \JEUIJTTUBUFTFMFDUFE^ ^  ʜ ^ Action Component $PNQPOFOU͔Β"DUJPO$SFBUFS Λୟ͘ࡍͷ*'΋อূ͞ΕΔ

Slide 56

Slide 56 text

ﬂow-typed state JNQPSUUZQFT\"DUJPO5ZQFT^GSPN)PHF"DUJPO FYQPSUUZQF4UBUF\IPHFT\)PHFT^^ DMBTT)PHF4UPSFFYUFOET3FEVDF4UPSF4UBUF\ HFU*OJUJBM4UBUF 4UBUF\ SFUVSO\)PHFT\^^ ^ SFEVDF TUBUF4UBUF BDUJPO"DUJPO5ZQFT 4UBUF\ TXJUDI BDUJPOUZQF \ DBTFGFUDI@BMM SFUVSO\IPHFTBDUJPOIPHFTSFEVDF D W \ DW SFUVSOD ^ \^ ^ DBTFTBWF DPOTUIPHF\^ IPHFBDUJPOIPHF SFUVSO0CKFDUBTTJHO \^ TUBUF IPHF DBTFEFMFUF SFUVSOTUBUFIPHFTTFMFDU IPHFIPHFJEBDUJPOJE ʜ "DUJPO5ZQFT VOJPOUZQFT ΛJNQPSU 4UBUFΛఆٛͯ͠4UPSFʹ౉͢  ࢖͍Έͪ͸ޙड़ DBTFจʹΑͬͯVOJPOUZQFT͕ߜΒΕΔ  BDUJPOTIPHFTʹΞΫηεͰ͖Δͷ͸GFUDI@BMMԼͷϒϩοΫ͚ͩ BDUJPOTIPHFʹΞΫηεͰ͖Δͷ͸TBWFԼͷϒϩοΫ͚ͩ BDUJPOTJEʹΞΫηεͰ͖Δͷ͸EFMFUFԼͷϒϩοΫ͚ͩ

Slide 57

Slide 57 text

ﬂow-typed store EFDMBSFNPEVMFqVYVUJMT\ EFDMBSFDMBTT3FEVDF4UPSF5\ HFU4UBUF 5 ^ ^ JNQPSU)PHF4UPSFGSPN)PHF4UPSF JNQPSUUZQF\4UBUF^GSPN)PHF4UPSF DMBTT)PHF$POUBJOFSFYUFOET3FBDU$PNQPOFOU\ TUBUF4UBUF TUBUJDHFU4UPSFT \SFUVSO<)PHF4UPSF>^ TUBUJDDBMDVMBUF4UBUF @QSFW4UBUF4UBUF 4UBUF\ SFUVSO)PHF4UPSFHFU4UBUF ^ SFOEFS \ ʜ Declare ReduceStore Component HFOFSJDTͰ4UPSFʹ༩͑ͨ  ܕΛHFU4UBUFͰड͚औΕΔΑ͏ʹ͢Δ 3FEVDF4UPSFͷHFU4UBUFΛݺͼग़ͨ࣌͠ʹ  4UPSFͰఆٛͨ͠ܕ৘ใΛड͚औΕΔ

Slide 58

Slide 58 text

We got type-safe ﬂux!

Slide 59

Slide 59 text

ͱ͍ͬͨ΋ͷͷ  ͜͜·Ͱग़དྷ͍ͯΔ  ͱ͜Ζ͕͋Δ͔ͱ͍͏ͱ  ࣮ͷͱ͜Ζ·ͩ͋·Γͳ͍ 