開發紀錄
保留資料,不保留整個 App:重構前要先盤點什麼
把重構前的盤點分成內容、可見行為、網址與實作責任,避免將舊檔案清單誤當成必須保留的功能清單。
- 架構重構
- 需求整理
- Astro
- 功能盤點
接到「保留原站內容,換一個架構」時,最先需要的不是新框架元件,而是一份能讓雙方確認保留範圍的清單。
本站從 Vue 換成原生 Astro,作品資料、圖片和三語文案要延續,卻沒有要求整套舊 App 一起留下來。如果只照檔名逐一改寫,很容易把沒有使用的控制也搬進新站,或者保住元件形式,卻漏掉讀者原本能開啟的網址。
盤點應該從讀者看得到的內容與行為開始,再追到實作。下面的清單適合用來準備一次內容網站重構,不是所有應用程式的完整遷移規格。
先列內容,再找它現在從哪裡來
第一份清單只回答「什麼不能丟」。不要先指定它在新架構裡必須是哪種元件。
本站的素材包括作品名稱、介紹、外連、圖片、工作經歷與多語文案。盤點時不只確認檔案還在,也要看實際頁面如何使用資料:是否有排除項目、排序條件、語言版本,以及空值時的處理。
目前作品頁會讀取排序後的專案資料,再排除部分項目。因此「把所有資料都顯示出來」不等於保留原有展示範圍。資料存在與適合公開展示,仍是兩件事。
可以逐項核對:
- 資料來源是否完整,欄位含義是否仍能辨識?
- 哪些項目實際顯示,哪些只是留在資料裡?
- 排序和排除條件是否有既定用途?
- 圖片是否有對應內容,外連是否仍是要保留的入口?
- 多語內容是真實版本,還是只有欄位而沒有正文?
這一輪先記錄現況。有缺漏就標出來,不為了讓清單漂亮,順手補造作品介紹或翻譯。
功能清單要有入口證據
把控制列出來時,旁邊應該有一個讀者如何找到它的說明。
例如作品類別切換,可以指出頁面上的入口和切換後的內容。頭像放大則要確認觸發方式、關閉行為和焦點去向。背景動畫沒有按鈕,也仍然是可見行為,需要另列動態與靜態狀態。
本站重構時曾把舊工具元件裡的技術篩選加到新頁面,後來確認舊頁面沒有引用它,便移除這個多出的控制。這個案例適合拿來訂盤點規則:元件檔案只能當線索,不能直接當成功能保留的要求。
若找不到入口,先查引用與掛載關係,再把項目列為「未確認使用」,不要默默升級成新需求。歷史上是否另有部署版本,若沒有資料,也不能順便做否定結論。
網址是保留範圍的一部分
畫面相似,但原本的深層網址不能直接開啟,對讀者來說仍然是改變。
盤點網址時,至少分開記錄正式入口、語言版本和相容入口。本站目前以 /about/work 為繁中作品頁的 canonical 網址,舊 /work 仍是可讀相容入口;英文與日文也有對應路由。相容入口不是另一份獨立內容,不能把兩者的公開身份混為一談。
可用下面的欄位建立網址清單:
| 欄位 | 要記下什麼 |
|---|---|
| 讀者入口 | 現有網址,以及它要呈現的內容 |
| 新版身份 | 繼續作為正式頁,還是改成相容入口 |
| 語言 | 該網址對應的文案與 HTML lang |
| 頁面資訊 | 標題、描述和主要網址的依據 |
| 失效處理 | 未知網址與已不存在內容如何處理 |
這是盤點格式,不表示每個網站都需要新增語言或相容頁。要延續的是已確認的入口,而不是為了填表創造更多網址。
把實作責任寫在另一欄
內容和行為確認後,再決定誰負責它。
同一項需求可以有不同實作。頁面語言可以由應用程式狀態管理,也可以由網址決定;共用外殼可以由框架元件組合,也可以在建置時放進各頁 HTML。先保留需求,再評估實作,才不會讓舊技術替新架構做決定。
以本站已採用的分工為例:
| 保留的需求 | 目前的責任安排 |
|---|---|
| 各網址有自己的可讀內容 | 原生 Astro 頁面與靜態輸出 |
| 導覽與語言切換 | 真實連結與網址語言 |
| 各頁標題、描述與語言資訊 | 共用 layout 與頁面 metadata |
| 作品資料與圖片 | 既有資料來源供頁面讀取 |
| 背景動畫與局部控制 | 作用域明確的瀏覽器腳本與原生 HTML |
這張表描述本站的選擇,不是遷移成功的全部證據。它的用途是找出哪些舊責任不必繼續存在,以及哪些需求仍需要新的實作承接。
互動要盤點失效和恢復的狀態
動畫播放時看起來一樣,不能代表整個互動已經保留。
本站的開發規範要求背景流線在正常動態模式跟隨每次動畫更新繪製,隱藏分頁時暫停;reduced-motion 使用靜態呈現,視窗尺寸改變時重繪,離頁時清理,再處理瀏覽器快取恢復的初始化。這些狀態需要列在行為清單裡,不能只留下一句「保留 Canvas」。
其他控制也有自己的狀態。對話框要列出 Escape、背景點擊和焦點還原;圖片要記錄尺寸、替代文字與失敗狀態;導覽與正文則要確認 JavaScript 失效時仍可閱讀。
清單先描述預期行為,再另外記錄驗證結果。要求某個狀態成立,不代表它已經測過。
每一項都要有保留決定,而不只是勾選完成
盤點結尾可以將項目整理為:保留內容、重做實作、需另行確認、暫不加入。不要把「需要確認」放在「完成」欄裡,也不要把未使用元件直接歸類成可刪除內容。
以技術篩選為例,能做的決定是「未證明為原站已提供的控制,本次不加入」;不是「所有歷史版本都沒有這個功能」。以作品資料為例,則是保留資料並延續已確認的展示範圍,不自動公開每一筆。
開始改寫前,最好能選出一個代表頁面,讓內容、網址與一項互動先走過新的實作方式。確認這個增量符合保留清單,再擴大到其他頁面。若新需求是在盤點後才出現,就另列新增範圍,避免重構和改版混在一起而無法驗收。
紀錄範圍
本文整理本站重構與目前作品展示、路由和互動規範的盤點方法。清單和表格是可調整的工作格式,不是完整遷移工具,也沒有涵蓋登入、資料庫搬遷或交易系統。本文不以保留清單代替實測,不宣稱前後速度、搜尋成果或所有歷史版本的功能已被確認。