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
800
Real-Time applications with GraphQL
joere
0
140
Prisma2 with Graphql
joere
3
880
Go beyound static on Netlify
joere
1
220
Building Real-time Vue App
joere
4
4.4k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
270
Mock Native API in your E2E test
joere
2
1k
Data feching and caching on Apollo Client
joere
2
2.6k
Typed Vuex Data Flow
joere
0
530
Other Decks in Technology
See All in Technology
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
地理情報とAPIのトレンド
nagix
0
160
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Clear Off the Table
cherdarchuk
89
320k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Infographics Made Easy
chrislema
238
18k
Scaling GitHub
holman
458
140k
The Invisible Side of Design
smashingmag
294
50k
BBQ
matthewcrist
82
9k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
How STYLIGHT went responsive
nonsquared
93
5k
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!