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
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
Search
Kuro Hsu
September 28, 2019
Technology
1
750
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
我有一堆選擇 Vue 開發框架的理由 @ JSDC2019 / 2019/9/28
Kuro Hsu
September 28, 2019
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
Laravel x Vite
kurotanshi
0
620
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
720
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
110
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
400
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.3k
Other Decks in Technology
See All in Technology
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
問題解決に役立つ数理工学
recruitengineers
PRO
7
2.2k
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
130
Explainable Software Engineering in the Public Sector
avandeursen
0
370
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
160
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.4k
小さく始めるDevOps 内製化支援から見えたDevOpsの始め方 / 20250317 Ken Takayanagi
shift_evolve
1
100
非エンジニアにも伝えるメールセキュリティ / Email security for non-engineers
ykanoh
13
4k
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
170
AIエージェント完全に理解した
segavvy
4
270
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
210
Amazon GuardDuty Malware Protection for Amazon S3を使おう
ryder472
2
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Navigating Team Friction
lara
184
15k
Site-Speed That Sticks
csswizardry
4
450
A designer walks into a library…
pauljervisheath
205
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
12
610
YesSQL, Process and Tooling at Scale
rocio
172
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
RailsConf 2023
tenderlove
29
1k
It's Worth the Effort
3n
184
28k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Transcript
我有⼀一堆選擇 Vue 框架的理理由 Kuro Hsu @ JSDC2019
Kuro Hsu - Organizers of Vue.js Taiwan - https://kuro.tw -
[email protected]
- @kurotanshi
vue.tw 社群現況
None
None
今年年⾄至今成長近兩兩千⼈人次
• https://vue.tw • 每個⽉月⼀一次的實體聚會 (⽬目前主要在台北) • 活動票券幾乎在⼀一分鐘內秒殺 • 每場報到率 85%
以上 • 社團討論氣氛融洽 (?)
如何選擇⼯工具
None
None
如果你是新⼿手 • 看現在哪個 夯 / 潮 / 猛 / ⾼高⼤大上
就⽤用什什麼 • 看公司要我⽤用什什麼我就⽤用什什麼 • 因為我只會什什麼就⽤用什什麼 • 因為我剛學會什什麼就想⽤用什什麼
⼿手上拿著錘⼦子的⼈人 看什什麼都像釘⼦子
如果你是決策者 • 為了了解決現有的問題 • 降低完成任務的成本 • 排除未來來可能的遇到的問題
None
為什什麼要⽤用 Vue.js?
現在好好的 管他過去幹嘛
就是因為有痛到才要換
不然你也可以繼續⽤用 jQuery 啊 不瞞您說我也還在⽤用
「我」為什什麼選擇 Vue.js 開發
曾經我也是個冒險者 (2013)
(2015) ……
新技術的考量量 (當時) • React ? • JSX 沒⼈人懂 • 存在感太薄弱我忘了了為什什麼沒選它了了
• Angular 2 ? • RC ⼀一時爽,⼀一直 RC ... • 沒學 TypeScript
遇⾒見見 Vue.js 之後
新技術的考量量 (當時) • Vue.js • Syntax 與 ng1 有 87%
像,轉換成本低 • 夠輕量量、好上⼿手 • 正好⾜足夠負擔當時專案的複雜度 • 試 run 幾個⼩小專案之後就決定是它了了
Vue.js 快速簡介
Vue.js • 儘可能簡單的 API • 響應式的資料綁定 • 可組合式的視圖元件 • 只專注在視圖層
• 可以跟其他 library 整合
Library or Framework ?
None
「The Progressive JavaScript Framework」 Vue core Vue-router Vuex Vue-Cli Nuxt.js
指令式渲染 • 如 jQuery,以操作 DOM Node 為基礎的開 發模式 • 開發⽅方式直覺,透過
Selector 取得 DOM 就 開始操作 • 優點就是爽,但程式架構擴⼤大複雜後,程式 碼混雜不易易維護
宣告式渲染 • 以操作物件模型為基礎的開發模式。 • ⾏行行為關注點放在資料 ( Model ) 與狀狀態 •
直接描述 狀狀態 與 DOM 的映射關係,⽽而不 是直接操作 DOM • view = render(state) state 輸入, DOM 輸出。
None
None
Vue Component
Component System UI 結構 組件樹
None
None
None
None
如何導入 Vue.js
直接引入 vue.js
Vue-Cli 建立專案 $ npm install @vue/cli -g $ yarn global
add @vue/cli $ vue create 專案名稱
Vue-Cli 建立專案
None
Vue-loader
HTML Script Style
None
None
SPA or MPA
Vue-Router
Vue-Router
Multiple page vue.config.js
打包
打包 ⽣生成的檔案在 dist ⽬目錄下
專案開發週期 建立模板 初始化 開發 上線 靜態 HTML CSS Vue Template
vue-cli Project initialize Mock Data Testing webpack dev server / proxy 打包 / 建立 HTML 上傳 CDN 程式發布
Next - Vue 3.0
None
• 更更⼩小、更更快 • 加強對 TypeScript 的⽀支援 • 加強 API 設計⼀一致性
• 提⾼高可維護性 • 開放更更多底層功能
• Object.defineProperty -> Proxy API • Virtual DOM 重構 •
增強編譯時的優化
! Composition Functions • 之前叫 function-based API • 以「組合代替繼承」來來實作元件功能的複⽤用 •
對 TypeScript 類型推導的⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮
對比過去做法
Mixins
Mixins 可能造成 Namespace 的衝突 從 Mixins 引入的 options 難以追蹤來來源
HOC: Higher-order Components
Props 來來源不清晰 Props namespace 衝突問題 多餘的元件實體造成性能浪費 HOC: Higher-order Components
Renderless Components
Renderless Components options 來來源清晰 無 namespace 衝突問題 多餘的元件實體造成性能浪費
Composition Functions API
options 來來源清晰 無 namespace 衝突問題 沒有多餘的元件實體浪費 Composition Functions API
Composition Functions Converter https://suspicious-mclean-0e54c3.netlify.com/
與 React Hooks 對比 • 我知道⼀一定有⼈人會問所以我現在先講 • 兩兩者同樣為了了處理理邏輯組合與複⽤用問題 • Vue
setup( ) 只會在 init 被呼叫⼀一次 • 沒有 State Hooks 的閉包陷阱 • 沒有內聯聯函式 callback 導致⼦子組件不斷被觸發更更新問題
None
在社群 激戰 討論後, 更更新後的 RFC 已取消此策略略 請參參考: https://github.com/vuejs/rfcs/commit/6fe6f7be06dd5982be3c57e248fcd66cd55748e0
• 已知 2.x -> 3.x 不會有 Breaking Change,完全相容現有 API •
加強對 TypeScript ⽀支援 !== 只能⽤用 TypeScript • 更更多的是針對底層的改寫,對多數開發者來來說沒有明顯差距 • ⽬目前仍在 RFC 階段
No Breaking Changes! No Breaking Changes! No Breaking Changes!
⚠ 投資⼀一定有風險,嚐鮮前應詳閱公開說明書 ⚠
結語
如何選擇⼯工具 現在學這個是不是過時了了 我該等到最強的那個出現再開始學嗎
None
• 有效解決問題才是重點 • 框架、⼯工具都是因應問題⽽而⽣生,在不考慮場景的 情況下尋找解法就像是盲⼈人摸象 • ⼯工具的實作⽅方式不同,但理理念念卻很多類似 • 保持開放技術的多樣性是有益的,今天學的東⻄西 會成為明天的養分
• 優良的部分仍會保留留在其他地⽅方被實現
Thanks