建立 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 優化。
