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

革命と秩序とSPA

joe_re
September 16, 2016

 革命と秩序とSPA

Frontend Meetup vol.1 LT
http://connpass.com/event/38112/
react + flux + floetypw

joe_re

September 16, 2016
Tweet

More Decks by joe_re

Other Decks in Technology

Transcript

  1. ֵ໋ͱடংͱSPA
    @joe_re

    View full-size slide

  2. Who am I?
    • twitter: @joe_re
    • github: @joe-re
    • freeeͱ͍͏ޒ൓ాͷ

    ձࣾͰಇ͍͍ͯ·͢
    • Ϋϥ΢υձܭιϑτΛ

    ࡞͍ͬͯ·͢

    View full-size slide

  3. ࿩͢͜ͱ
    • ϑϩϯτΤϯυͷύϥμΠϜγϑτͱ

    freeeͷؔΘΓํ
    • React + Fluxͷߏங
    • flowtypeʹΑΔtype-safe flux

    View full-size slide

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

    View full-size slide

  5. ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ
    "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!

    View full-size slide

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

    View full-size slide

  7. ͕࣌ܦͭʹͭΕߴ·ΔSPAཉ

    View full-size slide

  8. ঃʑʹBackboneMVCΛ

    ϑϧʹ׆͔ͨ͠

    ΞʔΩςΫνϟ΁

    (ϖʔδ୯ҐͰͷSPA)

    View full-size slide

  9. ͦͯ͠ߴ·ΔͭΒΈ

    View full-size slide

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

    View full-size slide

  11. freee-mvc-framework

    ͱ͍͏ࣾ಺ϑϨʔϜϫʔΫ͕

    ੜ·Εͨ

    View full-size slide

  12. freee-mvc-frameworkͰ

    ΍͍ͬͯΔ͜ͱ
    • backbone.jsΛϥοϓͯ͠ػೳڧԽ
    • viewͷΤϯτϦʔϙΠϯτͱͳΔ’page view’ͷ௥Ճ
    • backbone.jsͷϥΠϑαΠΫϧΛڧԽ
    • renderingͷޙʹɺ1౓͚ͩΑ͹ΕΔϥΠϑαΠΫϧ΍renderingޙʹݺͿϥΠϑαΠΫ
    ϧͷ௥ՃͳͲͳͲ
    • ঢ়ଶ؅ཧ΋ڧԽͯ͠ɺin-documented͔ͦ͏Ͱͳ͍͔ͳͲΛߟྀͨ͠͏͑Ͱͷ

    ϋϯυϦϯά΋Մೳʹͨ͠
    • ਌ࢠؔ܎ͷDOMૢ࡞ɺΠϕϯτϋϯυϦϯάͷڧԽ
    • ͋ͱద౰ʹศརౕΛಥͬࠐΉ

    View full-size slide

  13. ͦΕͰ΋DOMૢ࡞ͷͭΒΈ͸
    ܰݮ͞Εͳ͍͠ɺ

    ΠϕϯτϋϯυϦϯά΋

    ଟ͗ͯ͢ෳࡶոحͳͷ͸

    มΘΒͣ

    View full-size slide

  14. ͦͷࠒੈؒͰ͸

    2way-binding͕ྲྀߦ͠ɺ

    ੈ͸·͞ʹେϑϩϯτΤϯυ
    ϑϨʔϜϫʔΫ࣌୅

    (2013ʙ2014)

    View full-size slide

  15. ࣌Λಉͯ͘͡͠

    څ༩ܭࢉfreeeͷϩʔϯν

    View full-size slide

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

    View full-size slide

  17. ͱ͜ΖͰMVVMͱ͸
    7JFX
    .PEFM
    7JFX.PEFM
    User


    2way binding
    apply
    notify
    interaction
    #BDLCPOF7JFX #BDLCPOF.PEFM
    7VF

    View full-size slide

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

    View full-size slide

  19. ͦΜͳΘ͚͸ͳ͘
    • ෳ਺Ϟσϧ͕ొ৔͢ΔViewͰ͸

    VMͰؔ࿈Λ੍ޚ͢Δͷ͕ͭΒ͍
    • ModelͱVMͷঢ়ଶͷ྆ํΛ؅ཧ͢ΔͷͭΒ͍
    • ·ͱΊΔͱঢ়ଶ؅ཧͭΒ͍
    • Object.obseve΋ࢮΜͩ͠…

    View full-size slide

  20. ·͞ʹ͜Ε(͜ͷਤ͸MVC͚ͩͲ)
    https://www.infoq.com/news/2014/05/facebook-mvc-flux

    View full-size slide

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

    View full-size slide

  22. freee-mvc-framework͸

    εέʔϧ͠ͳ͍
    • ෳࡶԽ͍ͯ͘͠ΞϓϦέʔγϣϯʹ͸

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

    View full-size slide

  23. React + Flux

    View full-size slide

  24. React͓͞Β͍
    • Facebook੡ͷViewϥΠϒϥϦ
    • ঢ়ଶ؅ཧΛపఈతʹview͔Βഉআ͢Δ

    (ঢ়ଶ؅ཧ͸fluxʹΑΓStore΁)
    • Propsͱͯ͋͠Δ஋Λ౉͞ΕΔݶΓɺ

    ඞͣಉ͡ϨϯμϦϯάΛ͢Δؔ਺ܕతΞϓϩʔν

    (React͸DOMม׵ثʹͳΔ)
    • ࠩ෼Λܭࢉͯ͠൓ө͢ΔɺVirtualDOMͷ࣮૷

    View full-size slide

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

    Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ

    View full-size slide

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

    View full-size slide

  27. ԿΛબͿ͔

    ͋Δ͍͸બ͹ͳ͍͔

    View full-size slide

  28. Reduxͷ୆಄(2015೥5݄)
    • શͯͷঢ়ଶ͸1ͭͷJSONͰද͢(Single Store)
    • Data Flowͷొ৔ਓ෺(Action, Reducer)͸

    Pureͳؔ਺ʹͳΔ
    • state͕ActionΛ௨ͯ͡ߋ৽͞ΕΔࡍʹɺ

    reducerͱ͍͏Pureͳؔ਺Λ௨͢͜ͱͰߋ৽͢Δ

    View full-size slide

  29. ReduxͷੈքΛͬ͘͟Γ

    View full-size slide

  30. طଘ࣮૷͕͋Δͱ͜Ζʹ

    ಋೖ͢Δ্ͰɺRedux͸ͭΒ͍

    View full-size slide

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

    View full-size slide

  32. Single Store͸Ͳ͜ʹ

    ࣋ͭ…??

    View full-size slide

  33. flux-utilsΛ࢖͏ͱ͍͏બ୒
    • ReduxΛ࢝Ίͱ͢Δflux࣮૷Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ
    facebook͕͍͍ͱ͜औΓͨ͠(ओ؍)
    • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘

    Storeͷϕʔε࣮૷ͱContainerͱ͍͏֓೦͕௥Ճ͞Εͨ
    • fluxʹର͢Δཉ๬Λશͯຬͨ͢΋ͷͰ͸ͳ͍

    (ϛχϚϜͳ࣮૷ͰɺϩοΫΠϯ͕গͳ͍)
    • ౰࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘

    εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ΋͋Δ

    View full-size slide

  34. αϙʔτൣғ͸খ͍͞

    (ϑϨʔϜϫʔΫͰ͸ͳ͍)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. ͱ͍͏Θ͚͸ͳ͘
    • ϩοΫΠϯ͠ͳ͍෼ɺ࣮૷ʹ͸ࣗ༝͕͋Δ
    • Actionͷ࣮૷΍IFʹ౷Ұੑ͕ͳ͍
    • Storeͷঢ়ଶ͕ෳࡶʹ͋Γɺ࣌ͱͯ͠Viewʹ

    ϩδοΫ͕࿙Εग़ͯ͠Δ
    • StoreΛݟ͚ͨͩͰ͸Ͳ͏͍͏ঢ়ଶΛ؅ཧ͍ͯ͠Δͷ
    ͔෼͔ΓͮΒ͍

    View full-size slide

  39. ػೳ௥Ճͷࡍʹ֤૚ͷIFΛ

    ཧղͤͣʹ৔౰ͨΓతʹ࣮૷
    ͞ΕΔͷ͕ෳࡶ͞Λ૿͢ҰҼ
    ʹͳ͍ͬͯΔ

    View full-size slide

  40. jsʹ΋ܕ͕͋Ε͹…

    View full-size slide

  41. flowtype͓͞Β͍
    • Facebook੡ͷJavaScriptͷੈքʹ੩తͳܕνΣοΫΛಋೖͰ͖Δπʔϧ
    • OCaml੡
    • ASTղੳͯ͠ɺґଘؔ܎ͷ͋Δ΋ͷ͚ͩΛ

    νΣοΫର৅ʹ͢ΔͷͰ2౓໨Ҏ߱ͷίϯύΠϧ͕ര଎
    • ڧྗͳܕਪ࿦
    • ఏڙ͢Δͷ͸ܕ෇͚༻ͷγϯλοΫεͱɺͦͷղੳͱิ׬ͷΈ

    (Not AltJS)
    • ͢ͰʹbabelΛ࢖͍ͬͯΔ৔߹ʹ͸pluginΛ௥Ճ͢Δ͚ͩͰ͙͢࢖͑Δ

    View full-size slide

  42. ཱ৔
    • jsʹඞͣ͠΋ܕ͕ඞཁ͔ͱ͍͏ͱͦ͏Ͱ͸ͳ͍͚Ͳɺ

    νʔϜ։ൃͰ͸ඞਢͱߟ͍͑ͯΔ
    • ࣗ෼͕࣮૷ͨ͠ϞδϡʔϧͷIFΛ໌֬ʹ͢Δ͜ͱͰ

    յΕʹ͍࣮͘૷ʹͰ͖Δ

    (յ͞ΕͨΒΤϥʔʹͳΔ)
    • νΣοΫ͕Ұ൪ͷ໨త͚ͩͲɺ

    ิ׬ʹΑΔ։ൃޮ཰ͷ޲্΋ૂͬͯߦ͖͍ͨ

    View full-size slide

  43. flow-typed component
    UZQF1SPQT\
    UJUMFTUSJOH
    WJTJUFECPPMFBO
    PO$MJDL
    WPJE
    ^
    DMBTT#VUUPOFYUFOET3FBDU$PNQPOFOU\
    QSPQT1SPQT
    TUBUF\
    EJTQMBZTUBUJDcIPWFScBDUJWF
    ^
    ʜ
    ^
    Ϋϥε௚Լʹ1SPQTɺ4UBUFͷUZQFΛࢦఆ

    ˞ཁUSBOTGPSNDMBTTQSPQFSUJFT TUBHF

    View full-size slide

  44. flow-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

    View full-size slide

  45. 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^A \ʜIPHF`TQBSBNT^

    UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^
    ^

    ^
    EFMFUF JEOVNCFS
    \
    EFMFUF AIPHF\JE^A
    UIFO @EBUB
    EJTQBUDI \UZQFbEFMFUF` JE^


    ^
    ֤"DUJPOͷUZQFΛఆٛ͠ɺ

    VOJPOUZQFTͱͯ͠·ͱΊΔ
    BDUJPOͰEJTQBUDI͢ΔUZQFΛ

    ఆٛͨ͠VOJPOUZQFTʹ͢Δ
    ֤EJTQBUDI͸ఆٛͨ͠

    VOJPOUZQFTͷ͍ͣΕ͔Λ

    ຬͨ͢

    View full-size slide

  46. flow-typed action
    FYQPSUEFGBVMU\
    GFUDI"MM
    \
    HFU bIPHF`
    UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFTEBUBIPHFT^
    ^

    ^
    TBWF IPHF)PHF
    \
    QVU AIPHF\IPHFJE^A \ʜIPHF`TQBSBNT^

    UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^
    ^

    ^
    EFMFUF JEOVNCFS
    \
    EFMFUF AIPHF\JE^A
    UIFO @EBUB
    EJTQBUDI \UZQFbEFMFUF` JE^


    ^
    FYQPSUEFGBVMU)PHF$PNQPOFOUFYUFOET3FBDU$PNQPOFOU\
    IBOEMF$MJDL%FMFUF)PHF F
    \

    "DUJPOEFMFUF \JEUIJTTUBUFTFMFDUFE^

    ^

    ʜ
    ^
    Action
    Component
    $PNQPOFOU͔Β"DUJPO$SFBUFS
    Λୟ͘ࡍͷ*'΋อূ͞ΕΔ

    View full-size slide

  47. flow-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ԼͷϒϩοΫ͚ͩ

    View full-size slide

  48. flow-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Ͱఆٛͨ͠ܕ৘ใΛड͚औΕΔ

    View full-size slide

  49. We got type-safe flux!

    View full-size slide

  50. ͱ͍ͬͨ΋ͷͷ

    ͜͜·Ͱग़དྷ͍ͯΔ

    ͱ͜Ζ͕͋Δ͔ͱ͍͏ͱ

    ࣮ͷͱ͜Ζ·ͩ͋·Γͳ͍


    View full-size slide

  51. We are hiring!
    http://jobs.jobvite.com/freee/jobs

    View full-size slide

  52. Thank you

    for your attention!

    View full-size slide