前端已經(jīng)不是以前的樣子了，隨著React 18(服務(wù)器組件)和所有現(xiàn)代網(wǎng)絡(luò)堆棧的出現(xiàn)，前端開發(fā)真正意味著應(yīng)用開發(fā)。

我們開發(fā)網(wǎng)絡(luò)和本地應(yīng)用程序的方式變得更加模塊化、組件化、有組織，因此我們應(yīng)該減少對實(shí)現(xiàn)和配置的關(guān)注，而更多地關(guān)注應(yīng)用程序的創(chuàng)建和組成。

[[404897]]

這個(gè)列表不會(huì)介紹那些你還沒聽說過但會(huì)改變你日常生活的新的前沿工具，而會(huì)介紹那些會(huì)幫助加快前端開發(fā)速度的改變游戲規(guī)則的、很受歡迎的工具，使你成為一個(gè)更好的開發(fā)者——并獲得更多的空閑時(shí)間。

1. 比特--組件驅(qū)動(dòng)的10倍

事實(shí)上，現(xiàn)代的前端已經(jīng)是組件驅(qū)動(dòng)的?，F(xiàn)代應(yīng)用程序是用現(xiàn)代框架構(gòu)建的，而現(xiàn)代框架是以組件為中心的。

比特是一體化工具組件驅(qū)動(dòng)開發(fā)的下一代工具。與其構(gòu)建一個(gè)由許多組件組成的應(yīng)用程序，不如用Bit構(gòu)建獨(dú)立的組件，用它們來組成不同的應(yīng)用程序。每個(gè)組件都是獨(dú)立的，可以在任何地方運(yùn)行。

雖然Bit把你變成了組件創(chuàng)建和組合的大師，但Bit的云平臺(tái)幫助團(tuán)隊(duì)擴(kuò)展并共同構(gòu)建許多東西。

比特的開放源碼軟件工具是輕量級(jí)和高度可擴(kuò)展的。它用于開發(fā)和合成組件。它為開發(fā)和組合組件提供了一個(gè)簡單而強(qiáng)大的工作空間，將任何 repo 變成一個(gè)智能的 monorepo，同時(shí)抽象掉開銷和配置。

它提供了很好的功能，如可重復(fù)使用的可定制的組件模板，漂亮的可視化組件文檔(有mdx等)，獨(dú)立的單元測試，每個(gè)組件的版本管理和導(dǎo)出(推送/發(fā)布)等等。

而且，它有一個(gè)可視化的UI，使開發(fā)體驗(yàn)也很有趣!Bit的本地工作區(qū)UI中的一個(gè)非常基本的按鈕

比特的云平臺(tái)淘寶網(wǎng)是20多萬開發(fā)者和一些世界上最好的團(tuán)隊(duì)的家，他們可以在這里托管和合作開發(fā)他們的組件。它為一個(gè) "開箱即用的組件市場 "配備了企業(yè)級(jí)功能，包括安全托管、搜索、注冊表等等。一個(gè)應(yīng)用程序只是一個(gè)組件圖......用戶界面、鉤子、邏輯，甚至后端。

Bit是一個(gè)強(qiáng)大的基礎(chǔ)設(shè)施，它的模式轉(zhuǎn)變已經(jīng)在發(fā)生了。開始使用Bit的流行用例包括微前端(嘗試Bit與模塊聯(lián)盟!)、 設(shè)計(jì)系統(tǒng)(在組件上進(jìn)行協(xié)作)、快速應(yīng)用開發(fā)(只需編譯組件)和產(chǎn)品團(tuán)隊(duì)的快速交付(升級(jí)組件，而不是應(yīng)用)。

• 模塊聯(lián)盟+比特=前端的下一次進(jìn)化
• 比特：模塊化網(wǎng)絡(luò)的平臺(tái)

2. GatsbyJS和NextJS - 最快的JAMStack網(wǎng)站

GatsbyJS和NextJS是JAMStack時(shí)代的兩個(gè)突出的靜態(tài)網(wǎng)站框架。在正確的用例中，使用這兩個(gè)選項(xiàng)之一可以大大加快新網(wǎng)站的開發(fā)速度，這要?dú)w功于現(xiàn)成的框架、豐富的模板和高度優(yōu)化的工具集，可以開始建設(shè)。

GatsbyJS是一個(gè)免費(fèi)的、開源的、基于React的框架，旨在幫助開發(fā)者建立高性能的網(wǎng)站和應(yīng)用程序。簡單地說，GatsbyJS是一個(gè)利用React的靜態(tài)網(wǎng)站生成器。事實(shí)上，它可以讓你部署靜態(tài)頁面(在編譯時(shí)獲取數(shù)據(jù))，這實(shí)際上是React應(yīng)用程序。隨著時(shí)間的推移，它在性能、速度和開發(fā)體驗(yàn)方面都得到了很好的優(yōu)化。

Next.js是一個(gè)開源的React前端開發(fā)網(wǎng)絡(luò)框架，由Vercel創(chuàng)建，可以實(shí)現(xiàn)服務(wù)器端渲染和為基于React的網(wǎng)絡(luò)應(yīng)用生成靜態(tài)網(wǎng)站等功能。Next通常被認(rèn)為是一種更穩(wěn)健和靈活的方式來生成網(wǎng)站甚至是應(yīng)用程序。

這兩個(gè)框架都有數(shù)以千計(jì)的插件和多年的優(yōu)化，在建立一個(gè)靜態(tài)網(wǎng)站時(shí)，是真正快速啟動(dòng)和運(yùn)行的好方法。

如何進(jìn)行選擇取決于你的項(xiàng)目。它們都不是為了一個(gè)完整的現(xiàn)代應(yīng)用程序，但都提供了一些額外的擴(kuò)展功能，推動(dòng)了JAMStack靜態(tài)網(wǎng)站的極限。

3. Netlify和Vercel--前端開發(fā)的后端

Vercel和Netlify是兩個(gè)在很多方面都不相上下的平臺(tái)。

兩者都為前端開發(fā)者提供了一個(gè)簡單的方法來部署靜態(tài)網(wǎng)站。兩者都抽象出必須處理服務(wù)器和微服務(wù)來部署網(wǎng)站的痛苦和開銷，并為前端開發(fā)者提供一個(gè)非常簡單和友好的工作流程來托管和部署他們的靜態(tài)網(wǎng)站。

Netlify創(chuàng)建了自己的倉庫，同時(shí)推送到Github倉庫和自己的微服務(wù)。然后，它在一個(gè)廣泛的CDN上執(zhí)行和分發(fā)內(nèi)容，以提供預(yù)先建立的靜態(tài)網(wǎng)站。

Vercel是一個(gè)面向前端開發(fā)者的部署平臺(tái)。Vercel使開發(fā)者能夠托管即時(shí)部署和自動(dòng)擴(kuò)展的網(wǎng)站和網(wǎng)絡(luò)服務(wù)--所有這些都無需任何復(fù)雜的服務(wù)器配置。

這兩個(gè)平臺(tái)都提供了構(gòu)建、部署和托管的解決方案。這兩個(gè)托管平臺(tái)都有一個(gè)與github集成的工作流程，以及無服務(wù)器功能支持和不同的API等很酷的功能。雖然Netlify的開發(fā)體驗(yàn)很好，但Vercel的一個(gè)巨大優(yōu)勢是服務(wù)器端渲染，它可以讓你在幾分鐘內(nèi)輕松部署一個(gè)完全工作的Next.js應(yīng)用程序。

• 在Netlify、Vercel和Digital Ocean之間做出選擇
• Netlify vs. Vercel

4. Ripple CI - 傳播組件驅(qū)動(dòng)的構(gòu)建

當(dāng)使用Bit的組件驅(qū)動(dòng)工作時(shí)，你可以享受Ripple CI。

雖然仍處于封閉測試階段【獲得訪問權(quán)】(mailto: support@bit.dev)，但Ripple無疑是網(wǎng)絡(luò)的一項(xiàng)決議。它只構(gòu)建組件。

更準(zhǔn)確地說，它構(gòu)建了所有受影響的組件——無處不在。當(dāng)你推送一個(gè)組件的變化時(shí)，Bit "知道 "哪些其他組件依賴于該組件，并將傳播和構(gòu)建變化到所有受影響的組件，跨越所有不同的應(yīng)用程序。

想象一下，當(dāng)你對一個(gè)按鈕或卡片進(jìn)行修改時(shí)，看著Ripple將修改傳播到所有使用你的卡片組件的應(yīng)用程序，以及依賴它的每個(gè)組件和頁面。就這樣，Ripple不斷整合整個(gè)組織。

比特的團(tuán)隊(duì)正在使用由瑞波更新的組件構(gòu)建服務(wù)

由于每個(gè)組件都是獨(dú)立構(gòu)建的，你可以很容易地了解到底是哪個(gè)變化破壞了哪個(gè)組件，在哪里，以及為什么。

由于Ripple構(gòu)建的只是組件，它還可以節(jié)省大量的構(gòu)建時(shí)間，只需不構(gòu)建沒有變化的東西。一些使用Ripple測試版的團(tuán)隊(duì)證實(shí)，它可以減少90%的構(gòu)建時(shí)間。

而且，Ripple利用Bit為組件、頁面和應(yīng)用程序的每一個(gè)變化創(chuàng)建可視化預(yù)覽。這是科幻小說，而且很有效。

5. Stencil和Svelte - 真正的網(wǎng)絡(luò)組件

建立在Web組件標(biāo)準(zhǔn)基礎(chǔ)上的自定義組件和小工具，將在現(xiàn)代瀏覽器上工作，并可用于任何與HTML一起工作的JavaScript庫或框架。

模板是一個(gè) "用于構(gòu)建快速、可重復(fù)使用的UI組件和漸進(jìn)式Web應(yīng)用程序的Web組件編譯器"。它使用TypeScript、JJSX、微小的虛擬DOM層、高效的單向數(shù)據(jù)綁定、異步渲染管道來加載來生成基于標(biāo)準(zhǔn)的Web組件。

Stencil還釋放了一些功能，如無需運(yùn)行無頭瀏覽器的服務(wù)器端渲染、預(yù)渲染和 "作為屬性的對象"(而不只是字符串)。Stencil組件很容易創(chuàng)建，因?yàn)樗鼈儽举|(zhì)上是帶有裝飾器元數(shù)據(jù)的ES6/TypeScript類。

Svelte是 "一個(gè)編譯器，當(dāng)你的應(yīng)用程序的狀態(tài)發(fā)生變化時(shí)，它將你的聲明性組件轉(zhuǎn)換為高效的JavaScript，以手術(shù)方式更新DOM"。這意味著，你可以使用CSS、HTML和純JavaScript構(gòu)建無模板的組件，而Svelt會(huì)將其編譯成具有內(nèi)置反應(yīng)性的小而輕的JS。

另一個(gè)有用的能力是JS庫中對任何框架無關(guān)的CSS的內(nèi)置支持。

6. Jest和Cypress--測試驅(qū)動(dòng)的樂趣

二者關(guān)鍵的區(qū)別是什么，應(yīng)該在什么項(xiàng)目中使用哪一個(gè)是關(guān)鍵。

Cypress是一個(gè)開源的工具(現(xiàn)在是一個(gè)商業(yè)平臺(tái))，用于現(xiàn)代網(wǎng)絡(luò)的前端自動(dòng)化測試。Cypress建立在一個(gè)新的架構(gòu)上，在與被測試的應(yīng)用程序相同的運(yùn)行循環(huán)中運(yùn)行。因此，Cypress為在瀏覽器中運(yùn)行的任何東西提供更好、更快、更可靠的測試。Cypress適用于任何前端框架或網(wǎng)站。

Jest是一個(gè) "令人愉快的JavaScript測試框架，專注于簡單性"--這說明了很多問題。Jest采取一種熟悉的方法。它建立在Jasmine測試框架之上，使用熟悉的expect(value).toBe(other)斷言，自動(dòng)模擬由require()返回的CommonJS模塊，使大多數(shù)現(xiàn)有代碼可以測試，并且有一個(gè)簡短的反饋循環(huán)。DOM APIs被模擬，測試通過一個(gè)小型的node.js命令行工具并行運(yùn)行。

關(guān)鍵的區(qū)別是，Cypress最常被用于端到端測試，而Jest則用于單元測試。你也可以反過來，將兩者用于相反的用例，但這是常見的慣例。了解更多。

我用Jest、Enzyme、測試庫和Cypress測試了一個(gè)React應(yīng)用。以下是不同之處。

7. Sentry - 簡單的全棧式應(yīng)用監(jiān)控

Sentry.io是一個(gè)開源的全棧錯(cuò)誤跟蹤系統(tǒng)，支持廣泛的服務(wù)器、瀏覽器、桌面和本地移動(dòng)語言和框架。那么，為什么Sentry會(huì)出現(xiàn)在前端開發(fā)者的名單中呢?

因?yàn)樗且环N為網(wǎng)絡(luò)開發(fā)體驗(yàn)而設(shè)計(jì)的，給前端和全棧開發(fā)人員一個(gè)非常簡單和友好的體驗(yàn)，用于捕捉問題，防止錯(cuò)誤到達(dá)生產(chǎn)，監(jiān)控性能，而且都是通過一個(gè)簡單的SDK，在2個(gè)命令中安裝。而且UI/UX的使用也非常簡單和友好。

使用Sentry，你還可以追蹤由后端引起的前端錯(cuò)誤，給你一個(gè)全面的全棧方法來監(jiān)控和修復(fù)webdev錯(cuò)誤。你可以得到關(guān)于應(yīng)用程序狀態(tài)的上下文，這樣你就能夠理解特定問題的影響。更重要的是，所有未處理的異常都會(huì)被自動(dòng)捕獲，單個(gè)錯(cuò)誤會(huì)被及時(shí)發(fā)現(xiàn)和處理。