模組四|核心系統改寫(Day 17–21) 舊系統的請求封裝是一個檔案、182 行、兩個攔截器、16 個 if 分支。 它負責的事情包括:帶 token、設...
模組四|核心系統改寫(Day 17–21) 這篇的主軸,是被我自己的實測推翻的。 我原本要寫的是「權限從路由級長到按鈕級」:舊系統只能控制「你能不能進這一頁...
模組四|核心系統改寫(Day 17–21) 先給一個看起來很糟的數字。 舊系統負責「路由與選單」的程式碼,散在四個檔案裡,合計 328 行。新系統重寫之後,...
模組三|遷移執行法與驗收(Day 12–16) 我們團隊修 bug 的時候,commit 訊息會標一個階段標籤:這個問題是在哪一關被抓到的。 六年下來,這變...
模組三|遷移執行法與驗收(Day 12–16) 我數了舊系統的 API 定義:566 個。 然後我數了它們的命名前綴:17 種。 光是「查詢」這一件事,就有...
模組三|遷移執行法與驗收(Day 12–16) 有一組數字我每次看都覺得很療癒:其中一套系統的統計模組,從 52 個頁面變成 24 個。 不是因為砍功能,是...
模組三|遷移執行法與驗收(Day 12–16) 重構最貴的一段,不是寫新系統,是新舊兩套同時活著的那段日子。我們的共存期超過一年。 而共存期間有一個月,我攤...
模組三|AI 生圖與生片產線(Day 10–19) 昨天講風格與角色解耦:畫風走圖片、角色走文字。今天講那些「角色文字」實際放在哪裡。 這篇是純工程,沒有...
模組三|遷移執行法與驗收(Day 12–16) 一百個頁面要搬,第一個搬哪個? 我們做了兩次。而把兩次的第一天並排放在一起看的時候,我發現一件很有意思的事:...
模組二|選型、語言遷移與地基(Day 6–11) 模組二的最後一天,講建置。 先看舊專案的建置指令,一字不差: vue-cli-service test:u...
模組二|選型、語言遷移與地基(Day 6–11) 標題不是我打錯。這是我在新專案的 TypeScript 設定檔裡看到的一行,一字不差: { "...
模組二|選型、語言遷移與地基(Day 6–11) 這個專案是一個活了六年的 Vue 2 後台,我花了兩年把它升到 Vue 3。升級的時候 UI 元件庫也得換...
模組二|選型、語言遷移與地基(Day 6–11) 這個專案是一個活了六年的 Vue 2 後台,我花了兩年把它升到 Vue 3。升級的時候,有三件事是被迫一起...
模組二|選型、語言遷移與地基(Day 6–11) 舊專案裡有一個 14 行的檔案,我第一次打開它的時候看了三分鐘,然後決定把它寫成一整篇。 它同時示範了三個...
模組二|選型、語言遷移與地基(Day 6–11) 官方文件說主應用要放在 apps/ 底下。我們的主應用有 829 個檔案,全部待在根目錄的 src/。 這...
模組一|現況盤點與立案(Day 1–5) 模組一的最後一天,來談那個一定會被問的問題。 我沒有參與當初的排程討論,所以不知道對外報了多久。 但有件事很有意思...
模組一|現況盤點與立案(Day 1–5) 昨天講的是看得見的重複:兩個 repo 裡 20 個一模一樣的檔案。今天講看不見的那種。 先給你一個謎題。假設你剛...
模組一|現況盤點與立案(Day 1–5) 我手上有兩套後台管理系統:一套給內部營運用,一套給外部合作方用。它們原本是同一份程式碼——當年為了趕時間,有人把第...
模組一|現況盤點與立案(Day 1–5) 昨天說我接手後的第一件事不是寫程式,是盤點。今天把方法攤開。 「我覺得這 code 很爛」是一句沒有殺傷力的話。...
模組一|現況盤點與立案(Day 1–5) 先給你三個數字,全部是我自己跑指令量出來的: 342 個 Vue 元件,總共 103,870 行。全庫測試檔數量...
這一系列文章, 絕大部分是讀好幾本經典的重構、clean code的書, 將筆記與實作作為發表. 本身工作快10年, 身處在非純軟的工作環境.學生時代也不懂什麼...
Replace Type Code with Class 簡介 原因: 欄位使用int、string等的類型, 無法保護它不受不正確的賦值和非法的等同性比較解法...
Introduce Null Object 簡介 程式碼到處是處理null欄位或變數的重複邏輯. 重構前範例 假設有個JobRunner類別, 用來執行特定任務...
Combinatorial explosion 簡介 有好幾段程式碼, 根據不同參數的組合而幾乎都在做一樣的事情. 重構前範例 假設有個禮品店員, 根據包裝物的...
Introduce Parameter Object 簡介 有函數有太多的參數時,可以將這些參數包裝成parameter object. 重構前範例 假設有個出...
Removing Shotgun Surgery 簡介 當異動一項功能, 導致系統其他的程式碼也得異動.稱為Shotgun surgery是一種比喻, 霰彈槍發...
Tight coupling的說明 緊耦合指的是兩個或多個類別(模組), 彼此高度的相互依賴 緊耦合導致程式碼難以維護與修改, 因為修改一個類別會連續性影響另...
前言 程式碼臭臭? 何為程式碼異味? 程式碼又是如何散發「臭味」? 在「重構:改善既有程式的設計」 這本書有提到,程式碼異味(Code Smell)是在講說,程...
Low cohesion的說明 一個類別或模組的職責太多, 或者它的函數之間沒有緊密的關係 低內聚的類別群, 會讓開發者難以理解與維護 因為它們執行不相關的...
流程 當我們與使用者討論完需求, 並整理成需求清單, 則可依照清單做測試開發.假設如下圖1, 有3筆需求, 我們先為第一筆需求撰寫會失敗(紅燈)的測試. 圖1...