跳到主要內容

Application Framework 設計感想

關於一個application framework 該怎麼設計,根據這陣子工作的經驗,整理一些心得。


  1. 使用時鬆散,設計時嚴謹。
    鬆散是方便使用者,算是抽象化帶來的好處,使其不需要瞭解運作細節就可以使用。設計嚴謹才容易在其上發展更多應用,如輔助工具等。可以讓你鬆散使用的技術,背後在設計的時候都有嚴謹的定義,當運作不如你預期的時候,可以依循一個嚴謹的規則檢視背後的運作流程來除錯。
  2. 從簡單的原則與概念開始,漸進地增加概念。
    每次增加一個概念,都要與既有概念一起比較分析,看有無衝突之處。
    Spring framework 最早只從一個 Dependency Injection概念開始,發展到今天成為一個 de facto Java EE standard。
    我相信儘可能的維持簡單才是好的設計,因為人的心智是極為有限的。
  3. 整體應維持一致的設計哲學。
    兩種相反的程式語言設計哲學:
    Python: There should be one-- and preferably only one --obvious way to do it
    Perl: There's more than one way to do it.
    沒有對錯,只有維持一致才不會讓使用者混亂。
    有一致的規則,使用者容易理解,可以舉一反三,不用事事皆需查文件,也無需針對各種情況寫文件。
  4. 從使用角度來定義需求,並用嚴謹的技術去滿足。
    從使用者角度評估才能解決他們真正的痛點,但用嚴謹的技術才能維持長久發展。
  5. Framework 新創的抽象概念應有明確的定義。
    定義不清楚將導致使用者學習的障礙。
  6. Application framework不是Application
    Application framework的目的是協助它的使用者建造application,而application(應用程式)本身是要解決應用情境的問題。所以application framework的抽象層次要更高一點,不要對應用情境有過多的假設。

留言

這個網誌中的熱門文章

iframe DOM 被移動造成重新載入

如果用 javascript 去搬動 iframe DOM 的位置, 瀏覽器會將其內容重新載入,這是現有 HTML 規格 > When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time". 範例: http://jsfiddle.net/pZ23B/ 測試結果: * Safari 3.1 / Win: reload * Opera 9.5 / Win: reload * IE10: reload * IE7 / IE8: not reload (部份摘自 https://bugzilla.mozilla.org/show_bug.cgi?id=254144 ) 參考: * https://bugzilla.mozilla.org/show_bug.cgi?id=254144

ZK 與響應式網頁設計(RWD)

響應式網頁設計 (RWD) 就現今而言應該是許多網站必備的條件之一,ZK 框架可以幫你從一個抽象層次較高的角度滿足 RWD,不需要了解 CSS Media Query 的細節。 元件層級 元件層級的 RWD 是由元件內部自動完成的。每個 ZK 元件都能區分瀏覽器的種類,因此會自動依據桌上型或行動裝置瀏覽器來自動調整元件的外觀,不需開發者介入,例如 datebox 在桌面瀏覽器會跳出小月曆: 在手機瀏覽器就會自動變成下方滾動條: 頁面層級 頁面層級的 RWD 因為牽涉到版面設計,因此無法靠元件自動完成,因為畢竟每個頁面需要的版面設計皆不相同,這通常不是一個技術性的決定,而是政策性或設計性上的決定,因此 ZK 提供一些工具讓你實現 RWD。以下根據你想要達成的效果,概述你可用的工具。 寬度、版面自動調整 如果你想要做出的效果是,畫面內各區域自動調整寬度,較窄時調整位置,我非常推薦搭配 Bootstrap Grid 與 ZK 一同使用,因為 易於整合 。使用 Grid system 只要在 div 套上 CSS class,如 col-md-4 ,因此跟 ZK 整合很容易,不需要特別的設定與程式。 元件變換 如果你希望畫面寬、窄時,各用不同的元件來顯示,例如側邊欄在畫面變窄時消失並換成小的選單圖示,這時元件本身當然無法得知要做這樣的轉換,你可以透過 onClientInfo 事件 或 @MatchMedia 來偵測畫面寬度變化,並針對該變化調整畫面元件。 更多細節可以參考以下資源: Use Bootstrap with ZK: Responsive Admin Template 範例專案 線上展示