Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
我有⼀一堆選擇 Vue 框架的理理由 Kuro Hsu @ JSDC2019
Slide 2
Slide 2 text
Kuro Hsu - Organizers of Vue.js Taiwan - https://kuro.tw - kurotanshi@gmail.com - @kurotanshi
Slide 3
Slide 3 text
vue.tw 社群現況
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
今年年⾄至今成長近兩兩千⼈人次
Slide 7
Slide 7 text
• https://vue.tw • 每個⽉月⼀一次的實體聚會 (⽬目前主要在台北) • 活動票券幾乎在⼀一分鐘內秒殺 • 每場報到率 85% 以上 • 社團討論氣氛融洽 (?)
Slide 8
Slide 8 text
如何選擇⼯工具
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
如果你是新⼿手 • 看現在哪個 夯 / 潮 / 猛 / ⾼高⼤大上 就⽤用什什麼 • 看公司要我⽤用什什麼我就⽤用什什麼 • 因為我只會什什麼就⽤用什什麼 • 因為我剛學會什什麼就想⽤用什什麼
Slide 12
Slide 12 text
⼿手上拿著錘⼦子的⼈人 看什什麼都像釘⼦子
Slide 13
Slide 13 text
如果你是決策者 • 為了了解決現有的問題 • 降低完成任務的成本 • 排除未來來可能的遇到的問題
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
為什什麼要⽤用 Vue.js？
Slide 16
Slide 16 text
現在好好的 管他過去幹嘛
Slide 17
Slide 17 text
就是因為有痛到才要換
Slide 18
Slide 18 text
不然你也可以繼續⽤用 jQuery 啊 不瞞您說我也還在⽤用
Slide 19
Slide 19 text
「我」為什什麼選擇 Vue.js 開發
Slide 20
Slide 20 text
曾經我也是個冒險者 (2013)
Slide 21
Slide 21 text
(2015) ……
Slide 22
Slide 22 text
新技術的考量量 (當時) • React ？ • JSX 沒⼈人懂 • 存在感太薄弱我忘了了為什什麼沒選它了了 • Angular 2 ？ • RC ⼀一時爽，⼀一直 RC ... • 沒學 TypeScript
Slide 23
Slide 23 text
遇⾒見見 Vue.js 之後
Slide 24
Slide 24 text
新技術的考量量 (當時) • Vue.js • Syntax 與 ng1 有 87% 像，轉換成本低 • 夠輕量量、好上⼿手 • 正好⾜足夠負擔當時專案的複雜度 • 試 run 幾個⼩小專案之後就決定是它了了
Slide 25
Slide 25 text
Vue.js 快速簡介
Slide 26
Slide 26 text
Vue.js • 儘可能簡單的 API • 響應式的資料綁定 • 可組合式的視圖元件 • 只專注在視圖層 • 可以跟其他 library 整合
Slide 27
Slide 27 text
Library or Framework ?
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
「The Progressive JavaScript Framework」 Vue core Vue-router Vuex Vue-Cli Nuxt.js
Slide 30
Slide 30 text
指令式渲染 • 如 jQuery，以操作 DOM Node 為基礎的開 發模式 • 開發⽅方式直覺，透過 Selector 取得 DOM 就 開始操作 • 優點就是爽，但程式架構擴⼤大複雜後，程式 碼混雜不易易維護
Slide 31
Slide 31 text
宣告式渲染 • 以操作物件模型為基礎的開發模式。 • ⾏行行為關注點放在資料 ( Model ) 與狀狀態 • 直接描述 狀狀態 與 DOM 的映射關係，⽽而不 是直接操作 DOM • view = render(state) state 輸入， DOM 輸出。
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Vue Component
Slide 35
Slide 35 text
Component System UI 結構 組件樹
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
如何導入 Vue.js
Slide 41
Slide 41 text
直接引入 vue.js
Slide 42
Slide 42 text
Vue-Cli 建立專案 $ npm install @vue/cli -g $ yarn global add @vue/cli $ vue create 專案名稱
Slide 43
Slide 43 text
Vue-Cli 建立專案
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Vue-loader
Slide 46
Slide 46 text
HTML Script Style
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
SPA or MPA
Slide 50
Slide 50 text
Vue-Router
Slide 51
Slide 51 text
Vue-Router
Slide 52
Slide 52 text
Multiple page vue.config.js
Slide 53
Slide 53 text
打包
Slide 54
Slide 54 text
打包 ⽣生成的檔案在 dist ⽬目錄下
Slide 55
Slide 55 text
專案開發週期 建立模板 初始化 開發 上線 靜態 HTML CSS Vue Template vue-cli Project initialize Mock Data Testing webpack dev server / proxy 打包 / 建立 HTML 上傳 CDN 程式發布
Slide 56
Slide 56 text
Next - Vue 3.0
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
• 更更⼩小、更更快 • 加強對 TypeScript 的⽀支援 • 加強 API 設計⼀一致性 • 提⾼高可維護性 • 開放更更多底層功能
Slide 59
Slide 59 text
• Object.defineProperty -> Proxy API • Virtual DOM 重構 • 增強編譯時的優化
Slide 60
Slide 60 text
! Composition Functions • 之前叫 function-based API • 以「組合代替繼承」來來實作元件功能的複⽤用 • 對 TypeScript 類型推導的⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮
Slide 61
Slide 61 text
對比過去做法
Slide 62
Slide 62 text
Mixins
Slide 63
Slide 63 text
Mixins 可能造成 Namespace 的衝突 從 Mixins 引入的 options 難以追蹤來來源
Slide 64
Slide 64 text
HOC: Higher-order Components
Slide 65
Slide 65 text
Props 來來源不清晰 Props namespace 衝突問題 多餘的元件實體造成性能浪費 HOC: Higher-order Components
Slide 66
Slide 66 text
Renderless Components
Slide 67
Slide 67 text
Renderless Components options 來來源清晰 無 namespace 衝突問題 多餘的元件實體造成性能浪費
Slide 68
Slide 68 text
Composition Functions API
Slide 69
Slide 69 text
options 來來源清晰 無 namespace 衝突問題 沒有多餘的元件實體浪費 Composition Functions API
Slide 70
Slide 70 text
Composition Functions Converter https://suspicious-mclean-0e54c3.netlify.com/
Slide 71
Slide 71 text
與 React Hooks 對比 • 我知道⼀一定有⼈人會問所以我現在先講 • 兩兩者同樣為了了處理理邏輯組合與複⽤用問題 • Vue setup( ) 只會在 init 被呼叫⼀一次 • 沒有 State Hooks 的閉包陷阱 • 沒有內聯聯函式 callback 導致⼦子組件不斷被觸發更更新問題
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
在社群 激戰 討論後， 更更新後的 RFC 已取消此策略略 請參參考: https://github.com/vuejs/rfcs/commit/6fe6f7be06dd5982be3c57e248fcd66cd55748e0
Slide 74
Slide 74 text
• 已知 2.x -> 3.x 不會有 Breaking Change，完全相容現有 API • 加強對 TypeScript ⽀支援 !== 只能⽤用 TypeScript • 更更多的是針對底層的改寫，對多數開發者來來說沒有明顯差距 • ⽬目前仍在 RFC 階段
Slide 75
Slide 75 text
No Breaking Changes! No Breaking Changes! No Breaking Changes!
Slide 76
Slide 76 text
⚠ 投資⼀一定有風險，嚐鮮前應詳閱公開說明書 ⚠
Slide 77
Slide 77 text
結語
Slide 78
Slide 78 text
如何選擇⼯工具 現在學這個是不是過時了了 我該等到最強的那個出現再開始學嗎
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
• 有效解決問題才是重點 • 框架、⼯工具都是因應問題⽽而⽣生，在不考慮場景的 情況下尋找解法就像是盲⼈人摸象 • ⼯工具的實作⽅方式不同，但理理念念卻很多類似 • 保持開放技術的多樣性是有益的，今天學的東⻄西 會成為明天的養分 • 優良的部分仍會保留留在其他地⽅方被實現
Slide 81
Slide 81 text
Thanks