我們在開發的不同階段,構成的架構因素是不同的,基於這個思路,架構可以分為:
系統級架構
應用級架構
模組級架構
**級架構
應用在整個系統內的關係,如與後台服務如何通訊,與第三方系統如何整合。在設計前端的時候,首先應該考慮的,是前端系統與其他系統之間是怎樣的關係。
這種關係包含,業務關係和協作機制,比如與其他前端應用之間,如何進行互動和通訊。如何與後台對接實現許可權,授權,api管理等功能。
如果與後台通訊,只需要規定與後台資料傳遞的機制即可,包括api設計規則,訪問授權的乙個開放標準(oauth)跳轉token的驗證,資料傳遞cookie等。對於前端與後端的關係,我們所考慮的主要因素是前後端分離的架構設計。
前後端分離架構其實是如何實施技術決策,使用者鑑權、api介面管理和設計、api文件管理、mock的使用、bff(服務於前端的後端,nodejs),是否需要服務端渲染等。所有以上決策,都需要不同團隊,比如前端與後端,與產品需求分析師,與測試的不斷溝通,才能一起設計出整個系統方案。
而微前端很微妙,在乙個系統內微前端是應用間的架構方案;在多個應用之間,微前端則是一種系統間等架構方案。微前端是將多個前端應用以某種形式結合在一起進行應用。下面我們來深入了解一下,微前端。
微前端架構旨在解決單體應用在乙個相對長的時間跨度下,由於參與的人員、團隊的增多、變遷,從乙個普通應用演變成乙個巨石應用(frontend monolith)後,隨之而來的應用不可維護的問題。
這類問題在企業級 web 應用中尤其常見,比如**。阿里這麼大的體系,**,天貓,支付寶,一淘,淘票票,阿里雲,都可以用同乙個賬號登陸,他們前端部分就是用的微前端,登陸這塊就是乙個微前端模組。
還比如,之前我負責開發大屏系統,裡面的角色許可權控制模組可以獨立成乙個微前端,通過路由連線主系統;我們在孔雀屏系統配置好大屏頁面,獲得乙個url位址,將位址用類似iframe的方式放到系統頁面裡面展現。這其實就是乙個比較簡單的微前端解決方案。
這塊架構的難點,在於主系統與各個子應用的連線方式,模組匯入,子應用暴露鉤子,路由配置,應用和樣式隔離,js隔離,跨域等問題的解決方案。
應用級架構可以看作是系統級架構的細化,比如單個應用與其他外部應用的關係,微服務架構下多個應用的協作,資料交換等。 由於各個應用之間,需要通過復用**,共享元件庫,統一設計等減少工作量,因此,微妙要考慮以下幾個方面內容:
腳手架。看我另一篇文章前端腳手架cli生成模版命令工具(包括,npm包的發布,腳手架的搭建,注意事項,優化等)作為乙個基礎等模組應用,腳手架用於快速生成搭建前端應用。它除了包含乙個前端專案所需等要素,還包含組織內部相關等規範和模式,如部署模版,構建系統等。乙個cli應用可以支援多個應用等開發,能根本的提高團隊整體的工作效率。
模式庫。它是一系列可復用**合集,如前端元件,通用工具函式等,帶業務或不帶業務的元件。作用是多個應用之間共享**,降低修改成本。模式庫,有的只涉及ui層面,比如antd;有的涉及業務,有的可以封裝通用介面,有的包含多個應用通訊資料庫,這個就需要多方統一協作溝通,最終目的就是提高工作效率,降低開發和維護成本。
設計系統。這個主要偏向設計人員模式,而非開發人員視角。需要ui有更高的視野,才能設計出有高度統一標準的ui規範。
真正實際操作寫**的時候,主要考慮以下幾個問題:
此外,在開發中,還要注意可維護性,簡單的**可維護性高,更容易讀懂和維護。越是寫的抽象的**越難維護。比如前端的hook,有的人濫用,沒用好很難維護。
以上就是根據開發的不同階段,需要思考的四個不同層級的架構。
前端架構設計
前端架構師們認為有多個關鍵的決策需要在專案啟動之初就制定下來,如果等到開發階段的後期再考慮,不是已經用不上,而是一開始錯誤的決定已經造成了無法挽回的損失。一旦做出這些決策,我們的任務就是去輔助視覺設計 平台開發 底層結構,使之能最大程度滿足需求。如果我們有這樣的機會,那麼可以建立乙個很長的願望清單 ...
salesforce 架構設計 從架構設計到架構師
因為碎片化的時間多了,所以開始刷起某乎了,關注了架構相關的板塊,也順手回答了一些問題。發現有很多同道中人正在經歷著我前兩年經歷的階段,對於做架構沒有相對具象的一些理解,更沒有系統化的認識。所以把最近回答的一些內容整理一下,權當記錄,留給3年後的自己 按慣例,容許我裝x開頭 一 架構的定義 在軟體開發...
mysql架構設計 初識mysql架構設計
一 應用系統如何與mysql進行一次互動?最開始接觸jdbc的時候,我們系統如何完成一次sql操作呢?第一步,建立資料庫連線 第二步,操作sql 第三步,釋放連線。但是每次建立與資料庫的連線非常耗時和資源,所以我們加入了連線池的概念。第一步的獲取連線是從連線池中獲取乙個可用的連線,第三步的釋放連線不...