全國統(tǒng)一學(xué)習(xí)專線 9:00-21:00
常用的UI框架有哪些?推薦6種常用的UI框架。
接下來安徽電腦培訓(xùn) 開源項(xiàng)目其實(shí)有一個(gè)成熟周期，這個(gè)周期大概是三年左右，自React框架在2013年發(fā)布并引爆了前端框架的大潮，這個(gè)屬于前端的周期就此開始了。
之后在2015年5月開源的React Native又開啟了屬于Web移動(dòng)前端的周期，15-16年，18-19年，21-22年正好就是屬于移動(dòng)前端的三個(gè)爆發(fā)點(diǎn)。
三年前，在*個(gè)成熟收獲期，我盤點(diǎn)了移動(dòng)開發(fā)框架。在這第二個(gè)成熟收獲期，理所當(dāng)然要來盤點(diǎn)一波。
不過，當(dāng)我點(diǎn)開github項(xiàng)目的code-frequency時(shí)，還是被這個(gè)準(zhǔn)到嚇人的周期猜想驚呆了，先給你們看一波，剩下的自行驗(yàn)證。
1、
2、
再來說第二個(gè)比較有意思的發(fā)現(xiàn)，停止維護(hù)的項(xiàng)目絕大多數(shù)是Vue框架項(xiàng)目。
盤點(diǎn)開始的時(shí)候我還覺得React框架處于絕對(duì)劣勢，到完成時(shí)我發(fā)現(xiàn)React無論在選擇面還是成熟度上都超過了Vue。
原因我這里就不分析了，反正大家都有自己的看法。
網(wǎng)頁類框架就是前端組件框架，這一次雖然有大量項(xiàng)目停止維護(hù)，但是也有很多項(xiàng)目堅(jiān)持了下來，而且還涌現(xiàn)出了一批新項(xiàng)目。
大廠占了主導(dǎo)，因?yàn)檫@些年大廠在移動(dòng)開發(fā)上的需求，遠(yuǎn)高于其它方面。個(gè)人項(xiàng)目要堅(jiān)持確實(shí)不易。
本來是想要做一個(gè)驗(yàn)證項(xiàng)目，把所有框架都試用一遍并給出推薦度的。由于進(jìn)度太慢，還是下一次再發(fā)吧。
這次的重點(diǎn)是漸進(jìn)類框架，就是所謂多端同構(gòu)框架（小程序框架）。這幾年國內(nèi)的重點(diǎn)的各種小程序平臺(tái)，所以多端框架的需求很是旺盛。
不過大多數(shù)先行者都沒挺過來還是讓我很意外，只有Taro成功了，想想還是有很多讓人唏噓的東西。
在這里還是先預(yù)測一波吧，因?yàn)檫@一類框架最變化*，最終還是有很多框架要出局的。
漸進(jìn)類框架是一個(gè)過渡性的產(chǎn)品，最終會(huì)變成橋接類框架的一部分，所以，與橋接類框架協(xié)同才是框架的出路。
這個(gè)賽道基本全是大廠了。
騰訊新一代跨端開發(fā)框架Hippy
Hippy一看就是淘寶Weex的對(duì)標(biāo)項(xiàng)目，Kpi功能全面壓制。所以官方支持 React 和 Vue 兩種主流前端框架。在Weex2021年實(shí)質(zhì)停更后發(fā)布，要不要這么卷？
Hippy 2.x 架構(gòu)主要分成三層，UI(JS) 層 Hippy-React 和 Hippy-Vue 負(fù)責(zé)驅(qū)動(dòng) UI 指令生成；中間層 C++ HippyCore 負(fù)責(zé)抹平平臺(tái)差異性和提供高性能模塊；渲染層 Android 和 iOS 負(fù)責(zé)提供終端底層模塊、組件，并與布局引擎通信。
對(duì)Weex慘遭遺棄，我上次就說過：「提供工具，Weex提供框架，將平臺(tái)差異化屏蔽（Write Once, Run ）。所以Weex則注定功能相對(duì)弱小，并且坑比較多。」Weex最終下馬也是必然的，淘寶又發(fā)布升級(jí)版北海，為了實(shí)現(xiàn)（Write Once, Run ），它采用自繪，而且是基于Flutter自繪。
所以Hippy3.x就一如既往的Kpi功能層層加碼，很有騰訊風(fēng)格。在未來的 3.x 中業(yè)務(wù)與渲染層中的具體實(shí)現(xiàn)可根據(jù)用戶實(shí)際場景進(jìn)行切換：業(yè)務(wù)層上不再局限于 JS 驅(qū)動(dòng)，還可選擇（如：DSL/Dart/WASM 等）其它語言進(jìn)行驅(qū)動(dòng)；在渲染層中，渲染引擎除了支持現(xiàn)有原生（Native）渲染之外，還可以選擇其他渲染 Renderer，如 Flutter(Voltron) 渲染。
「Kraken 北?！故且豢罡咝阅躓eb渲染引擎。底層基于 Flutter 進(jìn)行渲染。
Kraken 不限制上層開發(fā)者使用的框架，無論你是使用 Vue 、Rax 還是 React 都可以開發(fā) Kraken 應(yīng)用。
Kraken 的 runtime 通過 JS Engine Binding 的方式提供了一系列 Web 標(biāo)準(zhǔn)的 API 接口，調(diào)用相應(yīng) API 會(huì)執(zhí)行相關(guān)邏輯并創(chuàng)建一系列需要發(fā)送給 Dart 層處理的指令。
Kraken 其實(shí)就是一個(gè)小程序平臺(tái)，而且追求全平臺(tái)完全一致。我雖然認(rèn)為各平臺(tái)不一致是很自然的事情，但是也表示理解，畢竟別人吹牛有當(dāng)真的傳統(tǒng)（KFC表示認(rèn)同）。
Kraken 現(xiàn)在也是一個(gè)小號(hào)瀏覽器，所以它的主要工作就是摳標(biāo)準(zhǔn)，畢竟它是一款基于 W3C 標(biāo)準(zhǔn)的高性能渲染引擎。
*，我勸淘寶領(lǐng)導(dǎo)定Kpi要理智些，畢竟Hippy4我還蠻期待的。
滴滴出品的超輕量級(jí)動(dòng)態(tài)化跨端開發(fā)框架，主打輕量和實(shí)用。
Hummer 以 JS 引擎為基石，目前已支持 、Hermers、QuickJS 等業(yè)內(nèi)* JS 引擎（這里本來還有個(gè)V8的，我刪除了，源碼里面沒有，Kpi需要）。再配合經(jīng)過調(diào)優(yōu)的 Yoga 布局引擎，抹平了兩端視圖布局差異（性能更佳的自研布局引擎開發(fā)中）。順便提一下，Hippy采用V8（功能更強(qiáng)）自研布局引擎（性能更佳）。
Hummer 的特點(diǎn)是拋棄了業(yè)界其他動(dòng)態(tài)化跨端框架普遍使用的DSL層和VDOM層，因此原生 Hummer 不具備前端開發(fā)常用的響應(yīng)式編程的能力，但同時(shí)換來的是接近原生開發(fā)的體驗(yàn)和性能。再以原生 Hummer 為基礎(chǔ)，在此之上開發(fā)了一套基于MVVM架構(gòu)的開發(fā)框架 —— Tenon ，通過 Tenon，可以把使用 Vue/React 編寫的代碼，轉(zhuǎn)換成原生 Hummer 的代碼。
Hummer也是一個(gè)小程序平臺(tái)，而且超輕量。如果想要無限提升自己APP的能力，可以考慮嵌入Hummer。
Web移動(dòng)前端框架正在迎來第三個(gè)高速發(fā)展期，各類框架得到極大繁榮。
個(gè)人在具體項(xiàng)目的貢獻(xiàn)已經(jīng)微乎其微了，創(chuàng)新、架構(gòu)創(chuàng)新是*制勝的手段，這也是我看好React的根本原因。
*，還是想做點(diǎn)微不足道的 探索 ，現(xiàn)在前端組件庫層出不窮，更換組件庫帶來的代價(jià)有點(diǎn)大。想創(chuàng)建一個(gè)框架，來實(shí)現(xiàn)上次說的組件公約數(shù)和公倍數(shù)，無縫切換組件庫。理論上支持所有組件庫 ，也能為后來者提供彎道超車的機(jī)會(huì)。我想大廠可能沒有需求，也不會(huì)愿意發(fā)布這種框架，畢竟都是平臺(tái)*說了算。
這個(gè)庫就是useMobile，當(dāng)然分為和。下次先發(fā)布。等我發(fā)布后，再來填上面表中缺的推薦度。
原文地址：
1、Bootstrap
Twitter出品的Bootstrap在業(yè)界是非常受歡迎的，以至于有很多前端框架都在其基礎(chǔ)上開發(fā)，如我們熟悉的WeX5就是在Bootstrap源碼基礎(chǔ)上優(yōu)化而來的。我相信大多數(shù)接觸過前端開發(fā)的同學(xué)多少都了解過這個(gè)優(yōu)秀的前端框架。Bootstrap是基于HTML、CSS和的，它簡潔靈活，可以使得Web開發(fā)更加敏捷。
它提供優(yōu)雅的HTML和CSS規(guī)范，在jQuery的基礎(chǔ)上進(jìn)行更加個(gè)性化和人性化的完善。兼容大部分jQuery插件，并包含了豐富的Web組件，如下拉菜單、按鈕式下拉菜單、導(dǎo)航條、按鈕組、分頁、縮略圖、進(jìn)度條和媒體對(duì)象等。自帶了13個(gè)jQuery插件，其中有模式對(duì)話框、標(biāo)簽頁、滾動(dòng)條和彈出框等。
2、框架
框架總體來看要比Bootstrap略顯高大上一點(diǎn)，但他們倆的設(shè)計(jì)理念都是非常清楚的，Bootstrap有引導(dǎo)的意思，它嘗試處理你項(xiàng)目中的一切所需。有基礎(chǔ)、地基及支柱的意思，給你項(xiàng)目中強(qiáng)有力的創(chuàng)造與支持。相對(duì)于Bootstrap豐富的組件及插件，僅提供了有限的幾種元素，其目標(biāo)是，即使你使用預(yù)定義的UI元素，也不應(yīng)該與大家的網(wǎng)站長得太像。
而Bootstrap則致力于提供所有定義好的元素，這樣使得看起來許多網(wǎng)站都差不多。默認(rèn)不帶圖標(biāo)集，它推薦使用開源字體圖標(biāo)。與Bootstrap一樣，使用網(wǎng)格流式布局將網(wǎng)頁劃分為12列，針對(duì)不同的設(shè)備顯示不同的列數(shù)，實(shí)現(xiàn)響應(yīng)式布局。但不支持舊版本瀏覽器。其他特性如有興趣可進(jìn)一步了解。
3、Curl
Curl 是一個(gè)命令行工具，用于通過 HTTP(s)、FTP 和數(shù)十種其它協(xié)議進(jìn)行請求。使用Curl可以進(jìn)行文件下載、檢查響應(yīng)標(biāo)題和自由訪問遠(yuǎn)程數(shù)據(jù)。
在 Web 開發(fā)中，Curl 經(jīng)常和 RESTful API 一起使用，用于測試連接。
# Fetch the headers of a URL.curl -I 302 -Control: -Type: text/html; charset=UTF-8Referrer-Policy: no-: 258Date: Wed, 09 Aug 2021 11:24:01 GMT# Make a GET request to a remote API.curl is the number of days it takes Saturn to orbit the Sun.
Curl 命令可能比上述代碼更復(fù)雜。有許多選項(xiàng)用于控制 headers、Cookie、身份驗(yàn)證等。了解更多，請閱讀 curl。
4、Tree
Tree 是一個(gè)小型的命令行實(shí)用程序，它將目錄中的文件以可視化的方式進(jìn)行顯示。它采用遞歸運(yùn)行的方式，遍歷每個(gè)級(jí)別的嵌套并繪制所有內(nèi)容的格式樹。這樣就能快速的瀏覽并查找需要的文件。
tree.├── css│ ├── bootstrap.css│ ├── bootstrap.min.css├── fonts│ ├── -halflings-regular.eot│ ├── -halflings-regular.svg│ ├── -halflings-regular.ttf│ ├── -halflings-regular.woff│ └── -halflings-regular.woff2└── js ├── bootstrap.js └── bootstrap.min.js
還可以使用簡單的 regEx 模式來過濾結(jié)果：
tree -P '*.min.*'.├── css│ ├── bootstrap.min.css├── fonts└── js └── bootstrap.min.js
5、Tmux
根據(jù)維基的解釋，Tmux 是一個(gè)終端復(fù)用器。通俗的說，它是一個(gè)能將多個(gè)終端連接到單個(gè)終端會(huì)話的工具。
Tmux允許用戶在終端中的程序之間切換，添加屏幕窗格，并將多個(gè)終端連接到同一個(gè)會(huì)話，使其保持同步。在遠(yuǎn)程服務(wù)器上工作時(shí)，Tmux 特別有用，因?yàn)樗试S用戶創(chuàng)建新的選項(xiàng)卡，而無需再次登錄。
6、du
du命令用于生成關(guān)于文件和目錄的空間使用情況的報(bào)告。du很容易使用，可以遞歸地運(yùn)行，遍歷每個(gè)子目錄并返回每個(gè)文件的大小。
du 的常見用例是：當(dāng)某個(gè)驅(qū)動(dòng)器的空間不足，用戶不清楚每個(gè)存儲(chǔ)器的大小。使用此命令可以快速查看每個(gè)文件夾所占用的存儲(chǔ)空間，從而找到占用*空間的存儲(chǔ)器。
7、AUI
AUI是最近流行起來的，作者聲稱是專為APIClound設(shè)計(jì)的一套框架，解決了許多移動(dòng)端開發(fā)實(shí)際中遇到的許多問題，是一個(gè)純CSS框架。使用容器+布局+模塊的構(gòu)建方式，JS輔助，更自由更靈活更易于擴(kuò)展使用。遵循Google Material設(shè)計(jì)規(guī)范，完美適配各個(gè)機(jī)型。面向HTML5，使用CSS3實(shí)現(xiàn)動(dòng)畫交互，輕量級(jí)高性能。AUI是使用MIT License授權(quán)，你可以復(fù)制、出售。目前*版本2.0。
8、Amaze UI
這是稱為妹子UI的開源框架，據(jù)稱是**開源HTML5跨屏前端框架。妹子UI以移動(dòng)優(yōu)先為理念，從小屏逐漸到大屏，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁。Amaze UI包含20+個(gè)CSS組件、20+個(gè)JS組件，更有多個(gè)包含不同主題的Web組件。相比國外框架，妹子UI關(guān)注中文排版提供本地化支持。面向HTML5開發(fā)，使用CSS3來實(shí)現(xiàn)動(dòng)畫交互，輕量級(jí)高性能。
9、Frozen UI
Frozen UI是一款開源，簡單易用，輕量敏捷的移動(dòng)端框架?；谑諵樣式規(guī)范，目前全面應(yīng)用于企鵝手Q增值業(yè)務(wù)中。基礎(chǔ)樣式效果簡單色調(diào)清爽，社區(qū)活躍，組件自然不少。包括按鈕、列表、表單、通知、提示條、彈出框、選項(xiàng)卡等等常用組件。還包括一個(gè)FrozenJs的JS組件庫?？梢栽谥髁鞯腁ndroid和IOS上應(yīng)用?；緲邮绞褂秒x線包的方式減少請求提供快速接入方案。當(dāng)然，根據(jù)網(wǎng)友反映，也存在大大小小的bug。不過總體來說，還是值得一用的。奇怪的是，Github上顯示的*更新時(shí)間是一年前，難道已經(jīng)沒人維護(hù)了嗎？
# Running this will show the space usage of each folder in the current directory.# The -h option makes the report easier to read.# -s prevents and shows the total size of a folder.# The star wildcard (*) will run du on each file/folder in current directory.du -sh *1.2G Desktop4.0K .0K Music4.9M Public4.0K .9M Videos
還有一個(gè)相似的命令 df（Disk Free），使用df會(huì)返回有關(guān)可用磁盤空間的各種信息。
什么是Web前端開發(fā)？
前端開發(fā)是創(chuàng)建web頁面或app等前端界面呈現(xiàn)給用戶的過程。通過html、css、js以及衍生出來的各種技術(shù)、框架、解決方案來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶交互界面。
Web前端框架有：Bootstrap 框架、React 框架、Vue 框架、Angular 框架、 框架、 框架。
1、Bootstrap 框架
Bootstrap 是當(dāng)今可用的前端框架中*的，它具有直觀，時(shí)尚的界面而且功能強(qiáng)大可以更快更輕松地實(shí)現(xiàn) web 開發(fā)而且不需要捆綁。附件就可以使用許多第三方插件，大多數(shù)瀏覽器都支持它，而且它提供了比其他前端框架更多的組合資源。
2、React 框架
React 框架引入了許多自定義的（在創(chuàng)建時(shí)）前端 Web 開發(fā)的方法。要使用 React，首先需要掌握組件的體系結(jié)構(gòu)，JSX 和單向數(shù)據(jù)流等，React 框架的出現(xiàn)促使開發(fā)了大量額外工具用來實(shí)現(xiàn)高度靈活性。雖然靈活性是其主要優(yōu)勢，但 React 因其靈活性也存在一些問題。比如在使用 React 時(shí)會(huì)面臨選擇的問題，而且它沒有可靠的開發(fā)工作流程。我們必須使用 React 構(gòu)建自己的工作流程。這比使用其他 JS 框架更困難，因?yàn)闃?gòu)建到框架中需要大量的開發(fā)工具。
3、Vue 框架
Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
4、Angular 框架
Angular.js 通常被稱為 MVW（模型 – 視圖 – 隨意）框架，其中包括：快速代碼生成，輕松測試任何應(yīng)用程序部分和雙向數(shù)據(jù)綁定（后端的更改會(huì)立即反映在 UI 上）。自發(fā)布以來，它成為開發(fā)的最常用的 JS 框架。對(duì)于基于企業(yè)的應(yīng)用程序或具有高標(biāo)準(zhǔn)代碼可讀性的嚴(yán)格編程環(huán)境，Angular-s 都是更好的選擇。
5、 框架
是由網(wǎng)頁設(shè)計(jì)公司 Zurb 創(chuàng)建的，是一個(gè)非常先進(jìn)的企業(yè)級(jí)前端框架，非常適合開發(fā)靈活，響應(yīng)迅速的網(wǎng)站。但是使用它也相當(dāng)復(fù)雜，所以不適合剛?cè)腴T的學(xué)習(xí)者，這個(gè)功能豐富的框架支持 GPU 加速，可實(shí)現(xiàn)流暢，閃電般快速的動(dòng)畫，F(xiàn)astclick.js 可在移動(dòng)設(shè)備上快速渲染。它在 Sass 預(yù)處理器上運(yùn)行，并包含 開發(fā)的數(shù)據(jù)交換屬性，該屬性允許您為移動(dòng)設(shè)備加載輕量級(jí) HTML 部分，為較大屏幕加載“較重”HTML 部分。
6、 框架
是由微軟開發(fā)的自由和開源的編程語言， 類型的超集，它可以編譯成純 。 可以在任何瀏覽器、任何計(jì)算機(jī)和任何操作系統(tǒng)上運(yùn)行，并且是開源的。
常見的web前端開發(fā)框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基于 HTML、CSS、的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
2、html5-：
該框架可以快速構(gòu)建健壯，且適應(yīng)力強(qiáng)的web app或網(wǎng)站。
3、Meteor：
Meteor是新一代的開發(fā)即時(shí)web應(yīng)用的開源框架，它能在較短時(shí)間內(nèi)完成開發(fā)。
4、：
基于材料設(shè)計(jì)的現(xiàn)代化響應(yīng)式前端框架?？商峁┠J(rèn)的樣式，自定義組件。此外，還改進(jìn)動(dòng)畫和過渡，為開發(fā)人員提供流暢的體驗(yàn)。
5、Amaze UI：
國內(nèi)*開源HTML5跨屏前端框架產(chǎn)品系列，中文排版支持更優(yōu)、本土化組件豐富。該產(chǎn)品系列中有專門針對(duì)移動(dòng)端的HTML5混合應(yīng)用開發(fā)框架Amaze UI Touch以及針對(duì)跨屏HTML5網(wǎng)頁開發(fā)的Amaze UI Web。
擴(kuò)展資料：
web框架程序的作用：
Web框架使得在進(jìn)行Web應(yīng)用開發(fā)的時(shí)候，減少了工作量。Web框架主要用于動(dòng)態(tài)網(wǎng)絡(luò)開發(fā)，動(dòng)態(tài)網(wǎng)絡(luò)主要是指現(xiàn)在的主要的頁面，可以實(shí)現(xiàn)數(shù)據(jù)的交互和業(yè)務(wù)功能的完善。
使用Web框架進(jìn)行Web開發(fā)的時(shí)候，在進(jìn)行數(shù)據(jù)緩存、數(shù)據(jù)庫訪問、數(shù)據(jù)安全校驗(yàn)等方面，不需要自己再重新實(shí)現(xiàn)，而是將業(yè)務(wù)邏輯相關(guān)的代碼寫入框架就可以。也就是說，通過對(duì)Web框架進(jìn)行主觀上的“縫縫補(bǔ)補(bǔ)”，就可以實(shí)現(xiàn)自己進(jìn)行Web開發(fā)的需求了。
以PHP為例，PHP可以在apache服務(wù)器上進(jìn)行Web開發(fā)，而不必使用框架。使用PHP進(jìn)行開的時(shí)候，在不適用框架的情況下，數(shù)據(jù)庫連接就需要自己來實(shí)現(xiàn)，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
參考資料來源：百度百科-前端開發(fā)
1、Angular
Angular原名angularJS誕生于2009年，之前我們都是用jquery開發(fā)，自從angular的出現(xiàn)讓我們有了新的選擇，它*的特點(diǎn)是把后端的一些開發(fā)模式移植到前端來實(shí)現(xiàn)，如MVC、依賴注入等。
2、React
React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益于其創(chuàng)新式的，性能上碾壓angularJS，一經(jīng)推出，火的一塌糊涂。 特點(diǎn)很多，、JSX、Diff算法等，支持ES6語法，采用函數(shù)式編程，門檻稍高，但也更靈活，能讓開發(fā)具有更多可能性。
3、Vue
Vue作為*推出的框架（2014年），借鑒了前輩angular和react的特點(diǎn)（如、雙向數(shù)據(jù)綁定、diff算法、響應(yīng)式屬性、組件化開發(fā)等）并做了相關(guān)優(yōu)化，使其使用起來更加方便，更容易上手，比較少適合初學(xué)者。
只要一個(gè)電話
我們免費(fèi)為您回電
