全國海關信息中心核心系統，由幾十個子應用聚合而成，分別由不同項目團隊，使用不同技術棧，先後經歷 20 年開發的。如今，面對無數個通關企業，這幾十個子應用，需要以一個單頁應用門戶展現。所以，如何獨立開發、獨立測試、獨立發佈，統一聚合，就成為了很大的問題。
基於海關信息系統複雜，應用海納百川，技術棧不一，對外需要提供統一門戶應用的特點，本文描述了多個團隊，如何使用不同 JavaScript 技術框架，協同構建一個大型統一的聚合應用門戶的方法。
前端開發模式演變
首先我們來看下前端開發模式的演變
前端應用開發模式演變
- 靜態黃頁：單純使用html技術，展示靜態圖文，訪客只能查看，不能進行交互，開發較簡單，幾乎沒有考慮性能問題
- 服務器動態網頁：當訪客不滿足於靜態圖文信息的獲取之後，開始使用服務器語言，比如JSP/ASP/PHP，提供動態數據展示給訪客，開發和交互都比較簡單，也幾乎沒有考慮性能問題
- 後端為主的MVC ：當動態數據龐大和複雜後，開始使用後端為主的MVC模式做一些同步展現業務的Web應用程序，但是遇到同步異步結合的應用，開發比較困難，性能也一般前後端分離：為了解決同步異步結合和更復雜的應用，開始使用前後端分離模式，前端負責展現和交互邏輯，後端負責業務和數據接口，同一份數據接口，可以定製開發多個Web應用程序，開發分工明確，維護較簡單，性能較高
- MVVM（Model-View-ViewModel）：使用數據雙向綁定機制，自動捕獲用戶操作的Web應用程序，可開發交互較為複雜的應用，如果結合Cordova等移動開發框架，還可作為Hybrid APP開發，但是基於WebView的性能問題，導致開發出來的APP性能一般，和原生APP差距較大
- MNVVD（ Model-NativeView-Virtual DOM）：使用Web技術調用原生App控件或事件綁定來生成APP，和原生APP性能一致，開發難度較大，支持熱更新（不需重新下載，即可在線升級，bug及時修復），可使用原生全部組件，後期擴展性強，不受限制
現代化前端是什麼樣子
再來看下，現代化前端應該是什麼樣子
- 技術無關：任何團隊或個人，在開發新的和接入舊的模塊或應用時，都可以隨意選擇技術棧，集成到已有門戶應用，而不會造成衝突
- 自適應系統：即使應用數量無限制增加，也不會提高系統複雜程度和降低應用響應速度
- 獨立開發部署：任何團隊或個人，開發的模塊或應用，都可以獨立測試、獨立發佈，統一聚合
- 團隊代碼隔離：有一個命名規範，來建立命名空間，幫助任何團隊或個人的任何變量或方法，集成到一起，也不會造成衝突，並聲明所有權以供溯源
本文內容可以任意轉載，但是需要註明
來源【頭條 】和 來源鏈接【 】分享到:
閱讀更多 MichaelXu 的文章
