Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンドのパラダイムシフトとプロダクトの成長
joe_re
November 05, 2016
Technology
18
12k
フロントエンドのパラダイムシフトとプロダクトの成長
Front Line of Frontend − Forkwell Meetup #2 発表資料
http://forkwell.connpass.com/event/42527/
joe_re
November 05, 2016
Tweet
Share
More Decks by joe_re
See All by joe_re
Prisma2 with Graphql
joere
3
760
Go beyound static on Netlify
joere
1
160
Building Real-time Vue App
joere
4
4k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
200
Mock Native API in your E2E test
joere
2
870
Data feching and caching on Apollo Client
joere
2
2.2k
Typed Vuex Data Flow
joere
0
440
AsyncStorageをNodeのREPLから操作するためにTop-levelでawaitしたい人生だった
joere
0
400
Our choice in ReactNative
joere
8
8.3k
Other Decks in Technology
See All in Technology
5分で完全理解するGoのiota
uji
3
2.1k
SRE の歩き方・進め方 / sre-walk-through-procedure
rrreeeyyy
0
570
プルリク作ったらデプロイされる仕組み on ECS / SRE NEXT 2022
carta_engineering
1
530
Whats new in Android Media?
myolwin00
2
120
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう!
moritamasami
1
590
キャッチアップ Android 13 / Catch up Android 13
yanzm
2
1.2k
Poolにおける足を止めないシステム基盤構築
winebarrel
3
1.1k
A1A会社紹介資料-2022-05-20
a1a
2
1.1k
AI Company
shurain
0
490
アルプの 認証/認可分離戦略と手法
ma2k8
PRO
2
360
[SRE NEXT 2022]KaaS桶狭間の戦い 〜Yahoo! JAPANのSLI/SLOを用いた統合監視〜
srenext
0
540
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
8k
Featured
See All Featured
Optimizing for Happiness
mojombo
365
63k
What's in a price? How to price your products and services
michaelherold
229
9.3k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Clear Off the Table
cherdarchuk
79
280k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Facilitating Awesome Meetings
lara
29
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Atom: Resistance is Futile
akmur
255
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Transcript
ϑϩϯτΤϯυͷ ύϥμΠϜγϑτͱ ϓϩμΫτͷ @joe_re
Who am I? • twitter: @joe_re • github: @joe-re •
freeeͱ͍͏ޒాͷ ձࣾͰಇ͍͍ͯ·͢ • ΫϥυձܭιϑτΛ ࡞͍ͬͯ·͢
None
ࠓ͢͜ͱ • freeeͷϏϧυϓϩηεͷมԽ • ੈͷதͷύϥμΠϜγϑτͱ freeeͷϑϩϯτΤϯυͷมԽ • ਓྨڞ௨ίϯϙʔωϯτͷೖख • ։ൃ৫
freeeͷϑϩϯτΤϯυͷࠓͱੲ 2012(ϩʔϯν࣌) 2016(ݱࡏ) • BowerͰdependenciesͷཧ (use bower-rails) • CoffeeScript •
SproketsʹΑΔassetsͷbuild • BackboneMVC(not SPA) • npmͰdependenciesͷཧ • ESNext • gulp + WebpackʹΑΔassetsͷ build(Babel) • React + Flux(෦తͳSPA) • flowtype
ϏϧυϓϩηεͷมԽ
SprocketsΛࣺ͍ͯͨʂ • http://www.slideshare.net/ masatonoguchi169/sprockets-49965435
ͦͦSprocketsͱ • Railsඪ४ͷΞηοτͷϓϦϓϩηοα(Ruby) • AltJSɺSassͷτϥϯεύΠϧ • concatɺuglifyɺminifyɺfingerprintͷ༩ • ґଘؔͷఆٛ(requireσΟϨΫςΟϒͷఏڙ)
Sprocketsͷ • ϑϩϯτΤϯυͷπʔϧख़͠ɺ Sprocketsͷ͍ͬͯͨ͜ͱͯ͢ସͰ͖ΔΑ͏ʹ ͳͬͨ • جຊతʹGemԽ͞Ε͍ͯͳ͍ͱ͑ͳ͍ • ES Modules/CommonJSʹΑΔґଘղܾ͕Ͱ͖ͳ͍
• ϑϩϯτଆ·ͰRailsʹϩοΫΠϯ͞Εͯ͠·͏
Sprocketsͷrequire • ͜ͷॱ൪ΛकΒͳ͍ͱࢮ͵
͜ΕΛ͍ͬͯͯ ϞδϡʔϧԽ͞Εͨ ESNextͷੈքʹ͍ͭ·Ͱ ౸ୡͰ͖ͳ͍
gulp + webpackͷಋೖ • ES Modules/CommonJSʹΑΔґଘղܾ • npm͔ΒϥΠϒϥϦΛ importͰ͖Δੈք •
WebpackͰbundle͢Δ͜ͱͰɺ css modules͕ಋೖՄೳʹ
app/assetsʹϑϩϯτͷ Ϗϧυ݁ՌΛग़ྗ͢Δͱ͍͏બ • ϑϩϯτΤϯυͷϏϧυ݁ՌΛapp/assetsʹग़ྗ ͠ɺ࠷ऴతʹ࠶ͼSprocketsΛ௨͢ • طଘͷσϓϩΠϑϩʔΛม͑ͣʹ Ճ͢ΔܗͰͤΒΕΔͷͰಋೖָ͕ • Sprocketsʹґଘ͍ͯ͠ΔϑΝΠϧ
ͻͱ·ͣԿߟ͑ͣʹίϐʔ͓͚ͯ͠ಈ͘
MPDBMEJSFDUPSZ GSPOUEJSFDUPSZ SBJMTBTTFUTEJSFDUPSZ BQQBTTFUT Ϗϧυͷߏ gulpɺwebpack - transpile(coffee,esnext,sass) - concat
- uglify - minify QSPEVDUJPOTFSWFS sprockets - resolve server context - fingerprint QVCMJDEJSFDUPSZ
࣍ʹΔ͖͜ͱ • Railsʹґଘ͍ͯ͠ΔϏϧυΛऔΓআ͘ • WebpackͷϏϧυ࣌ʹmanifest.jsonΛ ੜ͠ɺSprocketsͷશʹ͍Βͳ͍ੈք
৽ͨʹු্͢Δ՝ • RailsଆͱͲ͏ͯ͠ڞ༗͍ͨ͠ͷ Ͳ͏͢Δ͖͔(i18nimageͳͲ) • େྔͷjs(1500)ͱෳͷentry point(80)ʹର͢ΔϦιʔε ෆ(ॳճϏϧυʹ2͔͔Δ) • େنϓϩμΫτʹର͢ΔϑϩϯτΤϯυͷ
Ϗϧυڥߏங͕͋·Γੈʹݟ͕ͳ͍ • ͍ͬͯ͘ؾ࣋ͪ
͍ͬͯ͘ؾ࣋ͪ • http://www.slideshare.net/tkm64/webpack-62692382
ੈͷதͷύϥμΠϜγϑτͱ freeeͷϑϩϯτΤϯυͷมԽ
ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "KBYͷൃݟ 1SPUPUZQFKTɺK2VFSZͷ੮ר #BDLCPOFKTͷొ ϑϩϯτΤϯυʹ.7$͕࣋ͪࠐ·ΕΔ XBZCJOEJOHͷྲྀߦ .77. "OHVMBSKTɺ7VFKTɺ.BSJOPOFUUFKTFUDʜ ձܭGSFFFϩʔϯν
7JSUVBM%0.ͷొ %FLVɺ3FBDUɺ7VFKT Y FUDʜ main topics of frontend history of freee 2010 2005 2012 2014 څ༩ܭࢉGSFFFϩʔϯν ձܭGSFFF։ൃ։࢝ ձࣾઃཱGSFFFϩʔϯν now!
ॳظͷfreeeͷϑϩϯτΤϯυ • 2012࣌ΑΖ͘͠ɺϑϩϯτBackbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.jsಈ͖Λ͚ͭΔఔ • SPAͰͳ͍
ঃʑʹBackboneMVCΛ ϑϧʹ׆͔ͨ͠ ΞʔΩςΫνϟ (ϖʔδ୯ҐͰͷSPA)
ͦͯ͠૿͍ͯ͘͠ݫ͠͞… • ϓϩμΫτ͕ਐԽ͢ΔͭΕɺരൃతʹ૿େ͢ ΔViewͱModel (ෳࡶոحͳΠϕϯτϋϯυϦϯά) • ͦͦDOMૢ࡞ͭΒ͗͢ • ߴ·ΔSPAͷཉٻ
ͦͷࠒੈؒͰ 2way-binding͕ྲྀߦ͠ɺ ੈ·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌ (2013ʙ2014)
࣌Λಉͯ͘͡͠ څ༩ܭࢉfreeeͷϩʔϯν
څ༩ܭࢉfreeeͷελοΫ • backboneMVC • 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
React + Flux
React͓͞Β͍ • FacebookͷViewϥΠϒϥϦ • ঢ়ଶཧΛపఈతʹview͔Βഉআ͢Δ (ঢ়ଶཧfluxʹΑΓStore) • Propsͱͯ͋͠ΔΛ͞ΕΔݶΓɺ ඞͣಉ͡ϨϯμϦϯάΛ͢ΔؔܕతΞϓϩʔν (ReactDOMมثʹͳΔ)
• ࠩΛܭࢉͯ͠ө͢ΔɺVirtualDOMͷ࣮
Flux͓͞Β͍ • ୯ํσʔλϑϩʔΛ࣮ݱ͢Δ࣮ύλʔϯ • ActionCreator → Dispatcher → Store →
View • Component͔Βঢ়ଶΓ͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫStoreʹͭΊ͜ΈɺViewʹඳըʹඞཁͳใ͕ߏࡁΈ Ͱ௨͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
Redux
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͔Βဃ͠ͳ͍ • αϙʔτൣғ͕খ͍͞ɺϩοΫΠϯ͕গͳ ͍(͍͟ͱͳΕࣗͰ࣮Ͱ͖ΔϨϕϧ) • ΞϓϦέʔγϣϯશମʹؔΘΔϞδϡʔϧ ͳ͍ͷͰɺ෦తʹద༻Մೳ
ͪΖΜ͜ͷબ͕࠷ڧͱ͍͏ Θ͚Ͱͳ͍ • freeeͰReact + Flux(flux-utils)ͱ͍͏બΛ͍ͯ͠ Δ͕ɺඞͣ͜͠Ε͕શͯʹͯ·ΔΘ͚Ͱͳ͍ • ۃͳɺඞཁͷͳ͍ੈքͰjQueryͰྑ͍ •
freeeͰ֤໘ʹ͓͍ͯɺϓϩμΫτ๊͕͍͑ͯΔ ͭΒΈɺύϥμΠϜΛม͑Δ͜ͱʹΑΔίετɺ ϝϦοτΛఱṝʹ͔͚͖ͯͨ
ύϥμΠϜγϑτʹ໘ͨ࣌͠ ʹେࣄͳࣄ • ࠓϓϩμΫτͷ๊͍͑ͯΔԿ͔Λཧղ ͢Δ • ύϥμΠϜͷมԽʹΑͬͯղܾ͢Δ͕Կ͔ Λཧղ͢Δ
ਓྨڞ௨ίϯϙʔωϯτͷ ೖख
͜͏͍͏ͷ
͜͏ݟ͑ͯ150ߦͷ ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍Λબ͠ͳ͍ (2016/3/31 ➡ 2016/2/29ʹͳΔ)
• ͳͲͳͲ
ෳϓϩμΫτΛ ๊͑ͨԶͨͪ • freeeʹ3ͭͷओཁϓϩμΫτ͕͋Δ (ձܭɺڅ༩ɺձࣾઃཱ) • ϓϩμΫτͷϏδωεϩδοΫʹΑΒͳ͍ ෦ڞ௨͍ͯ࣋ͪͨ͠ • ݟͨ౷Ұ͍ͨ͠
ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢ΔΒͭ ͖Λͳͤ͘Δ (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨɺৼΔ͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ
Խ
࠶ར༻Մೳͳίϯϙʔωϯτ ͷཉ • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯཁٻͨ͘͠ͳ ͍(babelͷόʔδϣϯͱ͔) • ͱ͍͑༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ֤Ξϓ ϦέʔγϣϯͰཧ͍ͨ͠ • ݟͨἧ͍͑ͨ(styleఆؚٛΈ͍ͨ)
• ͱ͍͑ར༻ଆͰstyleͷඍௐ͍ͨ͠(styleͷଧͪফ͠ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)
WebpackʹΑΔ ίϯϙʔωϯτͷఏڙ
Webpackͷexternalsͷࢦఆ
Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ ᶅґଘղܾํ๏
ɾϏϧυલ ɾϏϧυޙ Webpackͷexternalsͷࢦఆ
ɾϏϧυલ ɾϏϧυޙ Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶅґଘղܾํ๏ ᶄτϥϯεύΠϧޙͷจࣈྻ
externalsࢦఆͰಘΔͷ • ϥΠϒϥϦͷόʔδϣϯࢦఆར༻ଆʹدͤ ΒΕΔ • ϏϧυޙͷjsΛఏڙͯ͠αΠζ͕͑ΒΕΔ
css loaderͷར༻ IPHFSFBDUKT IPHFTDTT
css loaderͷར༻
css loaderʹΑͬͯಘΔͷ • styleίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨͷ Β͖ͭΛ͑ΒΕΔ • ϩʔΧϧείʔϓηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ͕ߴ͘ͳ Δ͜ͱͳ͍ (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)
• ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ
ίϯϙʔωϯτͷߏͷن ൪֎ଆʹ֎෦͔Β͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ ൪ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ ͦΕΑΓଆʹίϯϙʔωϯτͷ༰Λهड़͢Δ
نΛ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ্͠ॻ͖͕ ͘͢͠ͳΔ
։ൃ৫
։ൃମ੍ • ΤϯδχΞ60ਓ • αʔόαΠυ/ϑϩϯτΤϯυͱ͍͏ ͚ํ͍ͯ͠ͳ͍ͷͰɺશһ͕ͲͪΒ ͍͡Δ
͋ΔϓϩμΫτ1िؒͰ300ίϛοτ (160ίϛοτ) HJUMPHTJODFVOUJMPOFMJOFOPNFSHFTcXDM
ͱ͢Εຐք͕ൃੜ͢Δ • Singletonʹͳ͍ͬͯͳ͍Storeͱ͔ • PresentationalComponent͕Storeͷߪಡͯ͠ Δ͡ΌΜͱ͔
νʔϜ։ൃ
ϑϩϯτΤϯυҕһձͷൃ • ձܭϑϩϯτΤϯυҕһձ • cssඪ४Խҕһձ • ڞ௨ίϯϙʔωϯτ࡞ҕһձ • etc..
݂Λు͘Α͏ͳ׆ಈ༰ • coffeeεΫϦϓτ໓ӡಈ • ౖ౭ͷґଘղܾྗ(import/export) • ͞ΑͳΒbower • etc..
ใڞ༗
ཧͷੈքۙͮͨ͘Ίʹ
We are hiring! http://jobs.jobvite.com/freee/jobs
Thank you for your attention!