前言

接下來幾天，我會把目標使用 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-if、v-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 (開發樣板)

到底包含了哪些東西

我們明天見！