---
# System prepended metadata

title: Twitter 小組評審文件
tags: [Assignments]

---

# Twitter 小組評審文件  

## 共同問題  
### 前端  

- 請移除不需要的 console.log  
- 請避免使用 reload 更新畫面，會有損使用框架與 AJAX 的資料請求的技術喔！  
- 使用者操作的成功與否，建議在 UI 上都要有適當的反應變化來給使用者提示（loading / notification），**讓使用者知道當前處理狀態**。  
- **「跨組件溝通」** 的議題上，建議多嘗試 vuex、emit 的機制來同步組建的共同狀態。同時 vuex 可以做到許多狀態的管理，也可運用 module 的概念將不同的狀態做基本的拆分管理。  
- moment.js 停更很久了，建議改用其他像是 **date-fns** 的時間處理套件。  
- 後台在維護上會有大量數據，建議前後端可以共同討論建立 pagination 來**分段拉資料**，前端也可以多往 **virtual/infinite scrolling** 嘗試實作。  
    - [https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1)  
    - [https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/](https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/)  

### 後端  

- 在一次取得多筆資料的相關 API 路由中，可以思考加入分頁邏輯，避免一次大量從資料庫取得所有資料。  
- 資料查詢邏輯中，活用 sequelize aggregate 可以大量增進查詢效能。  
- 使用 error-handler 來統一處理 exception 錯誤做得很好，但建議在可預期的錯誤，例如：輸入資料驗證未通過、資料不存在…等，可以直接依據錯誤情況回傳錯誤訊息及狀態碼，而非直接 throw Error。  
- 建議可以切出 controller/service 層，並將資料驗證放在 controller，service 專注資料處理邏輯，在日後維護時，在對應的程式/檔案中實作邏輯，debug 也可以更快找到錯誤位置（如資料驗證相關錯誤可以直接到 controller 排除）  
- 可以注意後端文件除了安裝指引之外，主要應該包含 API 說明文件，近一步可以考量使用 swagger 來自動產生文件，並提供簡易介面讓使用端操作。  
    
    

### 全端  

- 當同學在處理從資料庫拉回來的資料時，像是 **計數 (count)**、**排序 (sort) 與過濾 (filter)** 這些操作，都可以透過 Sequelize 的 Aggregate 或 Raw SQL (但要注意 [SQL injection](https://sequelize.org/docs/v6/core-concepts/raw-queries/#bind-parameter)) 來完成，效能較好，也不容易出錯。  
- 開發 api 時，要注意 api 回傳的 [http status code]  (https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status)，不建議將所有錯誤都放到最後的 error handler 來處理，容易讓 api 的使用者混亂，或至少要將 render page 與 api 的錯誤處理分開。  
- 記得用 sequelize 的 transaction，當你今天要同時刪除「推特」、「推特的回覆」以及「推特的 like」的時候，要把這三個操作都包到同一個 transaction，如此一來，若其中一個操作失敗了，資料會退回到 transaction 執行之前的狀態，以防止資料出錯。  
- 太過冗長的資料驗證會讓 Controller 變得難以閱讀，可以額外用 validation middleware 來處理，POST Body 和 使用者權限都可以用此方式來驗證。  
- 實作時，若能維持一樣的 coding style，程式碼品質會有顯著的提升，這部分除了事前與組員溝通外，也可以利用 lint, prettier 等工具來檢查，並確實做到 peer review，不只是互相檢查 style 與程式碼，也是同步彼此進度的好方式。  
- 因為每個動作都會重新載入網頁，前端可以用一些小技巧來提升使用者體驗，像是記錄使用者的捲軸位置，或是在按下按鈕後，加入一些小動畫讓使用者知道他的請求正在執行中。  
- 前端在開發時，需要注意設計稿沒有出現的邊緣狀況，像是使用者的名稱太長或 tweet 內容太長是否會造成畫面破版、換行等 ⋯⋯  


## 小組評價  
### 前端  
#### 切版完整度  
- 整體切版穩定度高，每個區塊也有適當的桌機 RWD！很好！  
- 按鈕在桌機窄版會有覆蓋或重疊的情形，可以多加注意。  
#### 功能性  
- 整體站上的資料同步與更新都有做到位，並且透過 vuex 與 emit 的技巧來實踐，很好！  
- 後台牽涉多筆數據的載入，建議可以多使用前端 virtualized scrolling 或是與後端討論 pagination 的可能性，來提升載入效能。  
#### 功能想像  
- 個人資料編輯送出後，如果有適當的 loading 畫面會更好！避免體驗上的停頓感。  
- 對於有些輸入欄位有提供字數限制提示，建議可以多實作在其他地方，像是推文 UI 中。  
#### 程式碼可讀性  
- 專案中可以看到對 vuex 有基礎的使用與 emit 事件的推播使用，很好喔！並且有實作出部分的資料同步。  
- 程式碼脈絡乾淨清晰，沒有冗餘的程式碼。  

### 後端  
#### 功能完整度  
- 另外建立了 API document 供使用端參考，這是後端 API 開發的其中一環，做得很好  
- 加入了不同的錯誤處理結果狀態碼，更貼近 RESTful 設計規範  
- 有統一回傳格式，但需要注意是否所有回傳皆符合該格式  
- 處理成功的訊息可以由前端處理，避免後端還需顧慮到前端可能的顯示內容  
#### 技術掌握  
- 進階使用了 sequelize 來優化資料查詢效能，減少一次從資料庫取得大量資料再交由後端程式處理的損耗，這裡做得很好  
- 可以考慮將資料處理的邏輯另外切分出 service 處理，將資料驗證等邏輯留在 controller，讓各層專注處理各自的抽象邏輯  
#### 程式碼可讀性  
- 依據不同 domain 來切分 router 檔案，有助於提升日後維護效率  


### 優點鼓勵＆總結  
#### 前端  
- 整體功能與切版完整，建議可以更近一步往手機版是實作。對於 RWD 細部掌握也可以更精進。  
- 對於資料的更新與同步都有實作出來，很好喔！  
- emit 可以實作的更新 vuex 也可以實現，可以多多嘗試，並且更進一步去嘗試了解 vuex 對資料的分拆管理！  
#### 後端  
- 加入了 API document 供使用者查詢，可以有效減少前後端協作時的溝通成本  
- 進階使用 sequelize 優化了資料查詢效能，做的很好  
- 有注意到回傳格式的統一，只是需要確認所有回傳格式是否皆符合該格式  


## 相關連結  
* [2022.6 月班 - Twitter 各小組評審文件](https://achq.notion.site/2022-6-Twitter-205f06a7d7ab4c358b78613093458fd1)  
* [回首頁](https://hackmd.io/@twitter-2022/index)  


###### tags: `Assignments`  