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
Real world es201x and future
Search
Koutarou Chikuba
February 11, 2018
Programming
18
11k
Real world es201x and future
現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2
Koutarou Chikuba
February 11, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
130
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.4k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
470
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
990
Catch Up: Go Style Guide Update
andpad
0
170
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
dynamic!
moro
9
6.4k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
580
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Pragmatic Product Professional
lauravandoore
36
6.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Bash Introduction
62gerente
615
210k
Thoughts on Productivity
jonyablonski
70
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How STYLIGHT went responsive
nonsquared
100
5.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Documentation Writing (for coders)
carmenintech
75
5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Transcript
ݱͷES201xͱະདྷͷΞʔΩςΫνϟ @mizchi / InsideFrontend 2
ࣗݾհ • @mizchi • ॴଐ: ϑϦʔϥϯε • ઐ: Node.js /
SPA৬ਓ
CAUTION!!! • ྺ࢙ͷͰɺѻͬͯΔൣғ͕͘ͳͬͨͷͰɺݴٴൣғ͕ҙਤ తʹߜ͍ͬͯ·͢ • ͋Β͔͡Ίྃ͝ঝ͍ͩ͘͞
ϑϩϯτΤϯυͷΈͳ͞Μ
ফͯ͠·͔͢ʁ
None
ຊൃදͷΰʔϧ • ΞʔΩςΫνϟͷมભΛཧ • มԽʹڧ͍ઃܭͷͨΊͷಎΛಘͯɺࣗͷίʔυʹඞཁͳ ͷɺΔ෦ɺΒͳ͍෦ͷར͖͕Ͱ͖ΔΑ͏ʹͳͬͯ΄ ͍͠
͍͖ͬͯ·͠ΐ͏
ࠓͷ͓ 1.ϑϨʔϜϫʔΫৼΓฦΓ 1.աڈ 2.ݱࡏ 3.ະདྷ 2.ݱࡏ͔ΒະདྷࢸΔಓ
ϑϨʔϜϫʔΫৼΓฦΓ
None
None
ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌ • खͰΛॻ͖͍͑ͯͨ࣌ • ෆ҆ఆͳ DOM API Λ jQuery
͕ٵऩ • IE6͕ࢮͶͣظԽ
None
ςϯϓϨʔςΟϯάͷ࣌ • HTMLͷॳظੜ͕ΫϥΠΞϯτଆ • ೋॏςϯϓϨʔτ | SEO Ex. mustache, handlebars,
underscore.template
None
σʔλόΠϯσΟϯάͷ࣌ • จࣈྻΛల։͢Δͷ͔ΒɺߏΛग़ྗ͢Δ ͷ • ޮతͳ෦ॻ͖͑ | Ϧετల։ • MVVMͷ༌ೖ
ex. backbone.stickit / knockout / angularjs / vue
ݱ
Client Side MVC ͷऴᖼ • Rails ༝དྷͷ Backbone ͷ MVC
Ϟσϧഁ • ΫϥαόͰඞཁͳநผ 2 • ղ & ࠶ߏங • ୯ํσʔλϑϩʔ 2 MVC ͱ MVC2 ʹ͍ͭͯվΊͯߟ͑ͯΈΔ http://www.s-arcana.co.jp/tech/2011/07/mvc-mvc2.html
Flux/Obvervable ͷ࣌ • Event ͱ State ͱ View Λશʹ •
EventSource ͱ subscribe ͷܗଶ • FRPͷ֓೦Λ༌ೖ ex: Rx / Elm / Redux
None
None
ߟ͑ํ • Component ͷଆʹӅΕͨ State ͷଘࡏجຊతʹѱ • Event ͷετϦʔϜ͔Β State
ͷεφοϓγϣοτΛੜ
ؓ: Redux Rx ͷ֓೦తͳαϒηοτ const actions$ = Rx.Observable.from([add(1), add(2),
add(3)]) const store = actions$.scan(rootReducer, undefined) store.subscribe(x => { console.log('subscribe', x) }) 1 1 Redux ֓೦తʹ Rx ͷαϒηοτͰ͋Δͱ͍͏ - mizchi's blog http://mizchi.hatenablog.com/entry/2017/09/30/013420
ϑϨʔϜϫʔΫͷτϨϯυ • ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ… • ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: ԾDOM ʹΑΔόοϑΝϦϯά) • ϒϥβͷػೳΛΑΓݡ࣮͘͢Δ(ྫ: ࣗલͷϨϯμϥʔ)
• ߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
None
Webͷ։ൃݴޠͷมԽ
None
։ൃݴޠ • JavaScript • TC39ͰຖਐԽ / ϓϦίϯύΠϥͰ interop • ଞݴޠ͔ΒͷτϥϯεύΠϥܥ
• ϊϋͷӽڥ • WebAssemblyܥ • ࢼߦࡨޡஈ֊
AltJS ͕Ռׂͨͨ͠ • ES2015 ͷจ๏Ճ/ػೳఏҊ • ClassɺArrow Function, etc... •
༷͕͍͔ͭͳ͍ͷϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
ۙΓ্͕Δݴޠ… • ੩తͳܕڥ͕͋Δ͜ͱ • ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ • ܕਪ͕͋Δ͜ͱ • ͱʹ͔͘ܕɺܕɺܕ
ϑϩϯτΤϯυͷ੩తܕ͚ͷधཁ • ͱʹ͔͘ςετ͕ॻ͖ͮΒ͍ͷͰ੩తݕࠪͰࡁ·͍ͤͨ • Observable Immutable Λલఏʹ͢Δͱ੩తݕ͕ࠪͳ͍ ͱίʔυ͕ॻ͚ͳ͍
None
None
ͳͥJSʹܕ͕ඞཁͳͷ͔ • ʮςετ͕͍͠GUIڥͰͷʯ৺ཧత҆શੑͷͨΊ • ҠΓมΘΓ͕͍ΤίγεςϜͰɺ੩తղੳͰίʔυΛࣺͯΔ ͨΊ ※ ͜ΕҎ্୯ͳΔݴޠؒͷରཱἤΓʹͳΔͷͰΊ·͢…
ະདྷͷ
WebComponents
None
None
WebComponents ͷޙͷੈք • View ͷ Custom Elements • ঢ়ଶཧͱͯ͠ͷϑϨʔϜϫʔΫ(ͨͿΜ)Δ
• ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫग़ͯ͘Δͣ • SkateJSͱ͔ʁ
WebComponents Ͱࢮ͵ͷ • ʙσβΠϯͷʙ࣮ • ϚςϦΞϧσβΠϯ • ϑϥοτσβΠϯ • Bootstrap
Έͳ͞Μߴ·͖ͬͯ·͔ͨ͠ʁ
Ұམͪண͍ͯߟ͑Δ
None
ະདྷͷಓΛ࡞Δ
ݱ • ͦ͏͍ͬͨͬͯݱͷฅίʔυΛΑ • Կ͔ΒखΛ͚Δʁ
ݹ͍ίʔυΛखջ͚Δ • lint Λॻ͘ • ܕΛॻ͘ • ͋Δ͍ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘ • άϩʔόϧม͠
=> ES Modules • Ϗϧυ࣌ʹґଘղੳ • ςετΛॻ͘
ྑ͍ίʔυͱѱ͍ίʔυ • ྑ͍ίʔυ • ੩తݕࠪͰ͖Δ • ΠϯλʔϑΣʔε͕໌Β͔ • ؆୯ʹࣺͯΒΕΔ •
ѱ͍ίʔυ • Ϟδϡʔϧڥք͕໌Β͔Ͱͳ͍
ྫ: Qiita Ͱ͕ࣗͬͨ͜ͱ • Rails Sprockets => Browserify • άϩʔόϧม͠Λ
ESM ʹ • Backbone.View => React • View ͱ State Λ(Flux)
ྫ: freeeࣾͰ͕ࣗͬͯΔ͜ͱ • Rails Sprockets => Webpacker • άϩʔόϧม͠ΛESMʹ •
Backbone.Router Λղମ • ݹ͍ίʔυʹ flow ͷܕΛ͚ͯճΔ
ͱΓ͋͑ͣͬͱ͚ • prettier • eslint: no-unused-vars • eslint: prefer-const
कഁ • OSSΤίγεςϜʹै͏ • Webඪ४ʹै͏ • ϨΠϠʔΛղ͢Δ
ϑϩϯτΤϯυΤϯδχΞͱԿ͔
None
ͦΕͧΕͷΰʔϧͷઃఆ • εϐʔυΛಥ͖٧ΊΔUXͳͷ͔ • ܧଓͯ͠ՁΛಧ͚ΔͨΊͷίʔυ࣭ͳͷ͔
ϑϩϯτΤϯυΞʔΩςΫνϟ: ·ͱΊ • Webಛ༗ͷΞʔΩςΫνϟ͔ΒɺීวతͳGUIઃܭͷ߹ྲྀ • ࠓͷϑϩϯτΤϯυ OOP, FP, GUIઃܭͷݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥΛͿ͚ͭ߹͏ઓ
• ࣗʹඞཁͳநΛબͿ
͓ΘΓ