WORK STORY / 02

建立 Ext JS UI／UX 抽象層

CONTEXT

情境

除了後端資料交換之外，當時我也參與以 Ext JS 為主的內部系統開發。

企業系統裡有大量相似的 UI：

  • Grid
  • Form
  • Query
  • Toolbar
  • Dialog
  • CRUD Flow

不同功能的業務資料不同，但很多操作模式其實高度相似。

如果每個畫面都重新組一次 Component、Event 與資料操作，不同模組很容易逐漸長出自己的實作方式。

DECISION & ACTION

我的判斷與做法

所以在開發過程中，我開始把反覆出現的 UI / UX 行為整理成可重用的抽象層。

不是單純把畫面切成 Common Component，而是嘗試把：

固定的互動方式

和

每個功能真正不同的業務內容

拆開。

讓查詢、表單操作、視窗控制與資料呈現等常見模式，可以透過一致的方式被組合，而不用每個功能重新建立一套自己的操作流程。

OUTCOME

形成的結果

相似功能可以沿用相同的 UI / UX Pattern。

除了減少重複實作，也讓不同模組的操作方式與程式結構更一致，後續新增功能時更容易延續既有模式。

REFLECTION

留下的思考

這是我第一次開始意識到：

抽象化的價值不只是少寫幾行程式，而是讓相同問題不要在系統裡產生很多種解法。

而這個觀念後來一路延伸到我對 Component、Shared Package、Architecture 與 Engineering Rule 的看法。