Vue.js 大型專案開發心得

  1. 1. 好的方面
  2. 2. 壞的方面
  3. 3. 個人感想
  4. 4. 收穫與教訓

歷時數月的田田蔬果終於正式上線了。

這次專案是用 Vue 作為主軸來進行開發,對公司以及對我來講,不只是第一次的體驗,也是第一次將此類技術直接用在一個完整專案,來達到前後端分離的目標。

好的方面

挑選 Vue 的原因,不外乎是因為容易入門,而 html、js、css 三種語言雖然在同一檔案,但各自分離,對第一次入門的人比較容易看懂。二方面是公司裡的前端,除了我以外都是設計轉工程師,對於轉向更加系統化的開發架構這方面,Vue 也會是更好的選擇。故在參與開發的同時,我也負責將其他前端帶入門,以及一些 ES6 的基礎教學;Vue 的文件清晰易讀,函式也容易理解,所以在帶入門後,他們也很容易從文件中獲取他們所需要的資訊。

在開發期間,有其他工程師進來幫忙一小段時間,也有工程師離職,到最後我得承擔整個前端的開發,在看過並整理其他同事寫的部份花了我不少時間,但跟整理一般的麵條式程式碼比起來,比較不容易攪亂思緒。

Nuxt 的出現是個即時雨,對於各方面來講都有很大的幫助,不僅省下不少折騰 Webpack 的時間,也是社群裡對 SSR 支援最好的方案,加上自動建立 route、code split 等,都是前端 library 開發的痛點之一,轉移到 Nuxt 之後,著實省下不少麻煩。

壞的方面

在決定用 Vue 開發時,第二版大概出了好一陣子,但到後來才發現,有不少套件都停留在第一版沒有跟上,這在當下是個挺大的麻煩,雖然有原生 js 方案可選,但用起來就是比較彆扭;也由於第二版推出時間不算久,所以開發過程中,也會跟著版本進行升級,但有時可能因為一個小變動,而讓一些本來寫好的功能變得無法作用,事情就會變得更麻煩。

Nuxt 雖然幫上很大的忙,但畢竟不是正式版,坑也非常得多。有時 bug 一出現,你很難確定到底是 Nuxt 的問題,亦或是 Vue 的問題,當下除了幹聲連連外其實也很懶得去追究這件事。不過在許多方面,Nuxt 的出現解決很多問題這是肯定的,所以專案結束後,我也贊助了一些給他們。

這邊列幾個我遇到的很鳥的 bug

  1. 本來點擊 logo 是回到首頁,但在某些頁面底下,點了 logo 卻會回到上一頁,幸好更新了版本後就沒這鳥事了。
  2. 有些 router link 在 Chrome 的 devtool 底下沒有顯示連結,但點了是有反應的。
  3. Nuxt 在 0.9.7 到 0.9.8 之間多了非常多關於 route 的測試與功能等相關的 commit,結果 0.9.8 出來時,route 是壞的,遇到的當下讓我心情實在是糟到不行。

回報 issue 的當下其實是很想罵人的

個人感想

在碰 Vue 之前,我已經用 React 寫過幾個小專案了,所以我對於多學一樣都是 view 方面的 library 興趣實在不大。

因為之前寫 React 的時候,我才意識到前端最麻煩的其實是事件的流程處理,jQuery、純 js 之類的自然不用說,基本上是最難統整的,但以前寫的時候卻不會對這部份多想;雖然 React 有 Redux,VueVuex,對於開發流程也有很大的幫助,但總覺得缺少了什麼,所以有考慮要接觸 RxJS,後來跳去摸 Elm,而 Elm 的方式大概是我目前遇到覺得最好的,可惜是個冷門的領域。

這次專案開發的過程中,不只是上述壞的方面,其他與 Vue 無關的坑也不少,尤其是 Safari 的種種鳥事,雖然每個功能都有實現,但都只有實現一半,你踩到算你衰。IE 已經不再更新,你只能自己摸摸鼻子,而 Safari 更新緩慢支援又差,在這次專案後已經把他跟 IE 徹底劃上等號了。

整體來說,我對 Vue 的感受其實是很差的 XDD,除了容易上手這點外,我覺得也就只有這點了,只能說很抱歉剛好在不上不下的時機進場,結果搞得七葷八素,加上跟他無關的鳥事也超多,每次回想總是會想到一塊,就會覺得很煩躁阿…

收穫與教訓

  1. 不要對社群的套件跟上新版本的速度抱持樂觀(不如說這是選新技術時也得考量到的)。
  2. 前後端分離後,RESTful API 的設計以及響應的速度更加重要。
  3. 下次弄個 Prettier 好了。
  4. 有些套件還是會暗藏 jQuery,不可不慎(不是說 jQuery 不好,但既然用了其他前端 library,那他就不該是列入的項目)。
  5. 函數式才是往後 js 開發時,最需要了解的核心觀念。