前端框架有哪些(web前端主流框架有哪些)

很多朋友想了解關於前端框架有哪些的一些資料信息，下麵是(揚升資訊www.balincan8.com)小編整理的與前端框架有哪些相關的內容分享給大家，一起來看看吧。

作者 | 司徒正美

責編 | 伍杏玲

2019年在整體上，前端的主流框架沒有太大的變化，業務代碼仍由三大框架（React、Vue、Angular）所主宰著，打包工具一般仍使用webpack、Rollup.js，狀態管理器還是Redux、MobX。

但隨著這兩年崛起的新框架與類庫，一些細微之處悄悄地起變化了，這些變量可能在未來推動著前端的發展。因此本文為大家介紹國產十大新興前端框架，畢竟開發者對一項技術的關注，是技術發展的動力。

ramda

近幾年來，前端麵試的難度上了一個檔次，我們前端工程師要刷 LeetCode， 要手寫一大堆工具函數：函數節流、防抖、數組去重、扁平化，對象深拷貝等。

這些方法大家可以從網上搜，但代碼質量可能不太好，可能麵試官不認可你的實現，因此更好的學習方法是從 Underscore.js 抽取出來學習。

國外開發者 Underscore.js ，推出另一個高能版本叫 Lodash，但是方法間互相調用，盤根錯節，使用起來較麻煩。

自從 Redux 將函數式編程帶火後， Underscore.js 又有一個函數式版本，就是 ramda，其代碼清晰易懂，且可以讓我們學到更多函數式編程技巧。

官網: https://ramdajs.com/

GitHub Star：17.8k

WeUI

WeUI原來是微信官方團隊為微信Web開發打造的一個樣式庫，類似於 Bootstrap，但它隻是運行於瀏覽器端。微信小程序在CSS與瀏覽器有許多出入，如不能使用標簽選擇器、ID選擇器與眾多偽類，因此在微信小程序火起來後，官方又將這個庫兼容到小程序上。

官網：https://github.com/Tencent/weui

GitHub Star：23.9k

ColorUI

ColorUI 是小程序組件庫，但不是純樣式庫。由於WeUI有些淡雅，可能不合某些時尚公司的風格，因此 ColorUI 也有龐大的追捧者。

ColorUI 的兩大特點：

1、顏色鮮豔飽滿；

2、基於uni-app 開發，可運行於多種小程序中。未來跨端開發將成為前端的主流工作方式，打通更多分銷渠道是必然趨勢。而跨端轉譯框架隻用編寫一份代碼，就能跑N個平台，能變相提高產能，降低成本，深得大家的好評。

官網：https://github.com/weilanwl/ColorUI

GitHub Star：7.3k

Omi

騰訊出品的跨終端框架 Omi，它最初隻是個模仿 Vue.js 的迷你框架。後來經過不斷地技術升級，現在能支持微信小程序和 QQ 小程序，並且能與騰訊其他前端庫相組合，可適用於更多場合（SVG、Markdown、SSR等）。

Omi 具備以下優點：

1、支持多種渲染引擎。支持JSX、Mustache模板技術、HTM（Hyperscript Tagged Markup）。Omi 最大的優勢是不需要經過 Babel 複雜的轉譯，簡單易懂。

2、Omi 是國內最先實踐 Web Component 的框架， Web Component 有個明顯的優勢是易於調試，對比同樣開發 TodoApp， Omi 和 React 渲染完的 DOM 結構如下：

3、Omi 是個跨平台框架，Omi 針對不同的平台，推出不同的渲染層，可以有效降低開發成本。

4、Omi 生態強大，有點像阿裏的 KISSY，大多數是同事貢獻代碼，但是騰訊也好，阿裏也好，他們的同事水平都是業務一流的，這就保證了生態圈內的插件不會參差不齊。

官網：http://tencent.github.io/omi/

GitHub Star：10.6k

Taro

與 Omi 的演化路線相反，京東出品的 Taro 一開始便支持跨平台。

Taro 是第二代轉譯框架，之前許多小程序框架都是走 vue 路線，在運行時處理小程序兼容問題。

但隨著越來越多的小程序推出，如果要兼容3～5種小程序，前端工程師要在業務代碼中加許多 if-else 分支，這些在當前平台上無效的代碼也無法刪除，徒然浪費資源。

Taro 使用 React 技術棧開發小程序，在編譯期轉換代碼，刪掉非本平台的代碼，因此生成的代碼更精練。

Taro 有以下特點：

1、公司投入的研發資源較多，據了解，目前有 7、8 個不同事業部的團隊介入這框架的開發，共同解決很多問題，包括小程序轉 H5、小程序轉 RN、小程序轉其他小程序等。

2、擁有微信小程序原生轉 Taro 代碼的工具，這樣可以吸引那些已經用微信原生代碼寫好小程序的公司轉換代碼，方便他們更一步布局更多小程序平台。

3、Taro 遷移了 Redux、MobX、Router、UI 庫這整套全家桶都移植過來，是 vue 係不可比擬的。

4、Taro 的社區運營得非常好，單拿 GitHub 上的 issue 運營來說，有機器人自動回複提問者，並且把過往已經解決的同型問題的鏈接給他們，沒有搞定則上報到專門的團隊。

每周都有周報，統計一共關了多少 issue，解決了多少問題，添加了多少新特，讓大家用得非常安心。更不用說其官方運營的社區， http://taro-club.jd.com/， 可見官方在這方麵投入非常大。

5、Taro 擁有一個物料市場，號稱“讓每一個輪子產生價值”。物料就是一些組件，如果單純讓官方來做，肯定無法考慮到那麽巨細。太多垂直領域待覆蓋，由專門領域的人來寫的組件更有說服力。

6、Taro 支持轉 RN 是一個非常亮眼的特，超出目前所有的小程序轉譯框架。這也隻有京東這種深耕RN多年的大公司才有能力適配。京東早些年就實現了自己的 RN-WEB 與 RN 轉微信小程序框架（Alita）。

這幾年，國內各大企業對小程序的投入非常大，除了 Taro，還有去哪兒網的 nanachi、網易的 megalo，滴滴的 Chameleon， 百度的 Okam，不一而足。

官網：https://taro-docs.jd.com/taro/docs/README.html

GitHub Star：23.5k

Flutter

Flutter 是這兩年來廣受開發者熱議的移動端跨平台開發工具。並且經過鹹魚與毒這兩大標杆式 App 的引導，國內越來越多人投入 Flutter的開發行列。

Flutter 的優點:

1、跨全平台：移動端的兩大平台、PC 的三大操作係統以及 Web 端。

2、能卓越。Flutter 和其他跨平台不同的是，它並不走 JavaScript 引擎，而是通過自己的 Flutter Engine，然後通過 skia 繪製 UI 框架。skia是C++寫的類似canvas 2D圖形庫。另外，在渲染時，Flutter 借鑒 React 的虛擬 DOM 思想，在 UI 進行變化後，會進行 diff 算法。

3、開發高效率。Flutter 在開發時可以通過熱重載，實現所見即所得的效果。用過 webpack 開發頁麵的同學都知道， 在編輯器中保存後，界麵立馬就能看到變化。Flutter 也是這樣，當 App 在虛擬容器中或者真機設備中調試，保存後，App 會立刻響應, 節省了大量時間。

4、Flutter SDK 高度自由靈活，上層有豐富 UI 套件，除了 Material Design的主題之外，還有一套 iOS 主題的配套組件。除此之外，對於複雜 UI，可從底層 canvas 入手來繪製，靈活度堪比係統的 SDK。

5、當然它不是沒有缺點，最大的詬病是它使用了 Dart，我認為如果是用 TypeScript 的話可能會更火，一些前端工程師為此放棄使用 Flutter。

其次，在編寫界麵時 Flutter 沒有使用標簽語言，工程師要費勁地用 Widget 類來堆砌，很易出現套嵌地獄，也不直觀。現成的解決方案有兩個，一是通過野生的 DSX， 二是官方的擴展函數。沒有太大的硬傷，但小問題不斷，需要時間來磨平。

官網：https://flutter.dev/

GitHub Star：84.1k

SpriteJS

SpriteJS 是由 360 奇舞團推出的跨終端 canvas 繪圖框架，可以基於 canvas 快速繪製結構化 UI、動畫和交互效果，是跨平台的 2D 繪圖對象模型庫，它能夠支持 Web、Node.js、桌麵應用和微信小程序的圖形繪製和實現各種動畫效果。對比業界有名的 ECharts，前者是側重於企業級的圖表繪製，SpriteJS 則傾向於動畫與遊戲。

SpriteJS 的優點有：

1、跨平台，支持服務端渲染、微信小程序。

2、對 D3、Matter-js、Proton 和其他第三方庫友好。

3、能卓越，主要是通過高能的緩存機製，離屏 Canvas 與 WebWorker 多線程渲染這三大策略實現。最新的 SpriteJS 支持 WebGL，對於大數據量能更佳。

官網：https://spritejs.org/

GitHub Star：3.4k

NestJS

可能大家聽說過 Next.js，這是在 React 團隊早些年沒推出後端渲染框架時，由第三方推出的 Node.js 框架。大家也可能聽說過 Nuxt.js，基於 Vue.js 的輕量級應用框架。

而NestJS可劃歸為AngularJS社區的。它有 TypeScript、DI、DTO、Decorator，並提供了全套解決方案，包含了認證、數據庫、上傳文件、驗證、緩存、序列化、記錄器、安全、配置、壓縮、請求等開箱即用的技術。不再像 KoaJS、Express 那樣讓用戶自己找中間件。因此也有人稱之為 Node.js 的 Spring。

從趨勢來看， NestJS 在 GitHub 的關注人數僅用一年就超越了 Egg.js。目前仍在持續高速增長中，可見 Node.js 也厭惡了 KoaJS、Express 這樣的迷你框架，在開發大型應用，必須有 Spring 級別的框架。

官網：https://nestjs.com/

GitHub Star：23k

DoKit

DoKit，全稱為DoraemonKit， 是滴滴推出一個跨平台的功能集合麵板，有點像 Windows 下的超級兔子或 360 管家。它的功能較完備，可直接看下麵的截圖：

官網：https://github.com/didi/DoraemonKit

GitHub Star：12.8k

imgcook

imgcook 是阿裏出品的人工智能切圖工具，但它不隻是切圖。我們可以上傳 Sketch、PSD、靜態圖片等形式的視覺稿作，通過智能化技術一鍵生成可維護的前端代碼，包含視圖代碼、數據字段綁定、組件代碼、部分業務邏輯代碼。在對設計稿輕約束的前提下實現高度還原，釋放前端生產力，助力前端與設計師高效協作，讓前端工程師關注更具挑戰的事情。

可能有人會質疑它生成的代碼可讀，會拿之前的 Dreamweave 做比較，但是不要忘記，這是一個人工智能平台，它會不斷進化的，機器的進化速度是人工的 1000 倍以上，這是對“頁麵仔”的暴擊，因此前端工程師努力將自己轉移到工具鏈開發這樣高技術含量的活兒上。

官網：https://imgcook.taobao.org/

GitHub Star：561（剛開源）

盤點完這些新興的前端框架，讓人驚歎前端技術發展之快，如今優秀的前端工程師打造了很多十年前不可想象的開源項目。尤其是最後三個，可以說標誌著前端可以與後端相鼎立的局麵了。筆者相信在 2020 年，前端肯定會發展得更好！

作者簡介：司徒正美，擁有十年純前端經驗，著有《JavaScript框架設計》一書，去哪兒網公共技術部前端架構師。愛好開源，擁有mass、Avalon、nanachi等前端框架。目前在主導公司的小程序、快應用的研發項目。

本文到此結束，希望對大家有所幫助呢。