# 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`