建立 RN 與 Flutter 發佈前的版本兼容、灰度監控和回滾檢查清單。
- 移動端發佈門禁:安裝包、熱更新與回滾各管哪一層
- Flutter 功能測試分層:倉儲、Widget 與實機流程各測什麼
以訂單頁面為例劃分 Flutter 單元、Widget 和集成測試的職責。
- React Native 原生功能整合:模組邊界和失敗語義怎麼定
從掃描與生物識別案例設計 RN 原生模組的介面、權限、取消和錯誤語義。
- Flutter 表單非同步驗證:防止舊結果覆蓋新輸入
處理 Flutter 表單的防抖、請求世代、提交鎖定和伺服器端錯誤回填。
- React Native 推送落地頁:通知與站內訊息如何保持一致
處理 RN 推送在前景、背景和冷啟動下的去重、導航與消息已讀一致性。
- 移動端會話儲存:權杖、登出與多帳戶快取清理
設計行動應用的權杖存放、權杖更新的單一請求、登出時的清理和帳戶隔離。
- 移動端深鏈入口:登入回跳與外部參數的安全邊界
把 RN 與 Flutter 深鏈視為外部輸入,處理路徑驗證、登入回跳和重複打開。
- Flutter 掉影格定位:從時間線找到真正昂貴的 Widget
用 profile 模式和影格時間線區分 Flutter 的構建、佈局、繪制與光柵化開銷。
- React Native 長清單卡頓排查:先測再調 FlatList
從生產構建、JS 執行緒與清單佈局入手定位 RN FlatList 的滾動卡頓。
- 移動端頁面狀態契約:載入、離線與過期資料如何共存
為 RN 與 Flutter 頁面建立統一的資料狀態契約,避免載入、空態和離線態互相覆蓋。
- Flutter 離線寫入佇列:草稿、重試與衝突怎麼處理
設計 Flutter 離線寫入的本機佇列、冪等鍵、衝突狀態與恢復流程。
- React Native 前景與背景切換:讓清單恢復後拿到可信資料
用 AppState、請求世代和伺服器端版本處理 React Native 頁面恢復,避免舊請求覆蓋新資料。
- DApp 前端即時資料訂閱架構:WebSocket、Reorg 與多分頁同步
dApp 前端的即時資料不只是接個 WebSocket。本文覆蓋 WS provider 訂閱 vs 輪詢 vs indexing service 的選型、斷線重連與重訂閱策略、鏈上 reorg 在 UI 狀態中的處理、BroadcastChannel 多分頁同步,以及 TanStack Query 融合訂閱與 REST 快照的整合模式。
- Angular 23 Hydration 進階:增量水合與 Zoneless 實戰
Angular 23 的 hydration 不再只是全量啟用。本文從 @defer hydrate 觸發器、選擇性水合邊界、zoneless 配合、TBT/INP 度量到內容頁與儀表板的不同策略,記錄一個行銷站遷移的真實資料和踩坑經驗。
- 前端契約測試:用 Consumer-Driven Contract 終結 API 漂移
當 mock 單元測試和手動整合測試反覆漏掉後端介面變更時,Consumer-Driven Contract Testing 把契約定義權交給前端。本文從 Pact 和 OpenAPI 兩條路線出發,記錄一個 4 前端共享 BFF 團隊的落地過程、踩坑與收益。
- pnpm Monorepo 依賴自動升級:Renovate 設定與 CI 門禁實戰
在 pnpm monorepo 中落地依賴自動升級,不是裝個 Renovate 就完事。本文覆蓋分組策略、automerge 分級、lockfile-only 更新、CI 門禁(typecheck/測試/bundle size)、breaking change codemod 整合和安全漏洞回應流程,附團隊實際推行資料。
- CSS Style Queries 實戰:用自訂屬性驅動元件變體
CSS Style Queries(@container style(...))進入 Baseline 2026,終於可以根據自訂屬性的值來套用樣式。本文聚焦實際用法:主題切換不靠 class、元件變體由 custom property 驅動、與 @property 的配合,以及降級策略。
- Vue SSR Streaming 渲染:2026 年的串流架構與選擇性 Hydration
Vue SSR 在 Vapor 時代已經從 vue-server-renderer 演進到 renderToStream + 選擇性 Hydration。本文從內部管理系統 CSR 遷移到公開站點 SSR 的實戰經驗出發,覆蓋串流渲染、hydration mismatch 除錯、CDN edge streaming 整合等核心問題。
- React Router 7 Framework Mode 遷移實錄:從 SPA + API 到全端框架
將一個內部儀表板從傳統 SPA + Express API 架構遷移到 React Router 7 framework mode 的完整過程:routes.ts 設定、loader/action 資料流設計、single-fetch 與 typegen、hydration 陷阱、Error Boundary UX,以及何時應該繼續用 declarative mode。
- Long Animation Frame API 實戰:從歸因盲區到 INP 精準最佳化
PerformanceObserver long-animation-frame(LoAF)API 解決了 Long Task API 無法歸因的核心缺陷。本文詳解 LoAF 的欄位含義、生產環境採集方案,並透過第三方指令碼阻塞、長渲染通道、樣式佈局抖動三個真實案例展示如何用 LoAF 驅動 INP 最佳化。
