19年你應該關注這50款前端熱門工具(下)

前端達人發表於2019-02-06
19年你應該關注這50款前端熱門工具(下)

上兩篇文章《19年你應該關注這50款前端熱門工具(上)》《19年你應該關注這50款前端熱門工具(中)》文章小編介紹了構建、框架和庫、CSS和HTML、JavaScript相關的工具,這篇文章小編將介紹剩餘21款工具,希望在新的一年裡對大家有所幫助。

圖示、圖表工具

30、Orion Icon Library

orioniconlibrary.com/

19年你應該關注這50款前端熱門工具(下)

多達6000專業免費的SVG向量圖示,還支援深度的定製,比如更換配色,更改線條粗細,變換圖示風格(細線條、粗線條、扁平),一鍵生成相關程式碼。

31、Frappe Charts

frappe.io/charts

19年你應該關注這50款前端熱門工具(下)

一款簡單、專業、開源、現代風格的SVG報表工具,不需要任何依賴庫,程式碼風格簡單,簡單易用。支援一鍵匯出svg程式碼。

32、SVGator

www.svgator.com/

19年你應該關注這50款前端熱門工具(下)

如果您希望將Web圖形提升到一個新的水平,那麼動畫SVG就是您的選擇,而SVGator是您可以用來建立它們的最簡單的工具之一。一款專業級的SVG動畫制線上製作工具。SVGator還具有程式碼管理器皮膚,因此您可以準確地看到應用程式生成的程式碼。SVGator匯出乾淨,格式良好的程式碼。

33、ApexCharts

apexcharts.com/

19年你應該關注這50款前端熱門工具(下)

ApexCharts.JS 是一個現代化 JavaScript 圖表庫,用於使用簡單的 API 構建互動式圖表和視覺化,功能十分強大。方便你將圖表嵌入到你的Vue、React專案中。

34、MapKit JS

developer.apple.com/maps/mapkit…

19年你應該關注這50款前端熱門工具(下)

一款蘋果公司提供的地圖工具,如果想製作和蘋果官方網站一樣的地圖風格,這個工具將是一個不錯的選擇,允許你在地圖上新增互動事件,豐富你的地圖應用。

35、Img2

github.com/RevillWeb/i…

19年你應該關注這50款前端熱門工具(下)

一款圖片自動預載入和快取工具,防止圖片閃爍,並使用模糊濾鏡預先顯示圖片延遲圖片載入,提高網頁載入速度,使用起來非常簡單,你只需要使用<img-2>替代<img/>標籤即可,使用起來就是這麼簡單!

36、Lozad

github.com/ApoorvSaxen…

19年你應該關注這50款前端熱門工具(下)

Lozad.js 是基於 IntersectionObserver API 的輕量級、高效能、可配置的純 JavaScript並且無依賴的懶載入器,其能夠被用於進行圖片、iframe 等多種形式的元素。通過gzip壓縮過後,僅僅1kb大小,相對於常用的jquery.lazyload.js來說,lozad.js實力碾壓,雖然jquery.lazyload.js也才幾kb大小。在github上,已經收穫了4800+的star。

React工具

37、RSUITE

rsuitejs.com/

19年你應該關注這50款前端熱門工具(下)

React Suite 是一套 React 元件庫,為後臺產品而生。由 HYPERS 前端團隊與 UX 團隊打造,主要服務於公司大資料產品線。經歷了三次大的版本更新後,累積了大量的元件和豐富的功能。並支援線上定製個性化主題,更重要的是有中文版,方便我們學習使用。

38、Pagedraw

pagedraw.io/

19年你應該關注這50款前端熱門工具(下)

一款神奇的線上UI設計製作工具,你只需要拖動和佈局頁面,這個工具就會給你自動生成質量高的React元件程式碼,更多功能等待你的發掘。

39、react-smooth-dnd

github.com/kutlugsahin…

19年你應該關注這50款前端熱門工具(下)

一款拖拽頁面元素的React工具,拖拽效果平滑,讓你輕鬆就能實現卡片、列表、表單元件的的拖拽。

40、Unstated

unstated.io/

一個新的狀態管理類庫 unstated.js:簡單易用/合理。和之前的 state 管理庫思路完全不同,這個unstated主打 local state(不是全域性store,一個小改動導致整棵樹 rerender),多個 local state 之間也可以共享, 兼具了redux的易用性與flux的合理性,令人耳目一新;unstated完全就是為React設計的,“足夠React”,讓你感覺不到在用第三方元件。

41、Reach Router

reach.tech/router

19年你應該關注這50款前端熱門工具(下)

Reach-Router 是前 ReactRouter 成員 Ryan Florence 開發的一套基於 react 的路由控制元件. 那麼已經有比較成熟的 ReactRouter 了, 為什麼要”再”做一套 Router 呢, 有興趣的同學可以去了解一下,小編認為主要有以下幾個特點值得你看看:

  • 小,就4kb,壓縮後比react-router小40kb左右。
  • 更少的配置
  • 更好用
  • 基本一樣的api,學習成本非常低
  • 原始碼非常簡潔,總共就3個檔案,900行,如果你想深入理解單頁應用的路由是怎麼實現的,reach-router,絕對是絕佳的下手資料

42、SVGR

www.smooth-code.com/open-source…

19年你應該關注這50款前端熱門工具(下)

svgr是一個將SVG轉換為React元件的工具,svgr由JavaScript實現。整個文件也非常的小,已開源在github上。

43、React Spreadsheet Grid

github.com/denisraslov…

19年你應該關注這50款前端熱門工具(下)

用於React類似於Excel的網格元件,具有自定義單元格編輯器,高效能滾動和可調整大小的列。

測試和資料工具

44、webhint

webhint.io/

19年你應該關注這50款前端熱門工具(下)

Webhint專案提供了一種用於檢查程式碼的可訪問性、效能和安全的開源檢查(Linting)工具。在建立Web站點和應用中,有越來越多的細節問題亟待完善。為此,Webhint力圖幫助開發人員標記這些細節。

Webhint以命令列介面(CLI)工具和線上掃描器兩種形式提供,使用線上掃描器是最快的上手方式。使用線上掃描器需要為其提供一個公開的URL,用於執行報告並洞悉應用的執行情況。

在測試應用時,Webhint提供三種執行環境:jsdom、Chrome和Edge。後兩種執行環境使用了Chrome DevTools協議,第一種執行環境使用Node.js環境快速地執行有限次數的檢查,無需瀏覽器的支援。

還有更多強大的功能,還有待你試用挖掘。

45、Airtap

github.com/airtap/airt…

19年你應該關注這50款前端熱門工具(下)

Airtap 是一種在瀏覽器中測試 JavaScript 的簡單方法,號稱能覆蓋800多種瀏覽器,能夠在數秒內開始在本地測試你的程式碼,並無縫轉移到由 Sauce Labs 提供的基於雲的瀏覽器上,以獲得更好的覆蓋測試。

Airtap 與其他跨瀏覽器測試執行器的不同之處在於其簡單性,以及能夠在許多瀏覽器中輕鬆執行測試套件而無需在本地安裝它們。它可以讓你在開發過程中快速迭代,並在釋出前提供良好的瀏覽器覆蓋率,而不用擔心缺少瀏覽器支援。

不要只是聲稱你的 JavaScript 支援“所有瀏覽器”,用測試證明它!

46、mkcert

github.com/FiloSottile…

19年你應該關注這50款前端熱門工具(下)

HTTPS 是 Web 發展的趨勢,用於提高網站的安全性。使用 HTTPS 需要配置 TLS 證照,得益於 ACME 協議和 Let's Encrypt 證照,遠端環境可以很容易部署。但是對於本地環境,還沒有普遍有效的證照。

mkcert 被設計的足夠簡單,隱藏了幾乎所有生成 TLS 證照所必須的知識。它適用於任何主機名或者 IP,包括 localhost ,因為它只在你的本地環境使用。

證照是由你的私有 CA 簽發,當你執行 mkcert-install 會自動配置這些信任,因此,當瀏覽器訪問時,就會顯示安全標識。目前支援 MacOS、Linux 和 Windows,以及 Firefox、Chrome 和 Java。甚至支援一些手機裝置。

47、Puppeteer Recorder

checklyhq.com/docs/puppet…

19年你應該關注這50款前端熱門工具(下)

Puppeteer 是一個Node庫,它提供了一個高階API來控制DevTools協議上的Chrome或Chromium,常用於爬蟲、自動化測試等,你在瀏覽器手動完成的大多數事情都可以使用它來完成。

48、jsonstore.io

www.jsonstore.io/

19年你應該關注這50款前端熱門工具(下)

jsonstore.io為小型專案提供免費,安全且基於JSON的雲資料儲存。只需輸入https://www.jsonstore.io/,複製URL就可以開始傳送HTTP資料請求。POST請求將儲存資料,PUT請求修改資料,DELETE請求刪除資料和GET請求檢索資料。大大方便了前端開發人員進行測試介面的整合,前端頁面製作完成就能進行介面測試,使用起來就是這麼簡單。

49、Initab

initab.com/

19年你應該關注這50款前端熱門工具(下)

一款為開發人員定製打造的工作臺,通過谷歌瀏覽器外掛安裝即可使用,通過此工作臺你可以輕鬆訂閱你感興趣的git專案、跟進相關問題、pull相關操作,檢視版本歷史,訂閱Stack Overflow相關的內容,管理檢視Gists相關內容,可以說一個主流技術平臺聚合工作臺。

50、lambdatest

www.lambdatest.com/

19年你應該關注這50款前端熱門工具(下)

一款線上自動化測試雲端平臺,號稱在2000多個真實瀏覽器和裝置進行測試,可以根據你的測試需求進行深度定製,並形成相關記錄,方便團隊的協作,幫你發現跨平臺不同瀏覽器版本的各種問題。

小節

終於把50款工具整理完了,在新的一年裡,希望這些工具對大家有所幫助和啟發,再次感謝大家對我文章的關注,讓我新的一年收穫滿滿,感謝掘金小編的推薦,祝各位在新的一年裡前端技術棒棒的,薪資翻翻,一起在國內推動大前端的未來!

更多精彩內容,請微信關注”前端達人”公眾號!

19年你應該關注這50款前端熱門工具(下)


相關文章