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
The Progressive Framework
Search
kazupon
September 02, 2016
Programming
2
2.2k
The Progressive Framework
gotanda.js #5 in toreta
progressive framework for japanese
kazupon
September 02, 2016
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
520
Vapor Revolution
kazupon
3
3.6k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.9k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
testingを眺める
matumoto
1
140
rage against annotate_predecessor
junk0612
0
170
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
Deep Dive into Kotlin Flow
jmatsu
1
370
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
750
旅行プランAIエージェント開発の裏側
ippo012
2
930
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
Improving my own Ruby thereafter
sisshiki1969
1
160
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Practical Orchestrator
shlominoach
190
11k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Documentation Writing (for coders)
carmenintech
74
5k
Producing Creativity
orderedlist
PRO
347
40k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Statistics for Hackers
jakevdp
799
220k
Into the Great Unknown - MozCon
thekraken
40
2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Transcript
Vue.js The Progressive Framework Gotanda.js #5 in TORETA 2016-09-02 @kazupon
Who are you ? https://github.com/kazupon
Vue.js core team member Vue.js-jp organizer
2016-08-12
Release 2.0 RC https://medium.com/the-vue-point/the-state-of-vue-1655e10a340a#.ehysn8dbw
Documentation: WIP http://rc.vuejs.org
Vue.js 2.0 Coming soon … Please Wait
Vue.js ͷঢ়گ
https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.lno4xgowe ࠷ۙߘ͞Εͨϒϩά
৽نϢʔβʔͷֶश͍ͨ͠ͷ
Ϣʔβʔ͕·͍͍͔ͨͨ
Vue.jsͷظͷߴ·Γ ⤴
ΧϯϑΝϨϯε Πϕϯτ
None
Laracon US & Laracon EU
Evan ࢯ͕ొஃʂ
2.0 ͷϦϦʔε ͪԕ͍͠Ͱ͕͢
Progressive Framework
Vue.js ͷॏཁͳίϯηϓτͳͷͰ ࠓ͜Εʹ͍ͭͯ͠·͢
ϑϨʔϜϫʔΫ
None
ϑϨʔϜϫʔΫಓ۩ͱͯ͠։ൃʹ͓͍ͯ ΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢ΔͷͰͳ͚ΕͳΒͳ͍
͔͠͠ͳ͕Β ಓ۩Ͱ͋ΔϑϨʔϜϫʔΫࣗʹ ෳࡶੑ͕ଘࡏ͢Δ
ࢲͨͪΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢ΔͨΊʹ ਖ਼͍͠ϑϨʔϜϫʔΫΛ બ͢Δඞཁ͕͋Δ
• μογϡϘʔυܥͷΑ͏ͳෳࡶͳΞϓϦέʔγϣϯʹର ͯ͠ɺMVCͷΑ͏ͳߏԽ͢ΔͷΛαϙʔτ͠ͳ͍ jQuery ͷΑ͏ͳͷͰ։ൃ͢Δέʔε ෆेͳύλʔϯ
ෆेͳύλʔϯͷϝλϑΝʔ ϚαΧϦͷΈͰϩάϋεͷΑ͏ͳՈΛ ͭ͘ΔΑ͏ͳͷ
• ϖϥΠνͳϥϯσΟϯάϖʔδͷΑ͏ͳΞϓϦέʔγϣ ϯʹରͯ͠ɺMeteor ͷΑ͏ͳϑϧελοΫͳͷΛඋ͑ ͨͷͰ։ൃ͢Δέʔε Overkill ύλʔϯ
Overkill ύλʔϯͷϝλϑΝʔ δϟΠΞϯτφΠϑͰΓΜ͝ͷൽΛ͍ͯ ٯʹέΨΛ͢ΔΑ͏ͳͷ
ϑϨʔϜϫʔΫͱ͍͏ಓ۩ʹ͋Δෳࡶੑ ΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠ ेʹίετΛࢧ͏͜ͱ͕Ͱ͖ΔͷͰ ͳ͚ΕͳΒͳ͍
͔͠͠ͳ͕Β ࣮ࡍʹݱͰ
Ϗδωεઈ͑ͣมԽ͢Δ • Ϣʔβʔཁͷػೳ֦ுͳͲʹରԠ͢ΔͨΊɺΞϓϦέʔ γϣϯ͠ͳ͚ΕͳΒͳ͍ • αϒϓϩδΣΫτ͕ͨͨ͠ΊɺϝΠϯϓϩδΣΫτ ͔ΒεϐϯΞτͨ͠߹Ͱɺ͍ΛࣦΘͣՃ͞ ͤͳ͚ΕͳΒͳ͍ • αʔϏεͷεέʔϧΞοϓʹ͋ͨͬͯɺαʔϏεΛ
ͭͭ͠։ൃΛҡ࣋ͨ͠··ɺαʔϏεΛͤ͞ ͳ͚ΕͳΒͳ͍
ϑϨʔϜϫʔΫ Ϗδωεʹରͯ͠ॊೈʹ ରԠͰ͖ͳΕ͚ͳΒͳ͍
ϏϡʔίΞ ͜Μͳײ͡Ͱελʔτͯ͠
ϏϡʔίΞ ʴ Φϓγϣϯతͳ ΞϓϦέʔγϣϯ։ൃαϙʔτϥΠϒϥϦ ن͕େ͖͘ͳ͖ͬͯͨ࣌ʹ
αϙʔτ͢ΔϥΠϒϥϦ͕ ͳ͚Ε…
https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jqxo59evz
http://d.hatena.ne.jp/tomoya/20160403/1459665374
ϑϩϯτΤϯυਏ͍
͜͏ͳΒͳ͍Α͏ʹ ΈΜͳΛ Happy ʹ͍ͨ͠ͷ͕ Evanࢯ͕ఏএ͢Δ֓೦
Progressive Framework
http://ejje.weblio.jp/content/progressive
ΞϓϦέʔγϣϯͷ ஈ֊తͳมԽཁٻʹԠͯ͡ ղܾͰ͖Δํ๏Λఏڙ͢Δ
https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.p
• 1. Declarative Rendering • 2. Component System • 3.
Client-Side Routing • 4. Large-Scale State Management • 5. Build System & Development Experience ྖҬΛ5ͭఆٛ
Declarative Rendering
• JavaScriptʹΑΔDOM ϨϯμϦϯάॲཧతʹߴՁͰഁ յత • σʔλͷঢ়ଶͱDOMͷঢ়ଶΛJavaScriptͰ໋ྩతʹಉظ ͤ͞Δͷ໘ͰΤϥʔ͕ى͖͍͢ DOMϨϯμϦϯά
• ςϯϓϨʔτͰએݴతʹهࡌ͢Δ͚ͩͰɺσʔλมߋ ͷɺϦΞΫςΟϒʹDOMϨϯμϦϯάͯ͘͠ΕΔ • Ϣʔβʔೖྗ༰ɺσʔλʹөͯ͠ಉظͯ͘͠ΕΔ એݴత&ϦΞΫςΟϒϨϯμϦϯά
• script λάͰೖΕΔ͚ͩ։ൃ͢Δ͚ͩ ར༻ํ๏ <script src="vue.js"></script> <script> new Vue({ //
... }) </script>
ϓϩτλΠϓͪΐͬͱͨ͠ ϖϥΠνతͳWebαΠτʹ ͜ΕͰे
Component System
• WebαΠτ͕ஈʑେ͖͘ͳͬͯ͘ΔͱɺUIΛϞδϡʔϧ Խͯ͠࠶ར༻͢Δඞཁ͕Ͱͯ͘Δ ϞδϡʔϧԽͷඞཁੑ
• Vue.js ͕ఏڙ͢Δ UI ϞδϡʔϧԽ͢Δ Component ػೳ Λར༻͢Δ͜ͱͰ࠶ར༻ՄೳʹͳΔ Component
• Vue.js ͷ࡞๏ʹΑͬͯ Component Խͨ͠ΒɺςϯϓϨʔ τʹΧελϜλά (Custome Element) Λهࡌ͢Δ͚ͩ ར༻ํ๏
<side-bar></side-bar> <tabs> <tab>...</tab> <tab>...</tab> </tabs>
• ࢠؒͷ Component ʹ͓͍ͯɺProps ͰσʔλΛ͠ɺ Events ܦ༝ͰσʔλΛड͚औΔ Component ؒͷ௨৴
Component ʹΑͬͯ ϞδϡʔϧԽ͢Δ͜ͱͰ։ൃޮ ֨ஈʹ্
Client-Side Routing
• ͞ΒͳΔϏδωεཁٻʹΑΓΞϓϦέʔγϣϯతͳϞ ϊ͕ཁٻ͞ΕΔΑ͏ʹͳΔ • Single Page Application ͚ͷϥΠϒϥϦͱͯ͠ vue- router
Λఏڙ WebαΠτ͔ΒWebΞϓϦ
Component Λ࠶ར༻͢ܗͰ ΞϓϦԽରԠՄೳ
Large-Scale State Management
• ͞ΒʹWebΞϓϦ͕େنʹͳͬͯ͘ΔͱɺComponent ؒͰঢ়ଶڞ༗ํ๏ɺ࠶ར༻ੑ͕ͱͳͬͯ͘Δ େنWebΞϓϦέʔγϣϯͷ Component Component state state ??? Component
state
• ঢ়ଶཧ͚ͷϥΠϒϥϦͱͯ͠ vuex Λఏڙ Flux σʔλϑϩʔΞʔΩςΫνϟ
vuex Λར༻͢Δ͜ͱͰ طଘͷ Component Λ֦ு͢ΔܗͰ ঢ়ଶΛूதཧ͢Δ͜ͱ͕Ͱ͖Δ
Build System & Development Experience
• WebΞϓϦέʔγϣϯΛ࡞ΔͨΊʹɺϓϩδΣΫτΛ؆ ୯ʹηοτΞοϓ͢ΔੜπʔϧΛఏڙ Scaffold CLI πʔϧͷఏڙ
• Component Խ͢ΔͨΊͷΈఏڙ Single File Component
Single File Component ελΠϧ ςϯϓϨʔτ εΫϦϓτ
• Component & vuex पΓͷσόοάπʔϧΛ Chrome ֦ு Ͱఏڙ σόοάπʔϧ
Vue.js ͕ఏڙ͢Δ։ൃαϙʔτܥͷ πʔϧΛར༻͢Δ͜ͱͰຊ࣭తͰͳ͍ͷʹ ΄ͱΜͲ࣌ؒΛඅ͞ΕΔ͜ͱͳ͘ ܧଓతͳ։ൃʹઐ೦͢Δ͜ͱ͕Ͱ͖Δ
·ͱΊ • Progressive Framework ʹ 5 ͭͷྖҬ͕ఆٛ͞Ε͍ͯΔ • Progressive Framework
ͱมԽ͢ΔϏδωεͷঢ়گʹ Ԡͯ͡ɺVue.jsίΞϥΠϒϥϦͱपลϥΠϒϥϦʹΑͬ ͯɺஈ֊తʹΞϓϦέʔγϣϯΛαϙʔτͰ͖ΔϑϨʔ ϜϫʔΫͰ͋Δ
vuejs-jp slack • URL https://vuejs-jp-slackin.herokuapp.com • Vuejs ຊޠެࣜαΠτܦ༝ͰδϣΠϯͰ͖·͢ http://jp.vuejs.org
Thanks!