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.1k
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
Vue 3.4
kazupon
13
4k
Vue & Vite Rustify
kazupon
4
1.8k
Vue.jsエコシステム動向2023
kazupon
17
6.9k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
930
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
まちにまった Vue.js 3
kazupon
14
5.4k
Native-ESM powered web dev build tool
kazupon
5
1.4k
Other Decks in Programming
See All in Programming
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
9
5.6k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
170
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
3.1k
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
ONE WEDGE_company_guide
1wedge_one
0
370
受託開発でGitLab CI を活用していく
xiombatsg
1
270
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.5k
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
Site Reliability Engineering for GMO
pyama86
6
910
"config" ってなんだ? / What is "config"?
okashoi
0
210
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
A designer walks into a library…
pauljervisheath
199
23k
In The Pink: A Labor of Love
frogandcode
138
21k
It's Worth the Effort
3n
180
27k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Embracing the Ebb and Flow
colly
79
4.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
Building an army of robots
kneath
300
41k
Clear Off the Table
cherdarchuk
83
310k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
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!