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
10k
フロントエンドのパラダイムシフトとプロダクトの成長
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
joere
3
590
joere
1
140
joere
4
3.6k
joere
0
180
joere
2
700
joere
2
2.1k
joere
0
380
joere
0
380
joere
8
6.4k
Other Decks in Technology
See All in Technology
picardparis
4
2.4k
htomine
0
160
oztick139
0
630
gracia
0
830
opelab
1
430
lmi
3
2.4k
5ebec
0
160
sat
1
240
pauloxnet
1
300
yoku0825
PRO
2
510
kawaguti
0
170
kataokatsuki
2
230
Featured
See All Featured
dougneiner
56
5.4k
bryan
32
3.5k
sachag
445
36k
jcasabona
8
590
roundedbygravity
84
7.9k
matthewcrist
73
7.5k
reverentgeek
167
7.3k
ammeep
656
54k
productmarketing
6
760
roundedbygravity
242
21k
3n
163
22k
reverentgeek
27
2.1k
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!