前端框架趨勢
最近幾年，前端框架層出不窮，大前端時代已經到來，綜合來看，前端具有如下幾個趨勢：
趨于穩定
Web框架已經趨于三足鼎立的局面，
分別為：Facebook的React，Google的Angular，以及尤雨溪的Vue，三大框架雖相互借鑒，但各有側重，且都在穩定發展中，
趨于工程化
現在的前端頁面已經不再是拼幾個頁面就能完成的，當工程變得越來越復雜時，很多問題就會暴露出來，
例如：
如何進行高效的團隊協作？
如何保證專案的可維護性？
如何提高專案的代碼質量？
如何降低專案的生產風險？
這就要求前端要工程化，前端工程化是指，使用軟體工程的技術和方法，將前端的開發流程、技術、工具、經驗等規范化和標準化，其主要目的，是為了提高效率和降低成本，即提高開發程序中的開發效率，減少不必要的重復作業時間，
前端工程化具體包含：
?標準化，定義編碼、目錄結構、介面以及原始碼管理等規范，
?組件化，組件分為HTML，JS和CSS，
?模塊化，功能封裝，
?自動化，持續集成和持續部署，
前端框架的痛點分析
前端框架雖已大大減少了開發者的作業，但是它還有一個最主要的痛點：非企業開箱即用，
具體表現為：
- 模板多，工程多，隨著企業規模越來越大，產品不斷增加，不同的產品需要不同的模板，因此，需要有一個統一管理模板的方法，
- 開發效率低，雖然前端已經使用了模塊化和組件化，但是組件太多，公共方法也越來越多，影響了開發效率，
- 溝通成本高，開發檔案不詳，
新一代前端框架
新一代前端框架的目標比較簡單，就是提供基礎能力的同時，還可以讓上層的開發人員更關注業務邏輯，所以，在各個應用下，直接使用的就是新一代前端框架， 新一代前端框架底層會封裝了當前流程的框架，如果業務復雜、開發部門多、并且技術不統一，在最底層，還會有一層微前端底座，微前端架構是一種類似于微服務的架構，它將微服務的理念應用于瀏覽器端，即將Web應用由單一的單體應用，轉變為多個小型前端應用聚合為一的應用，
由此帶來的變化是，這些前端應用可以獨立運行、獨立開發、獨立部署，
如下圖所示：
常用的實作方式為：
?路由分發，HTTP服務器路由重定向，
?Single-SPA
?iFrame
?Web Components
元年新框架探索
元年充分考慮了在實際作業中遇到的問題，通過以下方法為產品賦能：
腳手架解決模板多、工程多的問題
元年腳手架功能：
?根據框架模板快速創建工程
?模板更新檢測
?發布到元年內部倉儲
通過開發插件解決效率低的問題
針對開發效率低的問題，元年開發了自己的VSCode插件，元年將所有的組件和公共方法內置到插件中，實作了在撰寫代碼時可實時提示可選組件、屬性、方法名稱、引數串列以及自動import等常用方法，大大提高了開發人員的作業效率，開發人員不需要記住API名稱，完全通過插件提示就實作讓開發人員更關注業務邏輯，
Cookbook詳細檔案解決溝通成本高的問題
針對溝通成本高的問題，元年組件將檔案元物件化，每一個組件都詳細介紹了開發所需的資訊，并在demo中，實作了所見即所得的預覽效果，開發人員修改源代碼，自動會在運行效果內展示真實的效果，大大減少了組件開發和業務開發之間的溝通成本，
微前端解決性能問題
對于性能優化，元年使用了改進版的微前端，主框架控制臺使用了SingleSPA的模式，主框架通過API讀取各子系統資訊，各子系統的公共資源分為兩種：一是公共的第三方庫，由外部公共倉庫提供；二是組件庫，由元年私有倉庫提供，并且在控制臺上，使用預加載機制加載公共資源，每個子應用在打開的時候，不需要再次請求資源，
二開機制解決專案需求
元年將二開分為線上（推薦）和本地2種方式，
線上二開優勢：
?代碼單獨存盤在DB，
?部署發布快，
?不需要為專案提供原始碼，
線上二開兩種形式：自定義組件和插件，自定義組件在瀏覽器端運行，保證了執行效率，并可以新增自定義組件，二開人員可以維護HTML，JS和CSS（如下圖）、訪問和修改前端頁面樣式，插件在后端運行，保證了代碼的安全性，
本地二開新功能：新增組件級二開解決方案
對于本地二開，不建議直接修改原始碼，一般都會在原始碼包里預留一個檔案夾，專門用來做二開，一般的二開都是在頁面級，通過修改路由的方式實作新增、修改和洗掉頁面，但是，頁面其實是由一個個組件構成，現在模塊化程度也來越高，很多頁面都有公共的組件，用常規的方式無法實作組件級別的二開，
元年通過開發二開插件，實作了組件級二開，比如，一個源檔案路徑問@/page/XPageHeader.vue，如果在@/custom下放置一個相同路徑的檔案page/XPageHeader.vue，那么在webpack打包編譯的時候，就會自動生成二開Mapping表，這個是為了給二開人員快速預覽哪些組件已經被二開，同時，原始碼包中的源檔案會被替換為二開目錄下相應的檔案，實作了組件級的二開，
組件庫統一樣式、色系和標準
雖然流行的開源組件庫，例如Element UI和Ant Design，能夠滿足大多數企業的需求，但是仍有以下問題：
1.不能覆寫所有通用場景，
2.樣式單調，
3.當遇到bug，提交時需開源庫審批，
因此，元年發布了元年組件庫標準，統一控制樣式，保證所有專案都使用統一的風格，
可視化、低代碼設計器
為了降低開發難度，元年開發了新一代頁面設計器，針對不同的角色和使用場景，分為Dashboard報表設計器、通用設計器、物件設計器、卡片設計器以及首頁設計器，均為使用可視化方式拖拽生成頁面，大大降低了開發頁面的難度，
元年整體框架圖
元年在開源框架的基礎上，實作了常用功能的封裝，發布統一的標準組件庫，并開發了不同型別的設計器，實作了企業開箱即用的目標（如下圖），
以上解決方案是當前元年在企業框架上的探索，未來會有更多思考與創新，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/232594.html
標籤：其他