Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
The Progressive Framework
kazupon
September 02, 2016
Programming
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
1
240
Vue with Vite
kazupon
2
1.9k
State of Vue I18n
kazupon
3
260
まちにまった Vue.js 3
kazupon
14
4.9k
Native-ESM powered web dev build tool
kazupon
4
910
まもなくやってくる Vue.js 3
kazupon
38
18k
Vue.js 3 に向けた Vue.js 入門
kazupon
19
6.1k
Vue I18n 向けに ESLint プラグインを作った
kazupon
1
1.1k
Vue Fes Japan 2018 舞台裏について
kazupon
4
1.8k
Other Decks in Programming
See All in Programming
How useEvent would change our applications
koba04
1
1.7k
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
microcms
0
470
A technique to implement DSL in Ruby
okuramasafumi
0
770
Named Document って何?
harunakano
0
410
Android Architecture Design With Koin
agiuliani
0
230
Better Reliability through Observability (and Experimentation)
ksatirli
PRO
1
260
Milestoner
bkuhlmann
1
200
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
manfredsteyer
PRO
0
110
Git Rebase
bkuhlmann
7
1k
Is Rust a great language for building Kubernetes ecosystem
deepu105
0
150
Learning DDD輪読会#4 / Learning DDD Book Club #4
suzushin54
1
140
プログラミングを勉強したいと言われたら
yuba_4
0
410
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
How to Ace a Technical Interview
jacobian
265
21k
What's in a price? How to price your products and services
michaelherold
229
9.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
The Mythical Team-Month
searls
208
39k
Building an army of robots
kneath
299
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Six Lessons from altMBA
skipperchong
14
1.3k
Web Components: a chance to create the future
zenorocha
303
40k
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!