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
730
[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
610
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
710
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
100
[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
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
アジャイル開発とスクラム
araihara
0
160
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
Larkご案内資料
customercloud
PRO
0
600
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
2.5Dモデルのすべて
yu4u
2
610
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
A Tale of Four Properties
chriscoyier
158
23k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Speed Design
sergeychernyshev
25
780
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Into the Great Unknown - MozCon
thekraken
35
1.6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for Performance
lara
604
68k
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