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
700
[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
600
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
660
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
91
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
380
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.2k
Other Decks in Technology
See All in Technology
kube-vipとkube-proxy置き換えCiliumを積んだ究極のK3sクラスタを建てる
logica0419
4
200
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
310
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
320
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
2
290
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
740
「ばん・さく・つき・たー!」にならないためにSHIROBAKOから 学んだこと
ysknsid25
3
640
OPENLOGI Company Profile
hr01
0
53k
【swonet.conf_】NOCメンバーが語るSTMの実態!! ~ShowNetから若者への贈り物~
shownet
PRO
0
290
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
190
Oracle Database 23ai 新機能#4 Rolling Maintenance
oracle4engineer
PRO
0
120
ドメインと向き合う - 旅行予約編
hidenorigoto
4
550
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Faster Mobile Websites
deanohume
304
30k
Design by the Numbers
sachag
278
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Adopting Sorbet at Scale
ufuk
73
9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
We Have a Design System, Now What?
morganepeng
49
7.1k
Building an army of robots
kneath
302
42k
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