超好用的前端開發(fā)工具合輯

原文鏈接：https://dev.to/vijaykhatri96/top-20-web-development-tools-in-2020-3mmb

作者：Vijay Singh Khatri

如有翻譯不準(zhǔn)，請(qǐng)多指正

Web開發(fā)領(lǐng)域正在以驚人的速度擴(kuò)展，每年開發(fā)人員都會(huì)引入一些新的工具和技術(shù)，以更快的速度加速它。大多數(shù)科技巨頭都是從網(wǎng)絡(luò)開始數(shù)十億美元的業(yè)務(wù)的時(shí)候，用戶數(shù)量有限，但現(xiàn)在隨著技術(shù)的改進(jìn)，我們擁有數(shù)十億活躍的網(wǎng)絡(luò)用戶，并且為了維護(hù)和引入網(wǎng)絡(luò)上的新舊工具和技術(shù)，我們有成千上萬(wàn)的網(wǎng)絡(luò)開發(fā)人員。

由于用戶需求和網(wǎng)絡(luò)安全威脅，每年都會(huì)向網(wǎng)絡(luò)引入新技術(shù)，這使得網(wǎng)絡(luò)開發(fā)更容易，用戶互動(dòng)性更強(qiáng)，更安全。與計(jì)算機(jī)科學(xué)中的其他軟件開發(fā)不同，在Web開發(fā)中，我們有大量的庫(kù)，編程語(yǔ)言，框架和一些預(yù)構(gòu)建工具，Web開發(fā)人員可以使用這些工具來創(chuàng)建Web應(yīng)用程序，例如，可以在相同的Web瀏覽器上訪問Netflix，F(xiàn)acebook和Spotify，但是所有這些網(wǎng)站都使用不同的技術(shù)進(jìn)行后端和前端。

由于Web開發(fā)中使用了許多工具，因此不需要學(xué)習(xí)所有這些工具，只需學(xué)習(xí)兩三個(gè)工具，其中包括前端和后端的工具，你可以參加Web開發(fā)面試。有成千上萬(wàn)的組織繼承了Web開發(fā)人員，因此尋找那些正在尋找你想獲得的Web開發(fā)特征的組織。

Web開發(fā)不是學(xué)習(xí)一門特定的語(yǔ)言，你學(xué)到的Web開發(fā)語(yǔ)言可能會(huì)在一三年內(nèi)過時(shí)，因?yàn)樵赪eb開發(fā)工具和技術(shù)中不穩(wěn)定，它們會(huì)隨著時(shí)間的推移而變化，所以你需要隨著時(shí)間的推移更新你的Web技能。

作為開發(fā)人員，編寫代碼所需的第一件事就是文本編輯器，對(duì)于Web開發(fā)文本編輯器，文本編輯器始終優(yōu)先于IDE（集成開發(fā)環(huán)境），因?yàn)樗鼈冎亓枯p，我們不需要任何特定的編譯器或解釋器來運(yùn)行我們的代碼。我們唯一需要的工具是編寫代碼的文本編輯器和用于執(zhí)行代碼的Web瀏覽器，但是，對(duì)于某些后端工具，我們還需要終端來創(chuàng)建localhost。

1、sublime文本編輯器

Sublime是最受歡迎的文本編輯器之一，它提供了20多種編程語(yǔ)言的代碼編輯功能，其中包括所有流行的語(yǔ)言。它是免費(fèi)使用的軟件，同時(shí)還提供了一個(gè)非常交互式的用戶界面。它帶有多個(gè)主題，開發(fā)人員可以根據(jù)不同的選擇自定義主題。

這是一個(gè)非常輕量級(jí)的應(yīng)用程序，易于使用，即使是低規(guī)格的低端計(jì)算機(jī)也可以非常流暢地運(yùn)行Sublime文本編輯器。它提供了所有重要功能，例如語(yǔ)法突出顯示，自動(dòng)更正，特殊插件，內(nèi)置控制臺(tái)等。

2、atom代碼編輯器

許多開發(fā)人員更喜歡Atom而不是Sublime，因?yàn)樗怯蒅itHub開發(fā)的，它還提供了比Sublime更多的功能。然而，Atom對(duì)代碼編輯器市場(chǎng)來說是新的，但它已經(jīng)在開發(fā)人員社區(qū)中獲得了太多的普及。

2014年，GitHub在市場(chǎng)上發(fā)布了Atom，到目前為止，它已經(jīng)擁有了一個(gè)龐大的社區(qū)。Atom還提供對(duì)多種編程語(yǔ)言的支持，它包括許多包，其中還包括GitHub包，它可以幫助你使用Atom在GitHub存儲(chǔ)庫(kù)上保存或提交任何更改。

像SublimeAtom一樣，它也是一個(gè)開源輕量級(jí)軟件，可用于所有流行的操作系統(tǒng)。它具有許多插件和擴(kuò)展，有助于提高開發(fā)人員的工作效率。雖然Atom 為你提供了8 種深色和淺色的語(yǔ)法主題，但也可以安裝atom 社區(qū)創(chuàng)建的主題。

3、Notepad++

Notepad++編輯器以記事本軟件命名，它也是一種流行的文本編輯器，更像是經(jīng)典的文本編輯器，并且像其他文本編輯器一樣，它也涵蓋了幾乎所有編程語(yǔ)言。它建立在C++的基礎(chǔ)上，簡(jiǎn)單性是其主要特點(diǎn)。使用記事本++，你可以輕松地從一個(gè)文件切換到另一個(gè)文件。

4、Visual StudioCode

它是一個(gè)跨平臺(tái)的源代碼編輯器，由Microsoft創(chuàng)建。它具有許多功能，例如代碼調(diào)試，嵌入式Git控件，GitHub，語(yǔ)法突出顯示，智能代碼完成和代碼重構(gòu)。

它還具有許多自定義功能，允許用戶更改編輯器主題，還可以為編輯器本身定義快捷鍵。您還可以在代碼編輯器中安裝額外的擴(kuò)展，以獲得其他功能。

Web框架是用于創(chuàng)建Web應(yīng)用程序的多個(gè)模塊和庫(kù)的集合。Web-Frameworks包含預(yù)先編寫的代碼，因此在構(gòu)建Web應(yīng)用程序時(shí)，就不需要從頭開始編寫代碼，而是使用框架預(yù)先編寫的代碼并構(gòu)建新的應(yīng)用程序。如今，開發(fā)人員使用框架而不是從頭開始編寫核心代碼，但是，所有這些框架都依賴于特定的編程語(yǔ)言，這意味著你需要學(xué)習(xí)核心編程語(yǔ)言才能在框架上工作。

由于Web開發(fā)分為兩個(gè)主要端，稱為前端和后端，因此開發(fā)人員為兩端創(chuàng)建了各種框架。

前端Web框架

1、Angular

Angular是最受歡迎的前端Web框架之一，它由Google開發(fā)，一個(gè)大型的前端開發(fā)人員社區(qū)已經(jīng)為他們的Web項(xiàng)目調(diào)整了angular。最初，當(dāng)Angular發(fā)布時(shí)，使用JavaScript作為其編程語(yǔ)言，但在2016年，Goole完全重寫了Angular，現(xiàn)在Angular使用Typescript作為其編程語(yǔ)言。

使用Angular，我們可以創(chuàng)建客戶端動(dòng)態(tài)網(wǎng)頁(yè)和Google，它使用Angular為其各種項(xiàng)目創(chuàng)建了這個(gè)Web框架。Angular可用于創(chuàng)建跨平臺(tái)的Web應(yīng)用程序，其中包括本機(jī)移動(dòng)和桌面的Web應(yīng)用程序。

2、React.js

React 是由Facebook 開發(fā)的JavaScript 庫(kù)，用于創(chuàng)建前端Web應(yīng)用程序。然而，react不是一個(gè)Web框架，但它也可以用來創(chuàng)建Web應(yīng)用程序，因?yàn)樗玫搅薋acebook的支持，它在幾年內(nèi)獲得了很大的普及。這也很重要，因?yàn)樗茿ngularWeb框架的完美競(jìng)爭(zhēng)對(duì)手，所以如果你不是angular的粉絲，你可以使用React，與angular相比，它很容易學(xué)習(xí)。

3、 Vue.js

Vue.js是另一個(gè)流行的JavaScriptWeb框架，于2014年2月發(fā)布。像React 和Angular 一樣，我們可以使用Vue.js 創(chuàng)建動(dòng)態(tài)、交互式的前端Web 應(yīng)用程序。因?yàn)樗褂肑avaScript作為編程語(yǔ)言，這使得Vue易于學(xué)習(xí)和使用。

雖然Vue沒有得到任何流行的科技巨頭的支持，但它在幾年內(nèi)已經(jīng)獲得了很大的普及。如果我們看一下它的架構(gòu)，它遵循MVVM（Model-View-ViewModel）架構(gòu)，它還為你提供了更好的文檔。

4、Bootstrap

Bootstrap是一個(gè)開源的美觀而強(qiáng)大的CSS框架。它于2011年發(fā)布，當(dāng)前版本的bootstrap是Bootstrap4。雖然Bootstrap被認(rèn)為是一個(gè)CSS框架，但它也包含HTML，JavaScript和jQuery腳本。使用Bootstrap，只需執(zhí)行復(fù)制和粘貼即可創(chuàng)建美觀且交互式的前端頁(yè)面。

5、Ember

Ember使用JavaScript作為其編程語(yǔ)言，并于2011年作為跨平臺(tái)JavaScript框架發(fā)布。Ember可用于為桌面和移動(dòng)設(shè)備創(chuàng)建動(dòng)態(tài)客戶端應(yīng)用程序。

大多數(shù)專業(yè)開發(fā)人員將Ember用于前端應(yīng)用程序。Ember遵循Vue.js等MVMM架構(gòu)，許多流行的網(wǎng)站如AppleMusic，SquareINC，Discourse，LinkedIn，Twitch等都使用ember作為其用戶界面前端。

后端框架

1、Django

Django是最流行的python框架;然而，python有許多Web框架，Django占據(jù)了第一的位置。它是一個(gè)開源的Web框架，可以用來創(chuàng)建動(dòng)態(tài)的Web應(yīng)用程序，隨著Python3.8的發(fā)布，Django開發(fā)者也推出了新版本的Django作為Django3。

它有一個(gè)非常龐大的社區(qū)，你可以在GitHub和StackOverflow上找到成千上萬(wàn)的Django項(xiàng)目。Python本身是2020年最流行的編程語(yǔ)言，它幫助Django形成了一個(gè)龐大的社區(qū)。

由于python是一種易于學(xué)習(xí)的語(yǔ)言，但Django不是這種情況，但是，Django還提供了許多內(nèi)置功能和組織良好的文檔。使用Django，可以構(gòu)建強(qiáng)大而高質(zhì)量的應(yīng)用程序。

2、Ruby on Rails

Ruby onRails是后端Web框架中最古老的玩家之一。它使用Ruby作為其編程語(yǔ)言，有超過800，000個(gè)網(wǎng)站使用Rubyon Rails作為其后端支持。許多流行的網(wǎng)站，如Airbnb，GitHub，Hulu，Groupon等，都建立在Rubyon Rails之上。

借助該框架，我們可以實(shí)現(xiàn)復(fù)雜的Web開發(fā)算法，甚至可以創(chuàng)建基于云的應(yīng)用程序。

3、Laravel

Laravel是PHP開發(fā)人員的完美框架，他們希望將他們的PHP中級(jí)技能提升到一個(gè)新的水平。截至PHP本身用于創(chuàng)建后端Web應(yīng)用程序，但Laravel為您提供了一些PHP預(yù)寫代碼，可以提高PHP開發(fā)人員的創(chuàng)造力。

Laravel帶有Model-View-Controller架構(gòu)，對(duì)于那些對(duì)PHP有一定了解的人來說，它的學(xué)習(xí)曲線也非常低。

在處理Web項(xiàng)目時(shí)，我們需要不同的庫(kù)，框架，編程語(yǔ)言和其他依賴項(xiàng)，因此要管理所有這些依賴項(xiàng)，我們使用程序包管理器。程序包管理器是一種軟件工具，用于安裝、配置、刪除和升級(jí)項(xiàng)目依賴項(xiàng)。

1、NPM

NPM 代表Node Package Manager，它是Node.js 的默認(rèn)Package Manager。它為超過100，000個(gè)封裝和模塊供電。使用NPM，可以在項(xiàng)目中創(chuàng)建一個(gè)package.json文件，并從終端更新和優(yōu)化所有項(xiàng)目依賴項(xiàng)。如果你想成為一名Web開發(fā)人員，你必須具備NPM的知識(shí)，因?yàn)榇蠖鄶?shù)組織都使用NPM進(jìn)行他們的項(xiàng)目，如果你是一個(gè)完整的初學(xué)者，你可以去Reddit上進(jìn)行NPM初學(xué)者的解釋。

2、pip

pip是Python的默認(rèn)程序包管理器，如果你是Python開發(fā)人員或使用Django或任何其他pythonWeb框架進(jìn)行Web開發(fā)，你會(huì)知道pip及其用法。pip是Python的預(yù)安裝，使用它，你可以安裝PyPI存儲(chǔ)庫(kù)中存在的任何Python包。

3、Yarn

Yarn是Facebook的新程序包管理器，在yarn中，F(xiàn)acebook引入了一個(gè)與Lerna相結(jié)合的新工作區(qū)，它為開發(fā)人員提供了一個(gè)強(qiáng)大的工具來管理項(xiàng)目的所有依賴項(xiàng)。

Git是流行的版本控制，每個(gè)人都用它來附加其項(xiàng)目代碼的歷史。但是，大部分git 工作都是用git 終端命令完成的，但是現(xiàn)在git 還為用戶提供了一些GIT GUI 客戶端和應(yīng)用程序來管理我們的項(xiàng)目代碼。

1、GitHub 桌面

它是GitHub的一款軟件，可幫助您在桌面上創(chuàng)建和管理GitHub存儲(chǔ)庫(kù)。GitHubDesktop 目前可用于 macOS和 Windows操作系統(tǒng)。如果你不喜歡使用git 命令或終端，只需下載GitHub 桌面并使用其交互式界面提交和管理GitHub 存儲(chǔ)庫(kù)即可。

2、GitKraken

GitKraken是一個(gè)開源的跨平臺(tái)GitGUI客戶端，與GitHub桌面相比，它更具交互性和初學(xué)者友好性，但它包含git的所有高級(jí)功能。它可以幫助您通過交互式圖形界面保持git工作流程的清潔。

API代表應(yīng)用程序編程接口，API測(cè)試工具是用于測(cè)試API質(zhì)量的軟件，該工具檢查API是否符合所有期望或該API中存在一些缺點(diǎn)。

1、SoapUI

使用SoapUI，我們可以非?？焖俚販y(cè)試任何REST和SOAPAPI，它還提供了拖放和點(diǎn)擊選項(xiàng)進(jìn)行測(cè)試。

2、Postman

Postman是最好的API測(cè)試工具之一。它由AbhinavAsthana作為測(cè)試和開發(fā)的API工作流程發(fā)布?，F(xiàn)在有超過800萬(wàn)開發(fā)人員，使用此測(cè)試工具來檢查其API的標(biāo)準(zhǔn)。

結(jié)論

如果想成為Web開發(fā)人員，這些是可以在接下來工作時(shí)間里可以使用的工具。你不需要學(xué)習(xí)所有這些工具，只需使用每個(gè)部分的一個(gè)工具，并始終嘗試使用踏步技術(shù)提升自身的技能。