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
610
[.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
94
[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
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
フルカイテン株式会社 採用資料
fullkaiten
0
36k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
510
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.4k
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
480
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
570
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
KATA
mclloyd
29
13k
Documentation Writing (for coders)
carmenintech
65
4.4k
Agile that works and the tools we love
rasmusluckow
327
21k
A Philosophy of Restraint
colly
203
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The Cult of Friendly URLs
andyhume
78
6k
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