如何一步步設計前端架構?

2021-09-24 15:06:45 字數 2980 閱讀 2096

前端有架構嗎?前端有架構模式嗎?

軟體架構,是一種為了解決複雜問題的通用模式。軟體架構,是關於軟體系統的一系列有層次的技術決策的集合。換句話來說,當我們討論架構的時候,不能只討論某某架構,而是要包含其實施,以及後期的維護。

因為:諸如微服務,對於複雜的後端系統來說,是一種不錯的『低耦合,高內聚』的實施。但是,它並不適合於大部分的小公司——複雜的架構不適合於簡單的應用。而小公司也缺乏足夠的人才,來實施乙個複雜的系統,與此同時還需要有人能維護這個系統。

所以,當我們談及軟體架構的時候,說的是:有這麼一些人,他/她們能按時、高質量(或者說有質量)完成這乙個系統的設計——即有能力的個人

ps:對於前端架構來說,這些人大概率會來自於看了本書的人,笑~

從筆者的角度來看,架構設計本身是分層級的,面向不同級別的人時,所展示的內容也是不一樣的。如面對的是同一級別、更高一級別的架構師、技術人員,說的便是形上學的東西,如微前端、前後端分離,並通過各種概念,如構建系統拆份,以抽象的方式介紹如何去設計。這些概念,對於接觸過的程式設計師來說,也是相當好理解的。而當我們面對的是,經驗略微豐富的程式設計師的時候,說的可就不是:去實現微前端這樣的東西。而是需要落實到怎樣去做這樣的一件事。

系統級,即應用在整個系統內的關係,如與後台服務如何通訊,與第三方系統如何整合。 應用級,即應用外部的整體架構,如多個應用之間如何共享元件、如何通訊等。 模組級,即應用內部的模組架構,如**的模組化、資料和狀態的管理等。 **級,即從基礎設施來保障架構實施。

對應的層級與實施模式,如下圖所示:

!前端四個層級

在設計前端架構的時候,首先考慮的是應用在整個系統中的位置——它與系統中的其它子系統是怎樣的。這種關係包含了架構上的關係、業務上的關係,以及它們之間的協作機制。對於前端應用來說,這一部分的子系統包含了:

若是系統間的資料通訊,如與後台服務之間的互動,那麼只需要規定好資料通訊、資料傳遞的機制即可。這一類的通訊機制,不僅僅包含了前後端分離架構的 api 設計,還包含了各類的資料傳遞,諸如 oauth 跳轉的 token 驗證。除此,對於傳統的多頁面應用來說,也需要關注於其中的資料傳遞,如 cookie 作為使用者憑據等等。

為此,對於前端開發人員來說,關於與後端間的關係,我們所要考慮的主要因素是前後端分離架構的設計。

而後,我們還需要考慮到前端的客戶端展現形式。在大前端的背景之下,它可能是以 pc web 應用、移動 web 應用、混合移動應用(結合 cordova 構架)、混合桌面應用(結合 electron 框架)、原生移動應用(結合 react native)等,具體選擇何一種技術,取決於我們在之前調查的利益相關者的需求。

當我們做完上述的三個核心的架構決策之後,就需要考慮一下應用的部署架構。不同的客戶端形式,或者需要服務端渲染,會在某種程度上影響到前端應用的部署,但是總的影響並不是太大。往往只需要通過反向**的配置,就可以完成部署的配置。若是與後台服務不在乙個域,則需要考慮支援跨域請求或者是後台做一層**

在有了這些基本的架構設定,便可以往下繼續設計下一層級的應用架構。

應用級架構,指的是單個應用與外部應用的關係,如微服務架構下的多個應用的協作。它可以是乙個團隊下的多個前端應用,又或者是乙個組織內的前端應用。其在組織中所處的位置,也進一步決定了我們所需要設計的架構方案。

若是從相關的定義上來看,它與系統級應用存在一定的交集。但是,筆者將其視之為系統級架構的進一步細化。如在系統內架構的層級裡,我們定義了微前端架構,而具體的實施細則會放在各個應用中實現的。而諸如應用間的資料如何交換,而不同的應用又有各自不同的實現,則會在這個層級裡定義了相應的介面。

與此同時,在這個層級裡,我們決定選擇什麼前端框架,進行相關的技術選型。

模組級架構,便是深入單個應用內部,更細緻的設計應用內部的架構。它所涉及的部分,便是在日常開發中,我們經常接觸到的主要部分。我們所做的便是制定一些規範,又或者是更細緻的架構設計。這部分的內容,會在我們開始業務編碼之前進行設計,在敏捷軟體開發中,它稱之為 迭代 0/sprint 0/iteration 0。相關的內容有:

除此,對於不同的框架,還涉及到一些框架特定的模式與架構設計,它們會在一定程度上影響單個應用的架構。對於不同的框架來說,所需要涉及的範圍都有所不發。如在 angular 框架中,不需要操心相關的模式,只需要掌握框架定義的規範即可,如使用 service 來儲存應用的狀態,使用 pipe 來處理資料等。而在 react 框架中,則需要設計狀態和資料流的管理方式,為此便需要諸如 flux 或者 redux 這樣的狀態管理方案。

當我們真正編碼的時候,考慮的架構因素便是更低層級的內容。這部分的架構設計,便稱為**級的架構設計,它關注於實踐過程中的相關規範和原則。這部分的內容相當的多,並且繁瑣。它包含了以下的內容,但是又不限於下述的部分:

除此,在日常的開發中,還需要注重**的可維護——簡單的**更容易讀性和維護。筆者維護乙個 scala 專案的過程中,便是深有體會——越是寫得越抽象的**,越難以維護。諸如函式式程式設計是乙個好的東西,但是好的東西也容易被爛用,導致人們不喜歡這個東西。

買, 買,買

——節選自《前端架構:從入門到微前端》

一步步學ROS

最近因為看svo的 裡面用到catkin決定要好好看ros,年前學會基本操作。啟動節點 rosrun package name executable name 檢視節點 rosnode list 注 rosout 節點是乙個特殊的節點,通過 roscore 自動啟動 檢視特定節點的資訊 rosnod...

windows Thrift c 一步步搭建

1.thrift 原始碼路徑 2.libevent原始碼路徑 3.boost路徑 安裝 conan install boost 1.68.0 conan stable 4.openssl路徑 安裝 conan install openssl 1.1.1a conan stable conan安裝bo...

一步步啟動linux

可以一步一步啟動linux.在ubantu剛一啟動時,按c健即進入grub 提示符狀態,在此狀態下輸入 我用的是ubuntu 13 grub linux vmlinuz grub ls boot grub initrd boot initrd.img 3.11.0 15 generic grub b...