前端接案開發流程與心得 2019-2021
前言
因為剛好六角有徵文活動，想說順便整理一下這陣子以來接案的開發流程與心得。
目前參與過的專案
我從 2019 年的 10 月左右開始接案，到目前為止經手過三個案子。第一個案子是幫國外公司建立形象官網(從頭到尾參與)、第二個案子是幫一個國內公司後台畫面切板(只參與前半部)、第三個案子則是進行到一半的案子，在既有架構上幫忙增加新頁面或功能(從中間開始參與)。
第一個案子 2019.08-2020.01
第一個案子是幫國外公司建立形象官網，開發團隊這端有前端工程師(我)，Roy(身兼PM、後端工程師、後台的前端工程師 XD)、以及當時我家裡有事情來幫忙救火的 Ray。我負責前台部份的切板與動畫效果，大概有十幾頁。
當時前端部份，我選用的技術如下：
- gulp (自動化建構)
- EJS (能複用 HTML 片段)
- SCSS (方便處理 CSS)
- BootStrap (有現成的元件、Utilities)
- Vue (讓資料與畫面關注點分離，方便開發)
- webpack (當時用來處理 JS 的 module)
當時結案後，有寫過心得文
第二個案子 2020.08-2020-10
第二個案子是幫國內公司建立官方網站，這裡我負責後台的 ERP 網站切板。
當時前端部份，我選用的技術如下：
- Vue Cli (因為後台不須處理 SEO，SPA 就夠用了)
- Express (因為會需要佈署到雲端，所以簡單起個 server)
- vuetify (因為設計稿偏向 material 設計，我比較目前現有的 CSS/vue元件 框架後，決定採用 vuetify)
因為以切板為主，沒用到太多的技術工具。不過需要刻出許多能複用的 vue 元件，vue 的語法倒是練習到不少。
第三個案子 2020.01-2021.
第三個案子，我進去時已經開發到一半了，不是從頭開始。同時有數個網站，有前台也有後台部份。我主要是幫忙在既有基礎上添加新畫面、串接功能，或是修復 bug。
當時前端部份，有使用的技術有：
- vue (因為網站不太需要 SEO，因此用 vue 開發)
- ant design vue (一種 vue UI 元件庫)
- vuetify (一種 vue UI 元件庫)
- vuex-map-fields (特別寫出來，能方便 vuex 操作)
- electron-vue (這案子有桌面應用需求)
工作流程整理
因為進行了三個案子，中間又剛好買了新筆電需要重建開發環境，對於前端開發的工作流程有了一些底。以下是我的一些整理
建構前端開發環境
為了在專案中能舒舒服服的進行開發，有完善的開發環境是必須的。以下是我個人的開發環境
- 作業系統 windows：硬體 CP 值高。但 MB 最近的 M1 晶片聽說很香，之後會考慮
- Windows Terminal：比 cmd 好看，能客製化樣式，有支援 git 狀態，讚讚
- 軟體包管理器 chocolatey：方便我安裝一些軟體工具)
- 版本控制 git：方便協作開發
- nodejs 與 npm：用來裝前端相關的套件
- 編輯器 vscode：除了開源，還有豐富的套件生態系
- 瀏覽器 Chrome：現代化的瀏覽器，方便測試現代化前端技術寫出來的網頁。內建 dev tools、以及能安裝 vue tools 方便測試
專案啟動初期/剛進入專案
當進入到專案後，我習慣會自己開個文件，記錄專案開始與專案結束期間的各種事情。例如：
- 記錄專案名稱、專案目的、專案範圍、開發團隊人員：讓自己對這個專案的規模有個底
- 整理使用技術、專案可參考資源、設計稿、API 文件：方便自己開發，不用到處找
之前我是用 hackmd 記錄，現在比較偏好使用 notion。
開發中
在開發中，我習慣再開一份文件寫自己遇到的技術與解決方案。雖然遇到很多 bug 或技術難題時會想撞牆，但能解決的話，就會內化成自己的養分。
除了在前端的難題外，也會遇到流程上、畫面上，或是 API 串接上的問題；這時就會需要請教 PM、後端，或是其他前端。像在第三個專案，算是我第一次需要與其他人頻繁協作，這時我就養成詢問前，先自己測試過一遍，之後附上說明文字，像是操作情境、所在頁面、操作流程，最後附上截圖或是影片，方便對方理解。必要時也會用電話聯絡的方式來加速溝通理解過程。
結案
寫個心得/檢討文記錄一下，像是這篇心得文
結語
這次整理文寫得比較簡略，也算是幫自己做一個回顧。
BTW，話說我 hexo 也好久沒用了，剛剛才發現我 github 上沒有最新的備份，最新的文章還留在快壞掉的舊筆電上 orz。趁著還能開機時趕快備份出來 XD
若有在六角學院的學員臉書社團中，也可以瞧瞧其他人的投稿文