2020年最新前端框架大全，Web工程師人手一份！
時間：2023-10-05 00:06:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-10-05 00:06:01 來源：網(wǎng)站運(yùn)營
2020年最新前端框架大全，Web工程師人手一份?。航裉旄蠹曳窒硪恍┠壳氨容^熱門新鮮度靠前的50款前端工具，希望對你有所幫助。
一、構(gòu)建工具1、 Parcel地址：
https://parceljs.orgParcel是一款極速零配置WEB應(yīng)用打包工具，快速、幾乎零配置是它最大的特點，開箱即用。相比webpack，Parcel對于新手來說未嘗不是一個很好的選擇。
2、 Critters地址：
http://github.com一款webpack的插件，它可以很方便的配置內(nèi)聯(lián)關(guān)鍵css( critical CSS ),其余的css部分則會異步加載，由于它不使用無頭瀏覽器(headless browser)呈現(xiàn)內(nèi)容，因此快速輕巧。
3、sucrase地址：
http://sucrase.io如果你用typscript構(gòu)建React項目，sucrase將是一個不錯的選擇，它的編譯速度將是Babel的20倍。sucrase——一款ES6+編譯器，重點關(guān)注非標(biāo)準(zhǔn)語言，例如Typescript，JSX和Flow。
4、Webpack Config Tool地址：webpack.jakoblind.no
一款可視化的在線工具網(wǎng)站，你只需要選擇前端項目運(yùn)用到技術(shù)和相關(guān)配置，就能一鍵幫你生成webpack.config.js，省去你不少的麻煩
5、JSUI地址：
http://github.com/kitze/JSUIJSUI 是一個可視化分類、構(gòu)建和管理 JavaScript 項目的工具。不管是前端應(yīng)用還是后端應(yīng)用，也不論使用的是哪種框架，只要項目有一個 package.json ，即可進(jìn)行管理。
6、PWA Universal Builder地址：pwa.cafe/
一款腳手架構(gòu)建工具，方便創(chuàng)建基于Preact，React，Vue和Svelte的項目，開箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！
7、VuePress地址：
http://vuepress.vuejs.org/VuePress 由兩部分組成：第一部分是一個極簡靜態(tài)網(wǎng)站生成器，它包含由 Vue 驅(qū)動的主題系統(tǒng)和插件 API，另一個部分是為書寫技術(shù)文檔而優(yōu)化的默認(rèn)主題，它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
每一個由 VuePress 生成的頁面都帶有預(yù)渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）。同時，一旦頁面被加載，Vue 將接管這些靜態(tài)內(nèi)容，并將其轉(zhuǎn)換成一個完整的單頁應(yīng)用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需加載。
二、框架和庫8、 PWA Starter Kit地址：
http://pwa-starter-kit.polymer-project.org/通過功能豐富的WEB組件快速幫你構(gòu)建功能齊全的PWA網(wǎng)站項目，幾乎零配置，完成了構(gòu)建、測試和快速部署。
9、PaperCSS地址：
http://www.getpapercss.com/一個不太常規(guī)的CSS框架，如果你希望你的網(wǎng)站有手繪風(fēng)格感覺，選擇它準(zhǔn)沒錯。
10、http://boardgame.io地址：
http://boardgame.io/http://BOARDGAME.IO是 Google 開源的一個游戲框架，旨在允許游戲作者將游戲規(guī)則從本質(zhì)上轉(zhuǎn)化為一系列簡單的函數(shù)，這些函數(shù)用于描述當(dāng)一個指定動作發(fā)生時游戲的狀態(tài)變化，框架負(fù)責(zé)處理表述性狀態(tài)傳遞。無需再手動編寫任何網(wǎng)絡(luò)或后端代碼。
功能特性狀態(tài)管理：自動跨瀏覽器、服務(wù)器和存儲器無縫管理游戲狀態(tài)；
快速成型：在渲染游戲之前調(diào)試界面以模擬更改。
多人游戲：所有連接到同一游戲的瀏覽器都實時同步，無需刷新。
私密狀態(tài)：私密信息可從客戶端隱藏。
日志：游戲日志可查看任意時間的信息。
UI 工具包：常用于游戲中的 React 組件。
11、Stimulus地址：
http://stimulusjs.orgStimulus是一個適度的前端框架，它并不試圖接管整個前端的方方面面，不關(guān)心如何渲染HTML，相反用來增強(qiáng)HTML的相關(guān)行為。如果你的團(tuán)隊規(guī)模較小，但又想要和那些使用比較費(fèi)力的主流方案的較大團(tuán)隊競爭，那么這是一個比較適合的前端框架方案。
12、sapper地址：sapper.svelte.technology/
Sapper是一個類似Next.js的框架，具有極高的性能和內(nèi)存效率，具備代碼分割，服務(wù)端渲染的現(xiàn)代框架功能，是一款軍工級別的框架。
13、Reakit地址：
http://reakit.io/使用這個框架能讓你快速搭建漂亮的React UI 交互站點。
14、Evergreen地址：
http://evergreen.segment.com/更為強(qiáng)大的React UI 框架，有一套非常標(biāo)準(zhǔn)的UI設(shè)計語言幫你構(gòu)建企業(yè)級的具有國際范設(shè)計風(fēng)格的WEB應(yīng)用，這個框架類似我們國內(nèi)的ant.design（
https://ant.design/docs/spec/colors-cn）
三、HTML和CSS工具15、 keyframes.app地址：keyframes.app
一款基于時間關(guān)鍵幀，在線制作網(wǎng)頁動畫的網(wǎng)站，你無需在編輯器和瀏覽器直接互相切換，及所見即所得。keyframes.app提供在線制作和谷歌瀏覽器擴(kuò)展插件兩種形式。制作完成后，你能很方便的將自動產(chǎn)生的CSS代碼復(fù)制到你的項目中。
16、 Emotion地址：emotion.sh/
Emotion是一款用JavaScript編寫css的庫，支持字符串和對象兩種方式聲明CSS變量，如果你在使用React，試用這個庫將讓你以更加優(yōu)雅的方式用JavaScript編寫CSS。
17、modern-normalize地址：
http://github.comnormalize.css可以讓瀏覽器以接近標(biāo)準(zhǔn)的方式一致地渲染所有元素，而且不同于cssrest，只針對需要正?；脑?。modern-normalize只針對現(xiàn)代瀏覽器，而且足夠現(xiàn)代，甚至IE和Edge都已經(jīng)放棄。
18、layerJS地址：
http://layerjs.org/一款你只需要編寫HTML就能很輕松實現(xiàn)菜單、畫框、彈出層、滾動視察、縮放、觸摸手勢等眾多效果的框架，這個框架代碼壓縮版只有30KB,很方便與各種前端框架集成(Angular,VueJS,React),支持響應(yīng)式和觸摸，并且不依賴任何庫就能實現(xiàn)。
19、css-blocks地址：
http://css-blocks.com/一款受 CSS Modules, BEM 和 Atomic CSS 框架啟發(fā)，為你的web應(yīng)用組件提供完美的CSS模塊方案。
20、usebasin地址：
http://usebasin.com/一款你只需要設(shè)計表單，無需編寫后端代碼，就能很方便的將表單應(yīng)用集成到你的項目里。
21、mustard地址：
http://mustard-ui.com/一款適合初學(xué)者的CSS框架，但是看起來還蠻不錯，模塊化，開源，壓縮版只有6KB，支持FLEX,Grid布局和自帶一些漂亮UI,比如進(jìn)度條，表單、按鈕等，雖然小，但功能齊全。
四、javascript工具22、ScrollHint地址：
http://appleple.github.io一個JS庫，用于指示元素可以水平滾動，并帶有指針圖標(biāo)，如果你在做一個新手引導(dǎo)，這個工具將會是一個不錯的選擇。
23、ToastUI editor地址：
http://github.com強(qiáng)大的Markdown編輯器tui.editor,方便集成到你的項目里，這款強(qiáng)大的富媒體編輯器有以下特點：支持 CommonMark 與 GFM（GitHub Flavored Markdown）兩種標(biāo)準(zhǔn)；
支持豐富的擴(kuò)展插件，如顏色選擇器、圖表、UML、表格合并
提供了所見即所得與 Markdown 這兩種模式，在編輯過程中可以隨時切換，非常方便。在所見即所得模式下，可以直接從瀏覽器、 Excel、PPT等復(fù)制文本，并且保留原來的格式。
24、FilePond地址：
http://github.comFilepond 是一個用于文件上傳的 JavaScript 庫，可以上傳任何內(nèi)容，優(yōu)化圖像以獲得更快的上傳速度，并提供一個出色的，可訪問的，流暢的用戶體驗。
Filepond 提供了多種上傳方式：拖放，復(fù)制和粘貼文件，瀏覽文件系統(tǒng)或僅使用庫的API。gzip 壓縮后僅有 21KB ，并且內(nèi)置了圖像優(yōu)化和圖像自動調(diào)整功能。
Filepond 適用于 React ， Vue ， Angular 和 jQuery 。
25、Dinero.js地址：
http://sarahdayan.github.io/dinero.js/一個用來創(chuàng)建、計算和格式化貨幣價值的不可變的框架。
無論在銀行應(yīng)用程序、電子商務(wù)網(wǎng)站還是證券交易所平臺，我們每天都在與金錢互動。我們也越來越依賴技術(shù)來處理問題。
然而，關(guān)于如何以編程處理貨幣價值尚無共識。雖然金錢是現(xiàn)代社會中普遍存在的概念，但相較于日期和時間之類的東西，它并不是任何主流語言中的一流數(shù)據(jù)類型。結(jié)果，每一種軟件都有自己的處理方式，且伴隨著陷阱。
Dinero.js遵循Fowler的模式更多一點兒。它允許你在JavaScript中創(chuàng)建、計算和格式化貨幣值。你可以進(jìn)行數(shù)學(xué)運(yùn)算、解析和格式化對象，使你的開發(fā)過程更加輕松。
該庫設(shè)計為不可變和可鏈接的模式。它支持全局設(shè)置，具有擴(kuò)展格式選項，并提供本機(jī)國際化支持。
26、Swup地址：
http://github.com/gmrchk/swup一款適合初學(xué)者的框架，方便靈活易用，讓你能快速制作專業(yè)級的頁面轉(zhuǎn)場動畫效果。
27、Selection.js地址：
http://simonwep.github.io/selection/簡單易用的可視化，支持鼠標(biāo)拖拽、使用Cmd/Ctrl+click 選擇頁面元素的庫（支持分組選擇），大大節(jié)省了你的開發(fā)時間。只有3KB大小，不依賴jQuery。
28、Glider.js地址：
http://nickpiscitelli.github.io/Glider.js/一個超快速(25毫秒加載)，輕量級(小于3KB)，無依賴性(不需要jQuery)的制作幻燈效果的前端庫，支持響應(yīng)式，易于擴(kuò)展，方便自定義事件等...，更多特性等待你的發(fā)現(xiàn)！
29、ScrollOut地址：
http://scroll-out.github.io/一款幫你制作專業(yè)級Scroll滾動效果（滾動視差）的框架，框架大小不到1KB,使用回調(diào)的方式將相關(guān)動畫元素的屬性進(jìn)行實時分配，方便你做出個性化的動態(tài)效果。
自己是從事了8年的前端工程師，不少人私信問我，2020年前端該怎么學(xué)，方法有沒有？
沒錯，年初我花了一個多月的時間整理出來的學(xué)習(xí)資料，希望能幫助那些想學(xué)習(xí)前端，卻又不知道怎么開始學(xué)習(xí)的朋友。
五、圖標(biāo)、圖表工具30、Orion Icon Library地址：
http://orioniconlibrary.com/多達(dá)6000專業(yè)免費(fèi)的SVG矢量圖標(biāo)，還支持深度的定制，比如更換配色，更改線條粗細(xì)，變換圖標(biāo)風(fēng)格(細(xì)線條、粗線條、扁平)，一鍵生成相關(guān)代碼。
31、Frappe Charts地址：
http://frappe.io/charts一款簡單、專業(yè)、開源、現(xiàn)代風(fēng)格的SVG報表工具,不需要任何依賴庫，代碼風(fēng)格簡單，簡單易用。支持一鍵導(dǎo)出svg代碼。
32、SVGator地址：
http://www.svgator.com/如果您希望將Web圖形提升到一個新的水平，那么動畫SVG就是您的選擇，而SVGator是您可以用來創(chuàng)建它們的最簡單的工具之一。
一款專業(yè)級的SVG動畫制在線制作工具。SVGator還具有代碼管理器面板，因此您可以準(zhǔn)確地看到應(yīng)用程序生成的代碼。SVGator導(dǎo)出干凈，格式良好的代碼。
33、ApexCharts地址：
http://apexcharts.com/ApexCharts.JS 是一個現(xiàn)代化 JavaScript 圖表庫，用于使用簡單的 API 構(gòu)建交互式圖表和可視化，功能十分強(qiáng)大。方便你將圖表嵌入到你的Vue、React項目中。
34、MapKit JS地址：
http://developer.apple.com一款蘋果公司提供的地圖工具，如果想制作和蘋果官方網(wǎng)站一樣的地圖風(fēng)格，這個工具將是一個不錯的選擇，允許你在地圖上添加交互事件，豐富你的地圖應(yīng)用。
35、Img2地址：
http://github.com一款圖片自動預(yù)加載和緩存工具，防止圖片閃爍，并使用模糊濾鏡預(yù)先顯示圖片延遲圖片加載，提高網(wǎng)頁加載速度，使用起來非常簡單，你只需要使用<img-2>替代<img/>標(biāo)簽即可，使用起來就是這么簡單！
36、Lozad地址：
http://github.comLozad.js 是基于 IntersectionObserver API 的輕量級、高性能、可配置的純 JavaScript并且無依賴的懶加載器，其能夠被用于進(jìn)行圖片、iframe 等多種形式的元素。
通過gzip壓縮過后，僅僅1kb大小，相對于常用的jquery.lazyload.js來說，lozad.js實力碾壓，雖然jquery.lazyload.js也才幾kb大小。在github上，已經(jīng)收獲了4800+的star。
六、React工具37、RSUITE地址：
http://rsuitejs.com/React Suite 是一套 React 組件庫，為后臺產(chǎn)品而生。由 HYPERS 前端團(tuán)隊與 UX 團(tuán)隊打造，主要服務(wù)于公司大數(shù)據(jù)產(chǎn)品線。
經(jīng)歷了三次大的版本更新后，累積了大量的組件和豐富的功能。并支持在線定制個性化主題，更重要的是有中文版，方便我們學(xué)習(xí)使用。
38、Pagedraw地址：
http://pagedraw.io/一款神奇的在線UI設(shè)計制作工具，你只需要拖動和布局頁面，這個工具就會給你自動生成質(zhì)量高的React組件代碼，更多功能等待你的發(fā)掘。
39、react-smooth-dnd地址：
http://github.com/kutlugsahin…
一款拖拽頁面元素的React工具，拖拽效果平滑，讓你輕松就能實現(xiàn)卡片、列表、表單組件的的拖拽。
40、Unstated地址：
http://unstated.io/一個新的狀態(tài)管理類庫 unstated.js：簡單易用/合理。和之前的 state 管理庫思路完全不同，這個unstated主打 local state（不是全局store，一個小改動導(dǎo)致整棵樹 rerender），多個 local state 之間也可以共享， 兼具了redux的易用性與flux的合理性，令人耳目一新；unstated完全就是為React設(shè)計的，“足夠React”，讓你感覺不到在用第三方組件。
41、Reach Router地址：reach.tech/router
Reach-Router 是前 ReactRouter 成員 Ryan Florence 開發(fā)的一套基于 react 的路由控件。
42、SVGR地址：
http://www.smooth-code.com/svgr是一個將SVG轉(zhuǎn)換為React組件的工具，svgr由JavaScript實現(xiàn)。整個文檔也非常的小，已開源在github上。
43、React Spreadsheet Grid地址：
http://github.com/用于React類似于Excel的網(wǎng)格組件，具有自定義單元格編輯器，高性能滾動和可調(diào)整大小的列。
七、測試和數(shù)據(jù)工具44、webhint地址：
http://webhint.io/Webhint項目提供了一種用于檢查代碼的可訪問性、性能和安全的開源檢查（Linting）工具。在創(chuàng)建Web站點和應(yīng)用中，有越來越多的細(xì)節(jié)問題亟待完善。為此，Webhint力圖幫助開發(fā)人員標(biāo)記這些細(xì)節(jié)。
Webhint以命令行接口（CLI）工具和在線掃描器兩種形式提供，使用在線掃描器是最快的上手方式。使用在線掃描器需要為其提供一個公開的URL，用于運(yùn)行報告并洞悉應(yīng)用的運(yùn)行情況。
在測試應(yīng)用時，Webhint提供三種運(yùn)行環(huán)境：jsdom、Chrome和Edge。后兩種運(yùn)行環(huán)境使用了Chrome DevTools協(xié)議，第一種運(yùn)行環(huán)境使用Node.js環(huán)境快速地執(zhí)行有限次數(shù)的檢查，無需瀏覽器的支持。
還有更多強(qiáng)大的功能，還有待你試用挖掘。
45、Airtap地址：
http://github.com/airtap/airtAirtap 是一種在瀏覽器中測試 JavaScript 的簡單方法，號稱能覆蓋800多種瀏覽器，能夠在數(shù)秒內(nèi)開始在本地測試你的代碼，并無縫轉(zhuǎn)移到由 Sauce Labs 提供的基于云的瀏覽器上，以獲得更好的覆蓋測試。
Airtap 與其他跨瀏覽器測試運(yùn)行器的不同之處在于其簡單性，以及能夠在許多瀏覽器中輕松運(yùn)行測試套件而無需在本地安裝它們。它可以讓你在開發(fā)過程中快速迭代，并在發(fā)布前提供良好的瀏覽器覆蓋率，而不用擔(dān)心缺少瀏覽器支持。
不要只是聲稱你的 JavaScript 支持“所有瀏覽器”，用測試證明它！
46、mkcert地址：
http://github.com/FiloSottileHTTPS 是 Web 發(fā)展的趨勢，用于提高網(wǎng)站的安全性。使用 HTTPS 需要配置 TLS 證書，得益于 ACME 協(xié)議和 Let's Encrypt 證書，遠(yuǎn)程環(huán)境可以很容易部署。但是對于本地環(huán)境，還沒有普遍有效的證書。
mkcert 被設(shè)計的足夠簡單，隱藏了幾乎所有生成 TLS 證書所必須的知識。它適用于任何主機(jī)名或者 IP，包括 localhost ，因為它只在你的本地環(huán)境使用。
證書是由你的私有 CA 簽發(fā)，當(dāng)你運(yùn)行 mkcert-install 會自動配置這些信任，因此，當(dāng)瀏覽器訪問時，就會顯示安全標(biāo)識。目前支持 MacOS、Linux 和 Windows，以及 Firefox、Chrome 和 Java。甚至支持一些手機(jī)設(shè)備。
47、Puppeteer Recorder地址：
http://checklyhq.com/docs/puppetPuppeteer 是一個Node庫，它提供了一個高級API來控制DevTools協(xié)議上的Chrome或Chromium，常用于爬蟲、自動化測試等，你在瀏覽器手動完成的大多數(shù)事情都可以使用它來完成。
48、http://jsonstore.io地址：
http://www.jsonstore.io/http://jsonstore.io為小型項目提供免費(fèi)，安全且基于JSON的云數(shù)據(jù)存儲。只需輸入
https://www.jsonstore.io/，復(fù)制URL就可以開始發(fā)送HTTP數(shù)據(jù)請求。POST請求將保存數(shù)據(jù)，PUT請求修改數(shù)據(jù)，DELETE請求刪除數(shù)據(jù)和GET請求檢索數(shù)據(jù)。大大方便了前端開發(fā)人員進(jìn)行測試接口的集成，前端頁面制作完成就能進(jìn)行接口測試，使用起來就是這么簡單。
49、Initab地址：
http://initab.com/一款為開發(fā)人員定制打造的工作臺，通過谷歌瀏覽器插件安裝即可使用，通過此工作臺你可以輕松訂閱你感興趣的git項目、跟進(jìn)相關(guān)問題、pull相關(guān)操作，查看版本歷史，訂閱Stack Overflow相關(guān)的內(nèi)容，管理查看Gists相關(guān)內(nèi)容，可以說一個主流技術(shù)平臺聚合工作臺。
50、lambdatest地址：
http://www.lambdatest.com/一款在線自動化測試云端平臺，號稱在2000多個真實瀏覽器和設(shè)備進(jìn)行測試，可以根據(jù)你的測試需求進(jìn)行深度定制，并形成相關(guān)記錄，方便團(tuán)隊的協(xié)作，幫你發(fā)現(xiàn)跨平臺不同瀏覽器版本的各種問題。
在線咨詢