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

革命と秩序とSPA

B72422afc5f3ffc844f672b59122e16d?s=47 joe_re
September 16, 2016

 革命と秩序とSPA

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

B72422afc5f3ffc844f672b59122e16d?s=128

joe_re

September 16, 2016
Tweet

Transcript

  1. ֵ໋ͱடংͱSPA @joe_re

  2. Who am I? • twitter: @joe_re • github: @joe-re •

    freeeͱ͍͏ޒ൓ాͷ
 ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ
 ࡞͍ͬͯ·͢
  3. None
  4. ࿩͢͜ͱ • ϑϩϯτΤϯυͷύϥμΠϜγϑτͱ
 freeeͷؔΘΓํ • React + Fluxͷߏங • flowtypeʹΑΔtype-safe

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

  6. ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "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!
  7. ॳظͷձܭfreeeͷϑϩϯτΤϯυ • 2012೥౰࣌ΑΖ͘͠ɺϑϩϯτ͸Backbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.js͸ಈ͖Λ͚ͭΔఔ౓ • SPAͰ͸ͳ͍

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

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

  10. ͦͯ͠ߴ·ΔͭΒΈ

  11. ͭΒΈ • Backbone.jsͷviewಉ࢜ͷΠϕϯτϋϯυϦϯάͭ Β͍ • ਌ࢠؔ܎ʹ͋Δviewͷఆ͕ٛᐆດ • ։ൃऀ͕૿͑Δʹ͕ͨͬͯ͠ɺΠϕϯτͷߪಡղআ ϛεʹΑΔϝϞϦϦʔΫ͕ى͖ͨΓͯͨ͠ •

    ͦ΋ͦ΋DOMૢ࡞ਓؒͷ΍Δ͜ͱ͡Όͳ͍
  12. ֵ໋

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

  14. freee-mvc-frameworkͰ
 ΍͍ͬͯΔ͜ͱ • backbone.jsΛϥοϓͯ͠ػೳڧԽ • viewͷΤϯτϦʔϙΠϯτͱͳΔ’page view’ͷ௥Ճ • backbone.jsͷϥΠϑαΠΫϧΛڧԽ •

    renderingͷޙʹɺ1౓͚ͩΑ͹ΕΔϥΠϑαΠΫϧ΍renderingޙʹݺͿϥΠϑαΠΫ ϧͷ௥ՃͳͲͳͲ • ঢ়ଶ؅ཧ΋ڧԽͯ͠ɺin-documented͔ͦ͏Ͱͳ͍͔ͳͲΛߟྀͨ͠͏͑Ͱͷ
 ϋϯυϦϯά΋Մೳʹͨ͠ • ਌ࢠؔ܎ͷDOMૢ࡞ɺΠϕϯτϋϯυϦϯάͷڧԽ • ͋ͱద౰ʹศརౕΛಥͬࠐΉ
  15. ͦΕͰ΋DOMૢ࡞ͷͭΒΈ͸ ܰݮ͞Εͳ͍͠ɺ
 ΠϕϯτϋϯυϦϯά΋
 ଟ͗ͯ͢ෳࡶոحͳͷ͸
 มΘΒͣ

  16. ͦͷࠒੈؒͰ͸
 2way-binding͕ྲྀߦ͠ɺ
 ੈ͸·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌୅
 (2013ʙ2014)

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

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

  19. ͱ͜ΖͰMVVMͱ͸ 7JFX .PEFM 7JFX.PEFM User
 2way binding apply notify interaction

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

  21. fin..?

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

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

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

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

    • ·͊ࣾ಺ಠࣗFWͷ຤࿏ͳΜͯ͜Μͳ΋ͷͰ͢ΑͶ
  26. ֵ໋

  27. React + Flux

  28. React͓͞Β͍ • Facebook੡ͷViewϥΠϒϥϦ • ঢ়ଶ؅ཧΛపఈతʹview͔Βഉআ͢Δ
 (ঢ়ଶ؅ཧ͸fluxʹΑΓStore΁) • Propsͱͯ͋͠Δ஋Λ౉͞ΕΔݶΓɺ
 ඞͣಉ͡ϨϯμϦϯάΛ͢Δؔ਺ܕతΞϓϩʔν
 (React͸DOMม׵ثʹͳΔ)

    • ࠩ෼Λܭࢉͯ͠൓ө͢ΔɺVirtualDOMͷ࣮૷
  29. Flux͓͞Β͍ • ୯ํ޲σʔλϑϩʔΛ࣮ݱ͢Δ࣮૷ύλʔϯ • ActionCreator → Dispatcher → Store →

    View • Component͔Βঢ়ଶ͸੾Γ཭͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫ͸StoreʹͭΊ͜ΈɺViewʹ͸ඳըʹඞཁͳ৘ใ͕ߏ੒ࡁΈ
 Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
  30. 2015೥ॳ಄ɺԶ͕࠷ڧͷFlux ࣮૷ͩઓ૪ຄൃ • Alt • Reflux • Fluxxor • Fluxible

    • nuclear-js • Arda • Material Flux • Delorean • Flummox • Redux • etc...
  31. ଟ͍…

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

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

    state͕ActionΛ௨ͯ͡ߋ৽͞ΕΔࡍʹɺ
 reducerͱ͍͏Pureͳؔ਺Λ௨͢͜ͱͰߋ৽͢Δ
  34. ReduxͷੈքΛͬ͘͟Γ

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

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

  37. Single Store͸Ͳ͜ʹ
 ࣋ͭ…??

  38. flux-utilsΛ࢖͏ͱ͍͏બ୒ • ReduxΛ࢝Ίͱ͢Δflux࣮૷Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ facebook͕͍͍ͱ͜औΓͨ͠(ओ؍) • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘
 Storeͷϕʔε࣮૷ͱContainerͱ͍͏֓೦͕௥Ճ͞Εͨ • fluxʹର͢Δཉ๬Λશͯຬͨ͢΋ͷͰ͸ͳ͍
 (ϛχϚϜͳ࣮૷ͰɺϩοΫΠϯ͕গͳ͍)

    • ౰࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘
 εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ΋͋Δ
  39. αϙʔτൣғ͸খ͍͞
 (ϑϨʔϜϫʔΫͰ͸ͳ͍)

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

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

  42. ͦͯ͠΍͍ͬͯ͘ؾ࣋ͪ • ϑϩϯτΤϯυҕһձΛ݁੒ • bowerΛ΍Ίͯnpm΁Ҡߦ • SprocketsΛࣺͯͯwebpack΁ • ౖ౭ͷґଘղܾྗ(sprockets͔Βͷ୤٫) •

    React + FluxΛಋೖͰ͖Δج൫Λ੔͑ͨ
  43. fin..?

  44. ͱ͍͏Θ͚͸ͳ͘ • ϩοΫΠϯ͠ͳ͍෼ɺ࣮૷ʹ͸ࣗ༝͕͋Δ • Actionͷ࣮૷΍IFʹ౷Ұੑ͕ͳ͍ • Storeͷঢ়ଶ͕ෳࡶʹ͋Γɺ࣌ͱͯ͠Viewʹ
 ϩδοΫ͕࿙Εग़ͯ͠Δ • StoreΛݟ͚ͨͩͰ͸Ͳ͏͍͏ঢ়ଶΛ؅ཧ͍ͯ͠Δͷ

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

  46. jsʹ΋ܕ͕͋Ε͹…

  47. ܕ…

  48. டং

  49. flowtype

  50. flowtype͓͞Β͍ • Facebook੡ͷJavaScriptͷੈքʹ੩తͳܕνΣοΫΛಋೖͰ͖Δπʔϧ • OCaml੡ • ASTղੳͯ͠ɺґଘؔ܎ͷ͋Δ΋ͷ͚ͩΛ
 νΣοΫର৅ʹ͢ΔͷͰ2౓໨Ҏ߱ͷίϯύΠϧ͕ര଎ • ڧྗͳܕਪ࿦

    • ఏڙ͢Δͷ͸ܕ෇͚༻ͷγϯλοΫεͱɺͦͷղੳͱิ׬ͷΈ
 (Not AltJS) • ͢ͰʹbabelΛ࢖͍ͬͯΔ৔߹ʹ͸pluginΛ௥Ճ͢Δ͚ͩͰ͙͢࢖͑Δ
  51. ཱ৔ • jsʹඞͣ͠΋ܕ͕ඞཁ͔ͱ͍͏ͱͦ͏Ͱ͸ͳ͍͚Ͳɺ
 νʔϜ։ൃͰ͸ඞਢͱߟ͍͑ͯΔ • ࣗ෼͕࣮૷ͨ͠ϞδϡʔϧͷIFΛ໌֬ʹ͢Δ͜ͱͰ
 յΕʹ͍࣮͘૷ʹͰ͖Δ
 (յ͞ΕͨΒΤϥʔʹͳΔ) • νΣοΫ͕Ұ൪ͷ໨త͚ͩͲɺ


    ิ׬ʹΑΔ։ൃޮ཰ͷ޲্΋ૂͬͯߦ͖͍ͨ
  52. flow-typed component UZQF1SPQT\ UJUMFTUSJOH  WJTJUFECPPMFBO  PO$MJDL WPJE 

    ^ DMBTT#VUUPOFYUFOET3FBDU$PNQPOFOU\ QSPQT1SPQT TUBUF\ EJTQMBZTUBUJDcIPWFScBDUJWF ^ ʜ ^ Ϋϥε௚Լʹ1SPQTɺ4UBUFͷUZQFΛࢦఆ
 ˞ཁUSBOTGPSNDMBTTQSPQFSUJFT TUBHF
  53. 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
  54. 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ͷ͍ͣΕ͔Λ
 ຬͨ͢
  55. 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 Λୟ͘ࡍͷ*'΋อূ͞ΕΔ
  56. flow-typed state JNQPSUUZQFT\"DUJPO5ZQFT^GSPN)PHF"DUJPO FYQPSUUZQF4UBUF\IPHFT\<LFZOVNCFS>)PHFT^^ DMBTT)PHF4UPSFFYUFOET3FEVDF4UPSF4UBUF\ HFU*OJUJBM4UBUF 4UBUF\ SFUVSO\)PHFT\^^ ^ SFEVDF

    TUBUF4UBUF BDUJPO"DUJPO5ZQFT 4UBUF\ TXJUDI BDUJPOUZQF \ DBTFGFUDI@BMM SFUVSO\IPHFTBDUJPOIPHFTSFEVDF D W \ D<WJE>W SFUVSOD ^ \^ ^ DBTFTBWF DPOTUIPHF\^ IPHF<BDUJPOIPHFJE>BDUJPOIPHF SFUVSO0CKFDUBTTJHO \^ TUBUF IPHF  DBTFEFMFUF SFUVSOTUBUFIPHFTTFMFDU IPHFIPHFJEBDUJPOJE  ʜ "DUJPO5ZQFT VOJPOUZQFT ΛJNQPSU 4UBUFΛఆٛͯ͠4UPSFʹ౉͢
 ࢖͍Έͪ͸ޙड़ DBTFจʹΑͬͯVOJPOUZQFT͕ߜΒΕΔ
 BDUJPOTIPHFTʹΞΫηεͰ͖Δͷ͸GFUDI@BMMԼͷϒϩοΫ͚ͩ BDUJPOTIPHFʹΞΫηεͰ͖Δͷ͸TBWFԼͷϒϩοΫ͚ͩ BDUJPOTJEʹΞΫηεͰ͖Δͷ͸EFMFUFԼͷϒϩοΫ͚ͩ
  57. 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Ͱఆٛͨ͠ܕ৘ใΛड͚औΕΔ
  58. We got type-safe flux!

  59. ͱ͍ͬͨ΋ͷͷ
 ͜͜·Ͱग़དྷ͍ͯΔ
 ͱ͜Ζ͕͋Δ͔ͱ͍͏ͱ
 ࣮ͷͱ͜Ζ·ͩ͋·Γͳ͍


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

  61. Thank you
 for your attention!