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
フロントエンドのパラダイムシフトとプロダクトの成長
Search
joe_re
November 05, 2016
Technology
18
13k
フロントエンドのパラダイムシフトとプロダクトの成長
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
Traversing the GraphQL AST and Calculating Query Costs
joere
0
750
Real-Time applications with GraphQL
joere
0
130
Prisma2 with Graphql
joere
3
860
Go beyound static on Netlify
joere
1
210
Building Real-time Vue App
joere
4
4.4k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
260
Mock Native API in your E2E test
joere
2
970
Data feching and caching on Apollo Client
joere
2
2.6k
Typed Vuex Data Flow
joere
0
520
Other Decks in Technology
See All in Technology
Security Hubのセキュリティスコアはどうやって計算されるか
toru_kubota
0
110
Taking Flight with Tailwind CSS
opdavies
0
4.3k
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
1
180
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
230
Trade-offs all the way down
_aitor
1
120
パフォーマンス最適化のベストプラクティス
databricksjapan
0
210
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
400
Domain-driven Design: A Complete Example
ewolff
2
270
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
3
210
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
2
350
Featured
See All Featured
Six Lessons from altMBA
skipperchong
22
3k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
Product Roadmaps are Hard
iamctodd
45
9.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Being A Developer After 40
akosma
67
580k
Designing Experiences People Love
moore
136
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Unsuck your backbone
ammeep
664
57k
The Cost Of JavaScript in 2023
addyosmani
21
4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
Robots, Beer and Maslow
schacon
PRO
155
8k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.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!