Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
革命と秩序とSPA
Search
joe_re
September 16, 2016
Technology
9
14k
革命と秩序とSPA
Frontend Meetup vol.1 LT
http://connpass.com/event/38112/
react + flux + floetypw
joe_re
September 16, 2016
Tweet
Share
More Decks by joe_re
See All by joe_re
Traversing the GraphQL AST and Calculating Query Costs
joere
0
890
Real-Time applications with GraphQL
joere
0
160
Prisma2 with Graphql
joere
3
880
Go beyound static on Netlify
joere
1
240
Building Real-time Vue App
joere
4
4.5k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
280
Mock Native API in your E2E test
joere
2
1.1k
Data feching and caching on Apollo Client
joere
2
2.7k
Typed Vuex Data Flow
joere
0
540
Other Decks in Technology
See All in Technology
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
820
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
APIテスト自動化の勘所
yokawasa
7
4.1k
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Typedesign – Prime Four
hannesfritz
39
2.4k
Documentation Writing (for coders)
carmenintech
65
4.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
We Have a Design System, Now What?
morganepeng
50
7.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Practical Orchestrator
shlominoach
186
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
What's new in Ruby 2.0
geeforr
342
31k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Transcript
ֵ໋ͱடংͱSPA @joe_re
Who am I? • twitter: @joe_re • github: @joe-re •
freeeͱ͍͏ޒాͷ ձࣾͰಇ͍͍ͯ·͢ • ΫϥυձܭιϑτΛ ࡞͍ͬͯ·͢
None
͢͜ͱ • ϑϩϯτΤϯυͷύϥμΠϜγϑτͱ freeeͷؔΘΓํ • React + Fluxͷߏங • flowtypeʹΑΔtype-safe
flux
ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ http://qiita.com/joe-re/items/3b6730eb90dbeb2f8272
ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "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!
ॳظͷձܭfreeeͷϑϩϯτΤϯυ • 2012࣌ΑΖ͘͠ɺϑϩϯτBackbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.jsಈ͖Λ͚ͭΔఔ • SPAͰͳ͍
͕࣌ܦͭʹͭΕߴ·ΔSPAཉ
ঃʑʹBackboneMVCΛ ϑϧʹ׆͔ͨ͠ ΞʔΩςΫνϟ (ϖʔδ୯ҐͰͷSPA)
ͦͯ͠ߴ·ΔͭΒΈ
ͭΒΈ • Backbone.jsͷviewಉ࢜ͷΠϕϯτϋϯυϦϯάͭ Β͍ • ࢠؔʹ͋Δviewͷఆ͕ٛᐆດ • ։ൃऀ͕૿͑Δʹ͕ͨͬͯ͠ɺΠϕϯτͷߪಡղআ ϛεʹΑΔϝϞϦϦʔΫ͕ى͖ͨΓͯͨ͠ •
ͦͦDOMૢ࡞ਓؒͷΔ͜ͱ͡Όͳ͍
ֵ໋
freee-mvc-framework ͱ͍͏ࣾϑϨʔϜϫʔΫ͕ ੜ·Εͨ
freee-mvc-frameworkͰ ͍ͬͯΔ͜ͱ • backbone.jsΛϥοϓͯ͠ػೳڧԽ • viewͷΤϯτϦʔϙΠϯτͱͳΔ’page view’ͷՃ • backbone.jsͷϥΠϑαΠΫϧΛڧԽ •
renderingͷޙʹɺ1͚ͩΑΕΔϥΠϑαΠΫϧrenderingޙʹݺͿϥΠϑαΠΫ ϧͷՃͳͲͳͲ • ঢ়ଶཧڧԽͯ͠ɺin-documented͔ͦ͏Ͱͳ͍͔ͳͲΛߟྀͨ͠͏͑Ͱͷ ϋϯυϦϯάՄೳʹͨ͠ • ࢠؔͷDOMૢ࡞ɺΠϕϯτϋϯυϦϯάͷڧԽ • ͋ͱదʹศརౕΛಥͬࠐΉ
ͦΕͰDOMૢ࡞ͷͭΒΈ ܰݮ͞Εͳ͍͠ɺ ΠϕϯτϋϯυϦϯά ଟ͗ͯ͢ෳࡶոحͳͷ มΘΒͣ
ͦͷࠒੈؒͰ 2way-binding͕ྲྀߦ͠ɺ ੈ·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌ (2013ʙ2014)
࣌Λಉͯ͘͡͠ څ༩ܭࢉfreeeͷϩʔϯν
څ༩ܭࢉfreeeͷελοΫ • freee-js-framework(based on backbone) • Vue.js(MVVM) • શͳSPA
ͱ͜ΖͰMVVMͱ 7JFX .PEFM 7JFX.PEFM User 2way binding apply notify interaction
#BDLCPOF7JFX #BDLCPOF.PEFM 7VF
MVVMʹΑͬͯಘͨͷ • 2way-bindingʹΑΔDOMૢ࡞͔Βͷ։์ • Viewঢ়ଶΛ࣋ͨͳͯ͘ྑ͍(VM) • View͔ΒࡶͳϩδοΫͷআڈ
fin..?
ͦΜͳΘ͚ͳ͘ • ෳϞσϧ͕ొ͢ΔViewͰ VMͰؔ࿈Λ੍ޚ͢Δͷ͕ͭΒ͍ • ModelͱVMͷঢ়ଶͷ྆ํΛཧ͢ΔͷͭΒ͍ • ·ͱΊΔͱঢ়ଶཧͭΒ͍ • Object.obseveࢮΜͩ͠…
·͞ʹ͜Ε(͜ͷਤMVC͚ͩͲ) https://www.infoq.com/news/2014/05/facebook-mvc-flux
͋ͱVue.jsɺ0.10.6͔Β0.11.x ͷBreaking changesଟ͗͢ • https://github.com/vuejs/vue/wiki/0.10- to-0.11-migration-guide
freee-mvc-framework εέʔϧ͠ͳ͍ • ෳࡶԽ͍ͯ͘͠ΞϓϦέʔγϣϯʹ ঃʑʹଠଧͪͰ͖ͳ͘ͳ͍ͬͯΔ • ΠϕϯτϋϯυϦϯάViewͷࢠؔΛՄࢹԽ͢Δ͜ͱ ͕ୈҰͷతͳͷͰɺDOMૢ࡞ͷͭΒܰ͞ݮ͞Εͳ͍ • ύϥμΠϜͷมԽʹରԠ͢Δؾྗͳ͘ɺਰୀ͍ͯ͘͠
• ·͊ࣾಠࣗFWͷ࿏ͳΜͯ͜ΜͳͷͰ͢ΑͶ
ֵ໋
React + Flux
React͓͞Β͍ • FacebookͷViewϥΠϒϥϦ • ঢ়ଶཧΛపఈతʹview͔Βഉআ͢Δ (ঢ়ଶཧfluxʹΑΓStore) • Propsͱͯ͋͠ΔΛ͞ΕΔݶΓɺ ඞͣಉ͡ϨϯμϦϯάΛ͢ΔؔܕతΞϓϩʔν (ReactDOMมثʹͳΔ)
• ࠩΛܭࢉͯ͠ө͢ΔɺVirtualDOMͷ࣮
Flux͓͞Β͍ • ୯ํσʔλϑϩʔΛ࣮ݱ͢Δ࣮ύλʔϯ • ActionCreator → Dispatcher → Store →
View • Component͔Βঢ়ଶΓ͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫStoreʹͭΊ͜ΈɺViewʹඳըʹඞཁͳใ͕ߏࡁΈ Ͱ௨͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
2015ॳ಄ɺԶ͕࠷ڧͷFlux ࣮ͩઓ૪ຄൃ • Alt • Reflux • Fluxxor • Fluxible
• nuclear-js • Arda • Material Flux • Delorean • Flummox • Redux • etc...
ଟ͍…
ԿΛબͿ͔ ͋Δ͍બͳ͍͔
Reduxͷ಄(20155݄) • શͯͷঢ়ଶ1ͭͷJSONͰද͢(Single Store) • Data Flowͷొਓ(Action, Reducer) PureͳؔʹͳΔ •
state͕ActionΛ௨ͯ͡ߋ৽͞ΕΔࡍʹɺ reducerͱ͍͏PureͳؔΛ௨͢͜ͱͰߋ৽͢Δ
ReduxͷੈքΛͬ͘͟Γ
طଘ࣮͕͋Δͱ͜Ζʹ ಋೖ͢Δ্ͰɺReduxͭΒ͍
ͪͳΈʹ࠷ॳʹಋೖ͞Εͨػೳ ͜Ε(on Backbone view)
Single StoreͲ͜ʹ ࣋ͭ…??
flux-utilsΛ͏ͱ͍͏બ • ReduxΛ࢝Ίͱ͢Δflux࣮Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ facebook͕͍͍ͱ͜औΓͨ͠(ओ؍) • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘ Storeͷϕʔε࣮ͱContainerͱ͍͏֓೦͕Ճ͞Εͨ • fluxʹର͢ΔཉΛશͯຬͨ͢ͷͰͳ͍ (ϛχϚϜͳ࣮ͰɺϩοΫΠϯ͕গͳ͍)
• ࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘ εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ͋Δ
αϙʔτൣғখ͍͞ (ϑϨʔϜϫʔΫͰͳ͍)
Reduxͱͷڞ௨ • ContainerComponent → Container • Reducer → Reduce Store
flux-utilsͷ͍͍ͱ͜Ζ • طଘͷflux͔Βဃ͠ͳ͍ • αϙʔτൣғ͕খ͍͞ɺϩοΫΠϯ͕গͳ ͍(͍͟ͱͳΕࣗͰ࣮Ͱ͖ΔϨϕϧ) • ΞϓϦέʔγϣϯશମʹؔΘΔϞδϡʔϧ ͳ͍ͷͰɺ෦తʹద༻Մೳ
͍ͦͯͬͯ͘͠ؾ࣋ͪ • ϑϩϯτΤϯυҕһձΛ݁ • bowerΛΊͯnpmҠߦ • SprocketsΛࣺͯͯwebpack • ౖ౭ͷґଘղܾྗ(sprockets͔Βͷ٫) •
React + FluxΛಋೖͰ͖Δج൫Λ͑ͨ
fin..?
ͱ͍͏Θ͚ͳ͘ • ϩοΫΠϯ͠ͳ͍ɺ࣮ʹࣗ༝͕͋Δ • Actionͷ࣮IFʹ౷Ұੑ͕ͳ͍ • Storeͷঢ়ଶ͕ෳࡶʹ͋Γɺ࣌ͱͯ͠Viewʹ ϩδοΫ͕࿙Εग़ͯ͠Δ • StoreΛݟ͚ͨͩͰͲ͏͍͏ঢ়ଶΛཧ͍ͯ͠Δͷ
͔͔ΓͮΒ͍
ػೳՃͷࡍʹ֤ͷIFΛ ཧղͤͣʹͨΓతʹ࣮ ͞ΕΔͷ͕ෳࡶ͞Λ૿͢ҰҼ ʹͳ͍ͬͯΔ
jsʹܕ͕͋Ε…
ܕ…
டং
flowtype
flowtype͓͞Β͍ • FacebookͷJavaScriptͷੈքʹ੩తͳܕνΣοΫΛಋೖͰ͖Δπʔϧ • OCaml • ASTղੳͯ͠ɺґଘؔͷ͋Δͷ͚ͩΛ νΣοΫରʹ͢ΔͷͰ2Ҏ߱ͷίϯύΠϧ͕ര • ڧྗͳܕਪ
• ఏڙ͢Δͷܕ͚༻ͷγϯλοΫεͱɺͦͷղੳͱิͷΈ (Not AltJS) • ͢ͰʹbabelΛ͍ͬͯΔ߹ʹpluginΛՃ͢Δ͚ͩͰ͙͑͢Δ
ཱ • jsʹඞͣ͠ܕ͕ඞཁ͔ͱ͍͏ͱͦ͏Ͱͳ͍͚Ͳɺ νʔϜ։ൃͰඞਢͱߟ͍͑ͯΔ • ͕࣮ࣗͨ͠ϞδϡʔϧͷIFΛ໌֬ʹ͢Δ͜ͱͰ յΕʹ͍࣮͘ʹͰ͖Δ (յ͞ΕͨΒΤϥʔʹͳΔ) • νΣοΫ͕Ұ൪ͷత͚ͩͲɺ
ิʹΑΔ։ൃޮͷ্ૂͬͯߦ͖͍ͨ
flow-typed component UZQF1SPQT\ UJUMFTUSJOH WJTJUFECPPMFBO PO$MJDL WPJE
^ DMBTT#VUUPOFYUFOET3FBDU$PNQPOFOU\ QSPQT1SPQT TUBUF\ EJTQMBZTUBUJDcIPWFScBDUJWF ^ ʜ ^ ΫϥεԼʹ1SPQTɺ4UBUFͷUZQFΛࢦఆ ˞ཁUSBOTGPSNDMBTTQSPQFSUJFT TUBHF
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
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ͷ͍ͣΕ͔Λ ຬͨ͢
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 Λୟ͘ࡍͷ*'อূ͞ΕΔ
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ԼͷϒϩοΫ͚ͩ
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Ͱఆٛͨ͠ܕใΛड͚औΕΔ
We got type-safe flux!
ͱ͍ͬͨͷͷ ͜͜·Ͱग़དྷ͍ͯΔ ͱ͜Ζ͕͋Δ͔ͱ͍͏ͱ ࣮ͷͱ͜Ζ·ͩ͋·Γͳ͍
We are hiring! http://jobs.jobvite.com/freee/jobs
Thank you for your attention!