iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
1
Modern Web

平時沒注意的 JavaScript - JS 生態系及週邊工具整理系列 第 4

打造 Messenger Extension - Day 4 - Vue.js 基本介紹 + 優缺點

前言

接下來幾天,我會把目標使用 Vue.js 來創建一個簡單的小網頁

試著使用一個 Proxy 讓這個 app 能在 Messenger 的環境中做測試

並且加入「Messenger SDK」,讓我們的 app 可以真正使用到在 Messenger Extension 中

特有的一些功能,像是分享訊息、獲得使用者資訊

最後,為了讓這個 app 可以之後公開使用

我們會試著自己寫個簡單的 web server,把我們的小網頁部署到 heroku 上去

就讓我們開始吧!

目標

介紹 Vue.js

Vue

我們這邊要使用的是最近逐漸崛起的一套 JS 函式庫 Vue.js

基本上比起最早的 Angular、React

Vue.js 不但是這幾年才開始比較紅的新函式庫,他現在使用的份額也較前面兩個前輩少

原因是 Angular 及 React 分別是 Google 及 React 兩大公司用資金在支援

而 Vue 早期不是從公司內部主導的,直到最近因為中國的開發者增加

才開始有些公司參與維護 Vue 這樣的開源專案

實際上在開源的世界裡,許多世界級的 Project,維護者都有半數以上是有大公司在背後付錢的員工

因為主導一個受歡迎框架的走向,可以順便推廣現在自己公司的新技術

同時比起自幹一套內部系統,開源出來的專案支援度會更好

Vue 的特性

Vue, React, Angular 都有個共同理念

那就是,比起我們早期前端使用 jQuery 原生語法來操作 DOM

他們更想要讓我們以 組件/物件 這樣的方式來思考整個網頁的模樣

Component - React

至於 Component 的寫法,React 和 Vue 的差別比較大

React 使用較接近原生 JavaScript 的寫法,jsx

特色是可以把 <Button></Button> 這樣的標籤直接寫在 JavaScript 裡(不用雙引號包)

並且當作物件來回傳、組合,最後由 React 幫你把這些物件實際渲染出來

Component - Vue

而 Vue 的語法就跟原生 JavaScript 差別很大了

基本上的寫法很接近以前後端的樣板(template)

有許多方便的語法可以使用

比較 - if else

實際看一些範例比較容易體會出他們的差別,假設今天我們想要根據某個變數

來決定某個元素是否要顯示

Vue

我們可以善用像是 v-ifv-else 的寫法來宣告一個 div 是否要顯示

React

而 React 的語法,就非常接近原生

要顯示哪個元素,必須手動地寫回傳的值

並且把他套在 render function 上

比較 for - loop

假設想要根據某個陣列渲染出數個 list item 的話

Vue

使用 Vue 的樣板式語法,只要把 v-for 加在某個元素上

他就會產生跟陣列同數量的元素

React

從這個範例就可以看出來,React 跟 Vue 設計上的差別

在 React 裡,基本上不會有太多除了原生函式以外的語法糖

你想要產生一串 <li>{number}</li>,基本上得自己寫個 .map() 來包裝

比較 - 小結

從這兩個範例來看,我們可以清楚的比較出 Vue 和 React 開發介面的差別

Vue 的優點

  1. 樣板式的語法好讀、對於剛進入的專案的人也可以輕鬆理解一塊 Component 的渲染邏輯
  2. 資料雙向綁定、讓你不必考慮太多資料的流向

如果就這幾點來看,Vue 似乎比 React 開發上方便許多,近期發展也非常火熱

但是開發一段時間後,也有些要注意的環節

Vue 的短處

  1. 比 React, Angular 出現的晚,第三方套件、開發者數量、網路上的學習資源都會相對少
  2. Template 樣板式語言不是沒有代價的
    • 任何不是原生JS的語法都有學習成本(總會有人沒用過)
    • 開發上的 style guide 會比較少,像是 ESLint 的插件
    • 要讓樣板式語法的 lib 融入其他第三方套件的成本比較高
      (滿多人有花長時間想辦法在 Vue 裡面加入 jQuery 套件的經驗)
      (如果牽涉到單元測試,Vue 要額外轉譯的程式碼會比 React 更多,測試起來也更複雜)

想了解更多可以參考我很常看的一位 Youtuber - Fun Fun Function
Templating languages: The hidden costs - Fun Fun Function

明天

我們大致介紹了幾個函式庫的差異

我們往後將會使用 Vue.js 來開發我們的 app

原因為他的簡單易用性,並且我們不需要考慮後續維護 & 測試

在明天,我們會為大家實際 demo 使用 Vue cli 來創建你的 Vue 專案

並且介紹現在 Vue cli 這樣的 boilerplate (開發樣板)

到底包含了哪些東西

我們明天見!


上一篇
打造 Messenger Extension - Day 3 - CORS, Same-origin policy 和 iFrame
下一篇
什麼是 Boilerplate ? 使用 Vue-Cli 來創建你的第一個 Project ! (Messenger Extension 第五天)
系列文
平時沒注意的 JavaScript - JS 生態系及週邊工具整理33

尚未有邦友留言

立即登入留言