AppBoxFuture(六): 前端組件化開發

  前面幾篇都是在介紹結構化與非結構化的數據存儲，本篇換換口味介紹一下框架是如何實現前端組件化開發的。首先得感謝Vue、ElementUI等優秀的前端開源項目，這些項目幫助做者快速實現了框架的兩個前端工程（IDE及Web應用)的開發。

  當初框架的設計目標是：前端、後端、存儲端通通一鍋端，爲何這麼設計，一方面是想減小開發人員對於開發環境及各種工具的安裝配置時間，另外一方面是想消除各端之間的集成調試問題，使開發人員更多的關注數據結構、業務邏輯、用戶界面的設計與開發。爲了達成這一目標，做者在框架的前端開發嘗試過相似於Winform拖拉方式的界面生成，但發現靈活性受到了極大的限制。後來學習了Vue等項目，確認了框架集成Vue及ElementUI來用於前端用戶界面開發的方案。

一.實現思路

  因爲框架的IDE是基於Web的，如何實現帶智能提示的代碼編輯及如何實現界面的即時預覽成爲一個小小的挑戰（做者熟悉skia,gdi+等方式畫用戶界面，但不熟悉web前端）。

1.實現代碼編輯器

  做者一開始想到VS Code是基於Electron的就看了一下源碼，結果發現微軟從VS Code剝離了代碼編輯器monaco-editor項目，具有了實現一個在線代碼編輯器所須要的全部功能，並且驚喜的是monaco editor自帶了Html\JS\CSS着色與智能提示。

2.實現即時預覽

  在大致瞭解了Vue的原理後，做者在IDE的視圖設計器內實現了在線將Vue組件的代碼編譯轉換爲運行時代碼，相似於Webpack分別將模版、腳本、樣式編譯而後組合在一塊兒造成一個js包，設計時發給預覽窗口動態加載，運行時則經過Vue的異步組件功能按需加載。

二.實現效果

1.組件開發

  每一個組件經過ViewModel關聯，開發徹底等同於在線Vue組件開發，這裏再也不過多描述。須要注意的是樣式統一爲Vue的局部樣式(scoped)。

• Tip1: 在代碼編輯內CMD+S保存, CMD+1,CMD+2,CMD+3分別切換模版、腳本、樣式編輯；
• Tip2: 點擊頂部"Preview"在右側顯示預覽窗口；
• Tip3: 框架集成的ElementUI組件均註冊爲全局組件，且前綴爲e-xxxx，非默認的el-xxxx。

2.組件組合

  組合其餘子組件時，須要先在腳本內註冊局部組件，以下圖所示：

  而後在模版內放置註冊的子組件，以下圖所示：

3.組件路由

  每一個視圖模型默認是不加入路由表的（sys.Home例外是默認的主頁），若是在運行時須要經過瀏覽器地址欄直接訪問視圖模型，必須將視圖模型加入路由表，以下圖所示：

• Tip1: 自定義路徑若是爲空，則使用默認路徑，如http://地址/app/index.html#/sys/EmploeeList；不爲空則爲http://地址/app/index.html#/{自定義路徑}；
• Tip2: 自定義名稱支持多級，如: PersonInfo/Address。

4.服務集成

  框架支持兩種方式調用服務模型進行業務邏輯處理：

4.1 異步await方式：

4.2 異步Promise方式：

export default class Home extends Vue {
    onclick() {
        sys.Services.HelloService.SayHello().then(res => {
            this.$message.info(res);
        }).catch(err => {
            this.$message.error(err);
        });
    }
}

5.組件調試

  本想跟服務模型同樣在服務端跑一個調試進程，但考慮實現複雜暫直接利用瀏覽器的調試功能。另因爲做者的半吊子Web前端水平，暫沒有搞定sourcemap，因此瀏覽器調試器內顯示的源碼是視圖設計器編譯轉換事後的，比較醜陋，具體參考下圖所示：

• Tip: 在調試器Sources面板快捷鍵CMD+p而後輸入{應用名}.{視圖名}如sys.Home.js能夠快速定位編譯轉換後的源碼。

三.本篇小結

  目前實現的部分用來開發網站、中後臺系統、微信公衆號之類的應用是沒有問題的，待未來Google開源了Hummingbird後做者還想在IDE內實現移動App的用戶界面開發。目標很遠大，道路還很漫長，待做者整理好前端工程的代碼後將率先開源，但願感興趣的同志共同參與。若是您有問題或Bug報告，請留言或在Github提交Issue。