1. 2020年Web前端工程師的學習建議
今天小編要跟大家分享的文章是關於2020年web前端工程師的學習建議。毫無疑問，前端開發將成為2020年技術領域最熱門的學科之一。
以前，前端空間的開發人員只要了解一些HTML，CSS，也許還有jQuery來創建互動式網站，就足夠了。但是今天，他們面臨著廣泛且不斷變化的開發技能生態系統;掌握的工具，庫和框架;並且需要不斷投資於個人教育。
最近幾年，我們使用JavaScript為主要的Web應用程序提供了強大的新庫和框架，例如ReactJS，VueJS和Svelte。想要學習web前端知識的小夥伴們來和小編一起看一看吧!
1.框架
2020年，我們可能會看到Facebook的ReactJS與社區驅動的VueJS之間的對決。目前，React在GitHub上擁有140,000星，而Vue則擁有153,000星。例如，Angular只有53,000個恆星。
在2019年，React(藍線)，Vue(紅線)，Angular(黃線)和Svelte(綠線)的搜索量支持此假設-Vue略高於React。Angular在搜索量方面無法跟上，Svelte在此比較中絕對不起作用。
因此，對於2020年，使用或希望使用JavaScript框架的前端開發人員應將React和Vue作為他們的主要選擇。如果您正在處理大型企業項目，則Angular是有效的選擇。
2.靜態網站生成器
靜態站點生成器結合了伺服器端渲染的功能(對於SEO非常重要，而且還具有初始載入時間)和單頁應用程序。
如今，許多項目即使不需要伺服器端渲染也選擇了SSG，因為Next或Nuxt之類的解決方案具有便捷的功能，例如模塊捆綁器，集成測試運行器等。
如果您認真對待前端開發，則應仔細研究以下項目，並嘗試獲得一些實踐經驗：
·Next(基於React)
·Nuxt(基於Vue)
·Gatsby(基於React)
·Gridsome(基於Vue)
3.JAMstack
術語JAMstack代表JavaScript(在客戶端上運行-例如，React，Vue或VanillaJS)，API(伺服器端進程通過JavaScript通過HTTPS抽象並訪問)和標記(在部署時預先構建的模板標記)。。
這是一種構建網站和應用程序以提高性能的方法-降低擴展成本，提供更高的安全性並提供更好的開發人員體驗。
盡管這些術語本身並不是什麼新鮮事物，但它們的共同點是相同的-它們並不依賴於Web伺服器。因此，依賴於Ruby或Node.js後端或使用伺服器端CMS(例如Drupal或WordPress)構建的網站的單片應用程序不是使用JAMstack構建的。
如果要使用JAMstack，有一些最佳實踐：
整個項目都在CDN上提供服務
由於不需要伺服器，因此整個項目都可以通過CDN進行服務，從而釋放出無與倫比的速度和性能。
一切都存在於在Git中
每個人都應該能夠從Git存儲庫克隆整個項目，而無需資料庫或復雜的設置。
自動化構建
您可以完美地自動構建，因為所有標記都是預先構建的，例如使用webhooks或雲服務。
原子部署
為了通過在大型項目中重新部署數百或數千個文件來避免出現不一致的狀態，原子部署將等待所有文件上傳，然後再進行更改。
即時緩存失效
當站點上線時，必須確保CDN可以處理即時緩存清除，以使更改可見。
像Netlify或Zeit這樣的著名主機都支持JAMstack應用程序，大公司使用它們為用戶提供出色的體驗。
4.PWA
漸進式Web應用程序(PWA)無疑將在2020年成為現實。越來越多的公司選擇PWA取代本機應用程序，以便為用戶提供豐富的移動體驗。
PWA可靠(即時載入，無需連接互聯網即可工作)，快速(流暢的動畫，對用戶交互的快速響應)和吸引人的體驗(本機應用程序的感覺，出色的用戶體驗)。
他們利用服務人員提供離線功能，並利用Web應用清單文件提供全屏體驗。
構建漸進式Web應用程序的原因有：
·可以從瀏覽器添加到用戶的主屏幕
·即使沒有互聯網也能正常工作
·支持網路推送通知以增強用戶參與度
·利用Google的Lighthouse功能
5.GraphQL
GraphQL是當前最熱門的主題之一，並且絕對是您在2020年需要學習或改進的東西。
盡管REST通過提供無狀態伺服器之類的出色概念一直被認為是設計WebAPI的事實上的標准，但在跟上快速變化的客戶端訪問RESTful
API時，RESTfulAPI卻越來越不靈活。
GraphQL由Facebook開發，旨在解決開發人員在處理RestfulAPI時面臨的確切問題。
使用RESTAPI，開發人員可以通過從具有特定目的的多個端點(例如/users/端點或/tours//
location端點)中獲取數據來收集數據。
使用GraphQL，這將以不同的方式工作。開發人員會將查詢與他們的數據要求一起發送到GraphQL伺服器。然後，伺服器將返回帶有所有相應數據的JSON對象。
使用GraphQL的另一個好處是它使用了強類型系統。GraphQL伺服器上的所有內容都是使用GraphQL模式定義語言(SDL)通過模式定義的。創建架構後，前端開發人員和後端開發人員都可以彼此獨立地工作，因為他們知道已定義的數據結構。
6.代碼編輯器/IDE
與2019年一樣，微軟的VSCode將在2020年成為大多數前端工程師的第一編輯器。
它提供幾乎類似於IDE的功能，例如代碼自動完成和語法高亮顯示，並且可以通過其擴展市場進行幾乎無限的擴展。
特別是市場使VSCode如此出色。以下是您作為前端開發人員的一些出色擴展：
·JavaScript(ES6)代碼段
·npm
·beautify
·CSS速覽
·ESLint
·LiveSass編譯器
·Chrome調試器
這些是很酷的例子。在VSCode中還有很多可以發現的地方，因此，如果您尚未使用它，我建議您嘗試一下。
7.測試
未經測試的代碼不應找到它的生產方式。
在您的個人項目中似乎沒有任何測試似乎很方便，但在商業和企業環境中工作時必須進行測試。因此，對於任何開發人員而言，最好盡可能將測試集成到開發工作流程中。
可以區分以下測試用例：
單元測試
隔離測試單個組件或功能。
整合測試
測試組件之間的交互。
端到端測試
在瀏覽器中測試功能完善的用戶流。
有更多測試方法，例如手動測試，快照測試等。如果您想升任高級開發人員職位或打算在擁有某些開發標準的大型公司工作，則應嘗試進行測試技能。
8.干凈的代碼
能夠編寫干凈的代碼是一項很棒的技能，許多組織都對此提出了很高的要求。如果您想從開發人員的位置升級為高級開發人員的位置，則應真正學習干凈代碼的概念。
簡潔的代碼應優雅且易於閱讀。它應該重點突出，您應該注意這一點。所有測試均以純凈代碼運行。它們不應包含重復項，應盡量減少使用實體(例如類，方法和函數)。
干凈代碼開發人員應做的一些事情是：
·為變數，類，方法和函數創建有意義的名稱
·函數應該很小並且參數應盡可能少
·根本不需要注釋-代碼應該說明一切
如果您想了解有關干凈代碼檢查的更多信息，請閱讀RobertC.Martin的書籍和帖子。
9.Git
毫無疑問，Git是當今Web開發中版本控制的標准。對於每個前端工程師而言，了解基本的Git概念和工作流程以在各種規模的團隊中有效工作都是非常重要的。
這是您應該知道的一些流行的Git命令：
gitconfig
gitinit
gitclone
gitstatus
gitadd
gitcommit
gitpush
gitpull
gitbranch
知道這些命令可以提高工作效率總是很高興的，但是前端工程師還應該學習Git的基本概念。
10.軟技能
對於開發人員來說，經常被忽視但確實非常重要的是獲得軟技能。
雖然有助於了解事物的技術方面，但了解如何在團隊中進行交流也同樣重要。如果您對技術職業很認真，並且/或者打算升任高級職位，則應該從事以下軟技能方面的工作：
同情
溝通
團隊合作
平易近人和樂於助人
忍耐
開放的思想
解決問題
責任心
創造力
時間管理
永遠記住：開發人員最重要的交付物是高級開發人員。(提升你自己)
結論
在本文中，小編向您展示了前端開發人員應在2020年嘗試學習，改進或掌握的10項重要內容。想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
2. 成為Web前端開發工程師的學習指南
今天小編要跟大家分享的文章是關於成為web前端開發工程師的學習指南。想要學習web前端開發技術的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
1、首先確定你的目標或道路
我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發人員要做什麼，因為這將幫助你選擇合適的工具。和學習技術。成為Web開發人員的原因有很多，下面列出了一些選擇因素：
·你想作為一名Web開發人員在一家公司工作，這是最普遍的原因。
·你想以自由開發人員的身份來開始自己的業務或代理。
·你可以成為其他公司的顧問。
·你可以創建自己的應用來賺錢。
·編碼是你的業余愛好。
從上述感興趣或目標的領域，你可以選擇適用於你的目標的正確工具和技術。如果你的目標是成為一名前端開發人員，則可以選擇前端開發的工具和技術。後端和全棧開發也是如此。
2、Web開發的基本工具和軟體
·
計算機和操作系統：如果沒有計算機和操作系統，則無法編寫代碼。要學習Web開發，你不需要任何高端計算機(如果你擁有的話，那麼更好)。你可以使用任何類型的中型筆記本電腦或台式機。對於操作系統，可以使用適合你的MacOS，Windows(最新版本)或Linux。
·文本編輯器/
IDE：毫無疑問，VSCode適用於大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇，例如Sublime
Text或Atom。如果我們談論IDE，那麼是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不錯的選擇。
·
Web瀏覽器：大多數開發人員的首選是Chrome或Firefox。Chrome速度很快，並且使用V8引擎(JavaScript引擎)。Firefox也取得了長足的進步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發工具，可以對Web開發中的問題進行故障排除。
·終端：您將使用一些系統命令來使用CLI進行很多工作。您可以將默認或第三方終端用於您的Web開發項目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper這些都是可以使用的選項。
·設計(可選)：並不是每個人都需要學習。在公司中，有專門的團隊來製作圖像，徽標或草圖，但是如果您是自由職業者，則可能必須學習Adobe
XD，Photoshop，Sketch或Figma。
3、從HTML和CSS開始
HTML和CSS是Web開發的基本構建塊。無論您的Web應用程序有多先進，或者使用什麼框架和後端語言，都必須使用HTML和CSS構建前端應用程序。因此，這是在Web開發中要學習的第一件事。
·HTML5(語義元素，屬性，文檔類型等)
·CSS基礎知識顏色，字體，位置，盒子模型等。
·CSSGrid和Flexbox對齊內容或創建列。
·CSS自定義屬性
4、響應式布局
您的應用程序應該在所有類型的設備(例如智能手機，平板電腦，台式機，iPad或任何其他屏幕尺寸的設備)上都可以查看和使用。因此，了解創建響應式設計或布局非常重要。讓我們來看一些重要的主題。
·了解如何設置視口
·媒體查詢不同的屏幕尺寸。
·流體寬度
·雷姆單位
·移動優先
5、自定義可重用CSS組件
與其依賴大型的CSS框架(如Bootstrap)，不如創建自己的模塊化，可重用的CSS組件以在項目中使用。如果您構建自己的定製設計，則無需導入完整的庫。您創建只需要特定UI的組件。的新趨勢最近還出現了有助於更有效地編寫CSS代碼的代碼。如果你已經了解CSS，那麼您無需在學習Saas上花費很多精力。Saas是CSS預處理程序，可為標准CSS添加更多功能並使其更加高效。你可以使用變數，嵌套，條件語句來減少CSS的重復並提高其效率。你還可以為每個可重用組件創建單獨的Saas文件。Sass確實節省了很多時間，所以你絕對應該在2020年學習它。
6、CSS框架
學習CSS框架的普及程度不如去年，但對於不擅長設計的開發人員而言，仍然非常相關或有用。有許多流行的CSS框架可供使用，其中一些如下。
·Bootstrap是最流行的CSS框架。學習引導程序也有助於學習其他框架。
·Tailwind
CSS是其他正在流行的框架，與其他框架幾乎沒有什麼不同。它是一組實用程序類，因此您可以創建自己的按鈕和其他看起來與其他按鈕確實不同的東西。它們也是高度可定製的。
·物化
·布爾瑪
7、前端必須語言：JavaScript
學習HTML和CSS之後，接下來需要學習的是Vanilla
Javascript。對開發人員來說，掌握javascript基本知識非常重要。您將在伺服器端語言(例如PHP，Python或#)中使用大量javascript，並且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫一起使用，則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題
·JavaScript基礎知識(變數，數據類型，函數，條件等)
·DOM(文檔對象模型)
·JSON(JavaScript對象表示法)
·提取API(請求/響應/Ajax)
·如果您想轉向React，Vue，Angular或其他框架，現代JS(ES6)概念對於學習非常重要。
8、一些重要工具
Web開發中將使用一些工具。這些工具將幫助你進行調試，提高生產率，管理代碼，與其他開發人員合作以及類似的東西。讓我們討論其中一些工具。
·
Git(版本控制)和Github是您肯定會在2020年學習的最受歡迎的工具。Git在與其他開發人員協作和管理代碼方面有很多幫助。您還可以選擇其他一些選項，例如GitLab，Bitbucket和其他一些選項。
·
了解如何使用瀏覽器開發工具。無論是chrome還是firefox，您都應該知道如何使用不同的選項卡，例如元素選項卡，javascript控制台，用於請求和響應的網路選項卡，應用程序選項卡以及其他用於不同目的的選項卡。
·大多數IDE或文本編輯器都具有添加擴展名或插件的功能，這對提高生產力和構建Web應用程序非常有幫助。例如，Visual
Studio代碼中的VSCode擴展可幫助下載擴展，例如實時伺服器或實時saas編譯器以與React一起使用。
·Emmet是另一個很棒的工具，它允許您編寫非常快速的HTML和CSS，這有助於提高開發人員的生產力。
·
學習使用javascript軟體包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或庫(例如React)，那麼這些軟體包管理器將使用很多，但是對於其他語言(例如Python或Php)，您將使用不同的軟體包管理器。
·
如果要在前端安裝NPM軟體包，則必須使用Webpack或Parcel。如果要創建自己的模塊，或者要將一個javascript文件帶到另一個javascript文件，則默認情況下不能僅使用瀏覽器來執行此操作，因此需要Webpack或Parcel對其進行捆綁。
9、基本部署
此時，一旦你知道應該為前端開發學習什麼工具或技術，就需要知道如何在Internet上部署前端網站。如果你正在為小型企業構建一些小型應用程序，登錄頁面或個人站點，則無需學習AWS或DevOps，僅因為它們具有光澤和新潮。你將使事情變得更加復雜而不是簡單。你需要在2020年學習一些部署工具和步驟。
·域注冊(Namecheap，Google等)
·託管託管(InMotion，Hostgator，Bluehost等)
·靜態主機(Netlify，Github頁面)
·SSL證書。
·FTP，SFTP(文件傳輸協議)非常適合小型應用程序。
·SSH(安全外殼)，用於高級應用程序。
·CLI和Git。
到目前為止，我們討論的任何工具，技術趨勢或步驟都是前端開發的一部分。您尚不知道該框架，但可以為個人和小型企業構建網站，也可以構建適合移動設備的布局。您還可以使用到目前為止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作，那麼學習一些前端框架(如React，Vue或Angular)將是很棒的。
10、前端框架和狀態管理
框架使您可以進行更高級的前端開發。框架為您提供了許多優勢，例如可重用的組件，更有條理的UI或頁面交互。這對於協作更好，也有助於編寫簡潔的代碼。另外，了解狀態管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態管理器。
·React：React庫是最流行的Web開發學習方法，與其他框架和庫相比，它相當容易。React開發人員還有很多工作要做。您可以將Rex和
ContextAPI與Hooks一起使用以進行狀態管理。
·Vue：
Vue也越來越受歡迎，開發人員也更喜歡學習Vue。與React和Angular相比，Vue最容易學習。VueX是為視圖而構建的狀態管理器。
·Angular：此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習
TypeScript也很好。它允許您使用可選的靜態類型並支持ES2015的功能。NGRX和Services是可以學習此框架的良好狀態管理器。
可選學習：
·
如果您具有這三個框架之一的知識，那麼您還可以使用Svelte，它是一個JavaScript編譯器，可讓您生成純凈的原始JS代碼並幫助您輕松構建用戶界面。
·
了解伺服器端渲染。NextJS(React)和NuxtJS(Vue)是允許您在伺服器上運行React和Vue的框架。兩者都有很好的功能，例如更好的SEO，文件系統路由，自動代碼拆分，靜態導出，JS中的CSS和許多其他功能。
·靜態網站生成器：Gatsby(反應式)和Gridsome(Vue)
我們已經討論了所有大多數前端開發工具和技術。現在讓我們討論成為後端開發人員或全棧開發人員的語言和技術。
11、伺服器端語言(選擇一種)
您應該至少了解一種伺服器端語言。要在2020年選擇一種語言，下面提供了一些選項...
·NodeJS(不是語言，而是運行時環境)
·Python(非常適合初學者)
·Java(適合大型組織)
·Php(適合自由職業)
·Ruby(2020年少兩極)
·C#
·Go
注意：無論你喜歡學習哪種伺服器端語言，都要確保你了解使用該語言的數據結構和演算法。數據結構和演算法將幫助您為用戶呈現數據，並將幫助您優化Web應用程序中的代碼。我們特別建議您專注於使用數組和字元串(最重要)。你將同時使用這兩種方法。
12、伺服器端框架(選擇一項)
一旦學習了自己選擇的一種伺服器端語言，就可以使用其中一種語言框架。您可以選擇以下給出的選項之一...
·Node.js_Express，Koa，Adonis，Feather.js，Nest.js
·Python：Django，Flask，
·Java：SpringMVC，Grails
·PHP：Laravel，Symfony，Codeignitor，Slim
·Ruby：Sinatra上的RubyonRails
·C#：ASP.NETMVC
·Go：Revel
13、資料庫(選擇一項)
大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些資料庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決於您要為應用程序選擇哪個資料庫。我們將討論2020年一些流行的資料庫。
·關系資料庫：RDBMS仍然是最受歡迎的資料庫。最喜歡使用PostgreSQL，MySQL，MSSQL。
·NoSQL：MongoDB，RethinkDB，CouchDB
·雲資料庫：Firebase，AzureCouldDB，AWS
·輕量級和緩存：Redis，SQLlite，NeDB
在學習資料庫時，您還將學習RDBMS，ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL
：(可選)您可以了解現在流行的GraphQL。這是API的查詢語言。它具有類似於JSON的簡單語法，並且相當容易實現。
14、CMS：內容管理
您絕對應該了解內容管理系統，尤其是如果您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。
·
傳統CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enro(Javascript)
·其他CMS：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
託管全棧應用程序或後端應用程序比僅前端應用程序要復雜一些，尤其是當您擁有資料庫時。確保您知道如何使用CLI進行部署。了解有關用於部署應用程序的以下內容。
在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以了解到，如果您正在從事自己的項目。
·SSH(安全外殼)
·Web伺服器環境：NGINX，Apache
·應用程序託管：Linode，Heroku，AWS，Azure，Now。
·虛擬化：Docker，Vagrant
·測試：單元，功能，集成等
·負載平衡，監視，安全性。
以上所有技術工具都足以使您成為前端，後端或全棧開發人員。根據最終目標選擇正確的工具和技術。
以上就是小編今天為大家分享的關於成為web前端開發工程師的學習指南的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端開發工程師。
英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻譯|web前端開發(ID：web_qdkf)
3. 2021年的前端框架選擇 Angular vs React vs Vue
每個前端開發人員都聽說過三個用於構建 Web 應用程序的框架：React、Vue.js和Angular。
React 是一個 UI 庫，Angular 是一個成熟的前端框架，而 Vue.js 是一個漸進式框架。
它們幾乎可以互換使用來構建前端應用程序，但它們並非 100% 相同，因此比較它們並了解它們的差異是有意義的。
每個框架都是基於組件的，並允許快速創建 UI 功能。
然而，它們都有不同的結構和架構——所以首先，我們將研究它們的架構差異以了解它們背 後的哲學。
React 不強制執行特定的項目結構，正如您從下面的官方「Hello World」示例中看到的那樣，您只需幾行代碼即可開始使用 React。
React 可以用作 UI 庫來渲染元素，而無需強制執行特定的項目結構，這就是它不是嚴格意義上的框架的原因。
React Elements是 React 應用程序的最小構建塊。它們比 DOM 元素更強大，因為 React DOM 確保在發生變化時有效地更新它們。
組件是更大的構建塊，定義了在整個應用程序中使用的獨立且可重用的部分。它們接受稱為 props 的輸入並生成元素，然後顯示給用戶。
React 基於 JavaScript，但它主要與JSX (JavaScript XML)結合，這是一種語法擴展，允許您創建同時包含 HTML 和 JavaScript 的元素。
您使用 JSX 創建的任何內容也可以使用 React JavaScript API 創建，但大多數開發人員更喜歡 JSX，因為它更直觀。
Vue.js 核心庫只關注視圖層。之所以稱為漸進式框架，是因為您可以使用官方和第三方包（例如Vue Router或Vuex ）擴展其功能，將其轉變為實際框架。
雖然 Vue 與 MVVM（Model-View-ViewModel）模式沒有嚴格關聯，但它的設計部分受到了它的啟發。使用 Vue，您將主要在 ViewModel 層上工作，以確保以允許框架呈現最新視圖的方式處理應用程序數據。
Vue 的模板語法讓您可以創建 View 組件，並將熟悉的 HTML 與特殊指令和功能相結合。這種模板語法是首選，即使原始 JavaScript 和 JSX 也受支持。
Vue 中的組件很小，是自包含的，並且可以在整個應用程序中重復使用。帶有擴展名的單文件組件(SFC).vue包含 HTML、CSS 和 JavaScript，因此所有相關代碼都位於一個文件中。
SFC 是在 Vue.js 項目中組織代碼的推薦方式，尤其是大型項目。需要使用 Webpack 或 Browserify 等工具將 SFC 轉換為可用的 JavaScript 代碼。
在本文中，我討論的是 Angular 2，而不是現在稱為 AngularJS 的框架的第一個版本。
AngularJS，原始框架，是一個MVC（模型-視圖-控制器）框架。但是在Angular 2 中，與 MV*-patterns 沒有嚴格的關聯，因為它也是基於組件的。
Angular 中的項目被組織成模塊、組件和服務。每個 Angular 應用程序至少有一個根組件和一個根模塊。
Angular 中的每個組件都包含一個模板、一個定義應用程序邏輯的類和元數據（裝飾器）。組件的元數據告訴 Angular 在哪裡可以找到創建和呈現其視圖所需的構建塊。
Angular 模板是用 HTML 編寫的，但也可以包含帶有特殊指令的Angular 模板語法，以輸出反應性數據和呈現多個元素等。
組件使用 Angular 中的服務來委託業務邏輯任務，例如獲取數據或驗證輸入。它們是 Angular 應用程序的獨特部分。雖然 Angular 不強制使用它們，但強烈建議將應用程序構建為一組可以重用的不同服務。
Angular 內置於 TypeScript 中，因此建議使用它以獲得最無縫的體驗，但也支持純 JavaScript。
React 是最受歡迎的 JavaScript 項目之一，在 GitHub 上擁有 16 萬顆星。它由 Facebook 開發和維護，並在他們的許多項目內部使用。此外，根據BuiltWith的使用統計數據，它為超過 200 萬個網站提供支持。
在三個框架中，Vue在 GitHub上的 star 數最多，有 176k。該項目由前 Google 員工 Evan You 開發和領導。據BuiltWith 稱，這是開源社區中一個非常強大的獨立項目，被超過 100 萬個網站使用。
Angular 是由 Google 開發的，但令人驚訝的是它並沒有用於他們的一些旗艦產品，例如搜索或 Youtube。它經常用於企業項目，並基於BuiltWith的數據為超過 97,000 個網站提供支持。
它是三個框架中星數最少的，在 GitHub 上有 68k 星。然而，當從 Angular 1 切換到 Angular 2 時，他們創建了一個全新的代碼庫，而不是繼續AngularJS項目，該項目也有 59k 星。
在開發應用程序時，開源包可以為您節省寶貴的時間。不僅如此，它們通常比定製組件和封裝更好，因為它們經過了實戰測試。
查看可幫助您更輕松地創建新功能的現成組件、主題和其他工具的可用性非常重要。
許多前端應用程序依賴全局狀態管理來存儲信息，例如誰登錄和其他用戶設置。
最流行的 JavaScript 狀態管理項目是Rex。大多數開發人員使用Rex的官方 React 綁定，這些綁定由 Rex 團隊維護。
由於 React 的流行，查找輸入組件和現成的元素非常容易。它們都只是在 Google 或 GitHub 上搜索即可。
React 生態系統還包括React Native，它允許您從用 React 編寫的單個代碼庫構建原生 iOS 和 Android 應用程序。因此，React 也可以成為使用 Web 技術構建移動應用程序的絕佳選擇。
React 是 MERN 堆棧的一部分，其中包含 MongoDB、ExpressJS、React 和 NodeJS。這種組合的偉大之處在於，單一語言——JavaScript——為整個應用程序提供動力。
盡管 Rex 可以在 Vue 中使用，但沒有官方綁定。但這不應該讓您擔心，因為Vuex是專門為 Vue 應用程序製作的官方狀態管理庫。除了與 Vue 很好地集成之外，使用 Vue 的開發人員工具進行調試也很容易。
在 Vue 的早期，很難找到現成的組件。隨著社區的發展，您可以使用各種輸入組件和高級元素來加快開發速度。
對於移動應用程序開發，有一個名為Weex 的新興項目。Weex 由阿里巴巴開發和使用，但不如 React Native 成熟和強大。更重要的是，由於該項目在中國開發和使用較多，因此很難找到英文文檔和解決問題的方法。
Vue 與 Laravel 集成得很好，這就是為什麼它們經常一起使用。Laravel 提供完整的JavaScript 和 CSS 腳手架，以支持在新項目中使用 Vue。
對於 Angular 中的狀態管理，您可以使用NgRx項目。它的靈感來自 Rex，但它是專門為 Angular 創建的。
與 Vue 和 React 的情況一樣，您可以將許多現成的組件導入到您的項目中。與 Angular 略有不同的是，Angular Material項目中有許多官方組件。這是 Google 的一個官方項目，為 Angular 應用程序提供 Material Design 組件。
您可以使用NativeScript在 Angular 中構建跨平台移動應用程序。它也支持 Vue，但 Angular 支持更成熟。
Angular 是著名的 MEAN 堆棧的一部分，它將 Angular 與 MongoDB、ExpressJS 和 NodeJS 相結合。與 MERN 堆棧類似，它的前端和後端都完全依賴 JavaScript。
Angular、React 和 Vue 都可用於開發漸進式 Web 應用程序，也稱為 PWA。
PWA 不是移動應用程序，而是 Web 應用程序，智能手機用戶可以將其添加為主屏幕的快捷方式，並提供類似於原生移動應用程序的外觀和感覺。
您還可以為每個框架找到高級模板和預制應用程序，但 Angular 和 React 比 Vue 提供更多高級選項。
在選擇框架或庫時，您還需要考慮性能。
在許多情況下，您不必擔心性能，尤其是在構建小型項目時。然而，項目的范圍和復雜性越大，性能就會（並且將會）成為一個問題。
重要的是要注意，在 Web 性能方面，開發質量和遵循最佳實踐比框架的選擇更重要。
但由於存在一些性能指標和差異，我將研究它們並解釋每個指標如何影響您的開發工作。
JS 框架基準測試的結果表明，它們在大多數基準測試中都表現得相當好，例如在表中創建或附加行。
正如你在上面看到的，Vue 在選擇行時比 Angular 和 React 慢得多。另一方面，Angular 和 React 在交換行方面效率不高。
這些是渲染基準中唯一的實質性差異 - 在大多數情況下，不會產生明顯的結果。由於選擇行是比交換行更常見的功能，我想說這個基準測試將 Vue 排在第三位，僅次於 Angular 和 React 並列第一。
在內存和啟動時間方面，React 和 Vue 得分很好，但 Angular 稍慢。Angular 啟動一個基本腳本可能需要 150 毫秒，並且需要更多內存才能運行。
谷歌 Chrome 實驗室的Perf Track顯示了來自數千個網站的生產數據。這些統計數據受許多其他因素的影響，而不僅僅是選擇的框架，讓我們看看數字。
與 Angular 相比，Vue 和 React 網站在這個指標上的排名更高，Angular 需要更多時間來啟動並向用戶呈現內容。
在渲染完整頁面的三個框架中，Angular 也是最慢的，只有 27% 的 Angular 網站得分在可接受的范圍內。
對於所有三個框架，超過 80% 的網站都在第一次輸入延遲的可接受范圍內，這顯示了用戶可以與頁面交互所需的時間。
迄今為止，最輕量級的應用程序是使用 Vue 開發的應用程序，68% 的 Vue 應用程序載入的 JavaScript 不到 1MB。另一方面，Angular 和 React 應用程序往往具有更大的代碼大小。
您可以從這些數字中看到趨勢，但您不應該太快得出結論。例如，對於最後一張圖，可以解釋為 Vue 用於開發更輕量級的應用程序，而 Angular 用於更大的項目。
統計數據可以幫助指導您做出正確的決定，但您不能使用它們來證明一個框架比另一個更快或更好。
對於更高級的應用程序，使用的前端框架應該能夠執行一些提高性能並且可以更好地擴展的任務。
兩項關鍵技術是伺服器端渲染 (SSR) 和虛擬化。
React 支持使用官方ReactDOMServer包進行伺服器端渲染。對於虛擬化，您可以使用名為React Virtualized的流行第三方工具。
Vue 中也支持伺服器端渲染以及官方的SSR 包。此外，您還可以使用基於 Vue 構建並支持 SSR的Nuxt.js框架。
不幸的是，Vue 中的虛擬化選項並不是那麼強大。在我看來，Vue Virtual Scroll List是虛擬滾動的最佳解決方案，但它有點問題，不如 React 和 Angular 的選項穩定。
Angular 擁有SSR的官方Angular Universal包，以及用於虛擬滾動和高效渲染大型列表的官方組件。
學習這些框架有多容易？
要回答這個問題，我們需要查看每個框架的復雜性及其引入的概念。
在最基本的用例中，React 是三個框架中最不復雜的。那是因為你只需要導入庫，然後你就可以用幾行代碼開始編寫你的 React 應用程序。
但是除了 Hello World 示例之外，大多數 React 應用程序都是基於組件的，而不僅僅是在頁面上呈現一些元素。
一些開發人員對 React 感到奇怪或困難的一件事是，學習 JSX 是一條單行道。您也可以使用原始 JavaScript，但由於大多數 React 開發人員使用 JSX，學習它幾乎是不可避免的。
這是使 React 的學習曲線變得更陡峭的主要因素，但除此之外，對於了解 JavaScript 並理解 Web 開發概念的開發人員來說，它是一個易於學習的庫。
Vue 的設置比 React 稍微復雜一些。你可以將它用作一個庫來定義你可以在整個 HTML 中使用的組件——但與 React 類似，這不是大多數項目的構建方式。
大多數 Vue 項目都有一個命名的根組件App.vue和一些用於顯示各種內容的子組件。
說到語法，你唯一需要學習的新東西就是 Vue 的模板語法，如果你了解 HTML，這很容易掌握。基本的指令，如v-if和v-for有條件的渲染和列表的渲染，很容易理解即使是初學者。
此外，Vue 的單文件組件將所有前端代碼保存在一個地方，便於組織新項目。
在我看來，Vue 是最容易學習的，因為它的簡單和直觀的語法。
Angular 擁有三者中最復雜的項目結構，而且由於它是一個成熟的前端框架，因此它依賴的概念更多。
除了組件，Angular 還支持模塊和服務。它希望您以特定的方式編寫和設計代碼庫，從而使您的項目在擴展時更易於維護。
至於語法，由於 Angular 最適合與 TypeScript 配合使用，因此在構建 Angular 項目時了解 TypeScript 非常重要。
與 Vue 一樣，您還必須熟悉類似 HTML 的語法，以便您可以開始使用 Angular 編寫新的 UI 功能。
在我看來，Angular 對於普通開發者來說是最難學的，因為它更復雜並且依賴於 TypeScript。
許多開源項目和框架逐漸被遺忘並無人維護。您是否應該擔心我們在這里討論的任何框架？
盡管我們無法完全預測會發生什麼，但正在進行的開發工作是這些項目 健康 狀況的良好指標。人氣和增長也是預測項目壽命的重要指標，所以讓我們來看看每個框架。
React v17.0已經發布，但令人驚訝的是，它沒有為開發人員提供任何新功能。
主要的變化是這個新版本可以更容易地升級 React 本身。您可以將 React 的某些部分從舊版本升級到新版本，而無需升級整個項目。
如果您的應用程序依賴於隨新版本更改或棄用的功能，您可以保留舊版本以保持此功能有效。此更新使 React 成為一個很好的長期選擇，因為它可以更輕松地與新版本保持同步。
React 的每周 npm 下載量自去年以來增長了 44% 。從絕對數量來看，它仍然是三個項目中下載量最大的。
Vue 3 已於2020 年 9 月發布，它解決了 Vue 2 在大型項目中存在的許多嚴重問題。它引入了受React Hooks啟發的Composition API，可以更輕松地跨組件重用邏輯。
整個項目用 TypeScript 重寫，提高了新 Vue 項目對 TypeScript 的支持，同時也使項目更易於維護。
Vue 3 是一個急需的升級，使 Vue 更適合大型項目。
Vue 的每周下載量自去年以來增長了 87%，使 Vue 成為相對而言增長最快的框架。如果 Vue 能夠保持這種增長速度，那麼它肯定會很快超過 Angular。
Angular 最近推出了Ivy 編譯器。它減少了構建時間，優化了資產，允許更快的測試，並總體上改善了開發人員的體驗。
Angular 團隊每年發布兩次重大更新，其中可能包含新功能，或者只是讓框架跟上新瀏覽器版本的速度。
自去年以來，Angular 的每周下載量增長了約 50% ，因此它仍然是一個受歡迎的項目。
Angular、React 和 Vue 都處於非常活躍的開發階段。他們定期發布新版本並維護現有版本。由於在每種情況下當前的支持水平都很高，因此您可以安全地使用這些框架中的任何一個。
需要注意的是，Angular 的增長沒有以前那麼快，而 Vue—— 盡管它是最近開始的——似乎增長了很多。
如前所述，我們無法預測哪些框架會長期保持相關性，但每個項目背後都有一個偉大的社區，並且在不斷發展。
我這篇文章的目標是解釋架構差異，分解每個框架的優點和缺點，並在適用的地方進行比較。
在進入一個新框架之前，有幾件事情需要考慮。
首先，在選擇新技術時，您團隊的經驗可能是一個決定性因素。
同樣，您必須考慮您所在地區可用的人才，以便您可以為您的項目聘請開發人員。
最後，當涉及到項目本身時，復雜性和范圍也會影響您對框架的選擇。
通過考慮所有關鍵差異，我希望您可以決定哪個是最適合您的目標和需求的前端框架。
(本文由聞數起舞翻譯自Aris Pattakos的文章《Angular vs React vs Vue 2021》，轉載請註明出處，原文鏈接：https://athemes.com/guides/angular-vs-react-vs-vue/)
4. 2020年前端最火的技術是什麼
我認為最火的技術有三個：TypeScript、Vue3.0、JAMStack
原因：
1、TypeScript 是一門基於 JavaScript 基礎之上的編程語言，很多時候我們都在說它是一個 JavaScript 的超集，或者叫擴展集。所謂超集，其實就是在 JavaScript 原有的基礎之上多了一些擴展特性。多出來的呢，實際上就是一套更強大的類型系統，以及對 ECMAScript 新特性的支持。而且它最終會編譯為原始的 JavaScript。
相比較於 Flow，TypeScript 作為一門完整的編程語言，它的功能更為強大。生態也更健全、更完善。特別是對於開發工具這一塊，微軟自家的開發工具對 TypeScript 的支持都特別友好。
2、Vue 是「一個用於構建用戶應用程序的漸進式框架」。它的設計非常靈活，可以將單個 Vue 庫集成到其他項目中，也可以完全使用 Vue 構建復雜的項目。Vue 通常被視為一個易於理解和實現的框架，它支持純 HTML 模板，而 React 需要使用 JavaScript 定義來 DOM 元素。
速度更快是 Vue 目前的主要賣點之一,Vue 以其渲染速度而聞名，與其他框架一樣，Vue 使用虛擬 DOM 來渲染組件。為了加速渲染過程，必須減少虛擬 DOM 的工作負載。通過編譯時間提示、組件快速路徑、單態調用、優化 slot 生成等手段來達到提速目的。
體積小
目前，Vue 的體積已經很小了（壓縮後 20KB）。由於進行了搖樹優化（消除非重要代碼），3.0 的預計大小約為 10KB（壓縮後）。主要是移除了對 Vue 項目來說不是很重要的庫，可以通過 import 語句來使用它們，而不是把它們打包在主 src 代碼中。
可維護性
Vue 3.0 將從 Flow 轉到 TypeScript，同時又非常重視兼容性易用性，不喜歡使用 TypeScript 的用戶仍然可以使用純 JavaScript。Vue 3.0 提供了更好的模塊化，從而變得更加可定製和靈活，還提供了透明性，開發人員可以深入到源代碼中。編譯器重寫是最令人興奮的功能之一，不僅帶來了更好的 IDE 支持，而且可以創建源碼映射，如果存在運行時錯誤，它將給出錯誤對應的文件位置和行號。
面向原生
Vue 3.0 將與平台無關——它將運行純 JavaScript，並且在其主構建中不會假設使用諸如 Node.js 之類的東西。這種靈活性使構建 Web、iOS 或 Android 應用程序變得更容易。面向原生使 Vue 更像是 React 的替代品。
易用性
公開 Reactivity API——新的變更允許開發人員顯式創建反應式對象和自定義重渲染 hook。3.0 還解決了 Vue 用戶經常抱怨的一個問題：什麼時候以及為什麼要重新渲染組件？3.0 提供了一個 renderTriggered 事件，人們可以通過它查看是什麼觸發了更新。這個出色的功能將使 Vue 更加透明。
3、JAMstack是指使用JavaScript、API和Markup構建的技術堆棧，JAM是JavaScript、API和Markup的簡稱，前面第一個字母縮寫，JAMstack一種基於客戶端JavaScript，可重用API和預構建Markup的現代Web開發架構
1. 更好的性能：為什麼要在部署時生成頁面時等待頁面動態構建？當談到最小化第一個位元組的時間時，沒有什麼能比通過CDN提供的預構建文件更好。
2. 安全性更高：將伺服器端進程抽象為微服務API，可以減少攻擊的表面區域。您還可以利用專業第三方服務的專業知識。
3. 更便宜，更容易擴展：當您的部署相當於可以在任何地方提供服務的一堆文件時，擴展就是在更多地方提供這些文件的問題。CDN是完美的，通常包括擴展他們的所有計劃。
4. 更好的開發者體驗：鬆散耦合和控制分離允許更有針對性的開發和調試，並且為站點生成器擴展選擇CMS選項消除了為內容和營銷維護單獨堆棧的需要。
所以我認為最火的技術應該就是這三個。
5. 2020年入門Web前端需要學習哪些知識
今天小編要跟大家分享的文章是關於2020年入門web前端需要學習哪些知識?正准備學習web前端的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
一、HTML、CSS基礎、JavaScript語法基礎。學完基礎後，可以仿照電商網站(例如京東、小米)做首頁的布局。
二、JavaScript語法進階。包括：作用域和閉包、this和對象原型等。相信我，JS語法，永遠是面試中最重要的部分。
三、jQuery、Ajax等。jQuery沒有過時，它仍然是前端基礎的一部分。
四、ES6語法。這部分屬於JS新增的語法，面試必問。其中，關於promise、async等內容要尤其關注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面試時，有的公司不一定會問canvas，靠運氣。如果時間不夠，這部分的內容可以先不學。但如果你會，絕對屬於加分項。
七、移動Web開發、Bootstrap等。要注意移動開發中的適配和兼容性問題。
八、前端框架：Vue.js和React。這兩個框架至少要會一個。入門時，建議先學Vue.js，上手相對容易。但無論如何，同時掌握Vue和
React才是合格的前端同學。
九、Node.js。屬於加分項，如果時間不夠，可以先不學，但至少要知道node環境的配置。
十、自動化工具：構建工具Webpack、構建工具gulp、CSS預處理器Sass等。注意，Sass比Less用得多，gulp比
grunt用得多。
十一、前端綜合：HTTP協議、跨域通信、安全問題(CSRF、XSS)、瀏覽器渲染機制、非同步和單線程、頁面性能優化、防抖動(Debouncing)和節流閥(Throtting)、lazyload、前端錯誤監控、虛擬DOM等。
十二、編輯器相關。SublimeText是每個學前端的人都要用到的編輯器。另外，前端常見的IDE有兩個：WebStorm和Visual
StudioCode。WebStorm什麼都好，可就是太卡頓;VSCode就相對輕量很多。個人總結一下：用VSCode的人越來越多，用
WebStorm的人越來越少。
十三、TypeScript(簡稱TS)。ES是JS的標准，TS是JS的超集。TS屬於進階內容，建議把上面的基礎掌握之後，再學TS。
以上就是小編今天為大家分享的關於2020年入門web前端需要學習哪些知識的文章，希望本篇文章能夠對想要了解web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
6. 什麼是vue
Vue.js是一個構建數據驅動的 web 界面的漸進式框架，是一個JavaScript MVVM庫。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。
7. web前端動態網頁開發主流技術有哪些
目前主流的框架是：Vue、React、Angular三大框架。
2020年新增的開發有：小程序雲開發、react輕量級框架DvaJS和UmiJS、Vue企業級實戰項目與框架、Flutter、React-Native實戰項目。
框架詳解：
1.Angular
Angular原名angularJS誕生於2009年，之前我們都是用jquery開發，自從angular的出現讓我們有了新的選擇，它最大的特點是把後端的一些開發模式移植到前端來實現，如MVC、依賴注入等。
2.React
React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益於其創新式的VirtualDOM，性能上碾壓angularJS，一經推出，火的一塌糊塗。 特點很多，VirtualDOM、JSX、Diff演算法等，支持ES6語法，採用函數式編程，門檻稍高，但也更靈活，能讓開發具有更多可能性。
3.Vue
Vue作為最後推出的框架（2014年），借鑒了前輩angular和react的特點（如VirtualDOM、雙向數據綁定、diff演算法、響應式屬性、組件化開發等）並做了相關優化，使其使用起來更加方便，更容易上手，比較少適合初學者。
8. 2020年Web前端開發技術的趨勢有哪些
今天小編要跟大家分享的文章是關於2020年web前端開發技術的趨勢有哪些?是的，Web開發人員需要在不斷發展的環境中成長，需要適應技術的變化，跟得上和學得進去新技術。
軟體開發行業，其實與其它行業一樣，緊跟最新出現的重要趨勢和技術，避免學習不成熟或未就緒的技術也很重要。
在這里，我們總結一份清單，列出2020年以及之後主導的技術趨勢，供各位參考。
1、人工智慧
根據Gartner預測，到2022年，人工智慧市場規模將達到3.9億美元，許多公司已經將AI納入其數字化戰略中，目前亦沒有任何跡象表明它會放緩。
結合目前冠狀肺炎的情勢，我們可以創建一個移動醫療應用，給病人提供症狀檢查，供醫生咨詢並訪問病人的全部健康檔案。這里可以通過人工智慧技術(AI)與在線面對面的咨詢結合，從功能上超越傳統的在線健康應用。
還有很多企業早已經使用了AI，比如星巴克，他們在利潤，品牌和知名度都獲得了預期回報。星巴克的移動應用程序為客戶提供了個性化的體驗，而如今，他們也正在利用用戶的購買和使用數據繼續改善其用戶體驗。
星巴克的當前狀態是，單店單個CRM系統，用戶的訂單記錄只存在某個單店中，目前星巴克正在將幾千家店的訂單和用戶合並，通過用戶購買記錄生成建議內容，這些內容可以在客戶訂閱菜單上主動提供出來，最終用戶能夠取得更具個性化的建議。用戶無論身在何處，在店內、在車內還是在路上，只要通過App應用，星巴克就使用機器學習、AI來理解和估算TA的個人喜好。
所以，建議將人工智慧用在你2020的年計劃中。在實際項目中，可以將AI放在網站里，幫助你分析和理解網站訪問者的行為，甚至使用預先構建好的工具，如智能聊天機器人。
我們根據收集和分析到的數據，來調整內容，將什麼內容優先於用戶或者開始一個創新功能計劃。
2、編程語言
目前有近百種編程語言供你選擇，不用全部學習，只需要關注領導者就好。如只學習C語言的派生系，如Java、Python等，它們有更新的API和功能，能夠幫助人們更快的學習，並提高生產力。
對於AI和機器學習，以及Web開發，Python已經成為事實上的標准語言，並已經成熟多年，值得我們學習。
在前端領域，JavaScript是當之無愧的基礎，它是這個星球上開發Web應用最廣泛的編程語言，95%以上的網站都使用了JavaScript。當然，我們更要精通這門語言，需要精通NPM(Node.js
PackageManager)或Yarn，這兩個工具能夠讓JavaScript開發人員輕松分享和重用代碼，更能輕松更新代碼。
值得一提的是，Google的Golang在繼續發展。Golang是Google強力支持的一種編程語言，它可以構建網站，還可以構建游戲等，試試看，有更多驚喜等著你。
3、框架
(1)JavaScript框架
要學習一個框架，需要考慮哪些JS框架比較好?你可能會說是React或者Vue。但是React和VUE都不算是「新的」框架了，但是現在來看，這兩個框架出現了很多新「插件」和新「方法」，比如React
Hooks，它使用了TypeScript。
我們還可以找到用在靜態網站生成，或者是服務端渲染的基於React和Vue的框架：如用於React的Next.js，用於Vue上的Nuxt。
(2)CSS庫
前端工程師一直在尋找快速進行前端開發的方法。
Bulma和Tailwinds目前是加快前端設計的好方法，它們提供了很多布局和設計好的組件。
此外，還有Bootstrap庫，有很多網站和Web應用程序都用了Bootstrap，雖然它開始時有些讓人生畏，但值得深入掌握。
4、靜態網站託管
這種類型的產品，如Netlify和JAMstack，這兩家公司提供「下一代」的自動化網站託管服務，包括虛擬主機基礎架構。
JAMStack在性能上做了大量工作，開發網站速度也在進一步提升。這些新技術，新產品值得學習和借鑒。
5、單頁應用程序(SPA)
單頁應用是通過動態重寫當前頁面，而不再從伺服器端載入整個頁面，即可與用戶交互的Web應用或者網站。這種方法避免用戶在頁面間出現中斷。
SPA讓訪客不再受導航和菜單限制，並可以適配任何一種設備。
6、聊天機器人
AI和很多渠道需要聊天機器人，如客戶服務與自動化流程，特別是市場營銷和數據分析。進入到2020年，對聊天機器人的需求將越來越普遍。現在，我們看到的一些聊天機器人，虛擬助手，如Amazon的Alexa，微軟的小娜以及蘋果的Siri，以及國內廠商小米，華為等。大部分電商平台都應用了智能客服與用戶互動，即聊天機器人與真人互動，有一些企業正在研發兩個機器人之間的通信和互動。
這些技術的發展使市場觸及到數字用戶體驗，確保聊天、語音、消息通信以及Web應用之間的一致性。
絕對應該在2020年的項目中集成聊天機器和相關AI功能。
7、漸進式Web應用程序(PWA)
漸進式Web應用程序容易開發，可以贏得大部分的用戶體驗，漸進式Web應用的外觀和感受都像應用程序式的網站，這代表用戶無需下載移動app就可以訪問所有信息和功能。
目前，漸進式Web應用正在不斷吸收現代Web技術在瀏覽器中向用戶提供類似應用程序一般的體驗。目前PWA正在軟體開發領域不斷獲得發展，PWA還支持離線使用，內容可以無縫同步到多個設備。
8、WebAssembly
WebAssembly簡稱為WASM，是一種微型但快速的二進制制的Web應用程序，它可以讓Web應用程序幾乎接近於本地應用的性能。WebAssembly旨在成為任何一門編程語言編譯目標，例如JavaScript。有的開發者認為WebAssembly試圖要替代JS，但WASM實際上Js的好朋友。
在開發應用程序時可以採用WebAssembly技術，可以自由選擇合適的編程語言來開發，如游戲，音樂，視頻等。可以認為WASM
是下一代的JavaScript，它將在2020年開始流行。
以上就是小編今天為大家分享的關於2020年web前端開發技術的趨勢有哪些的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利!
作者：老夏
來源：21CTO
9. Web前端開發工程師入門必備指南
今天小編要跟大家分享的文章是關於Web前端開發工程師入門必備指南。經過如此多的試驗和測試，而不是說你從頭開始創建了所有內容，接著，你在網頁上創建了第一個登錄表單時，你感覺如何?經過了多次更改後，將布局分配給第一個Web應用程序時感覺如何?當成功處理了數千個用戶的操作時，你感覺如何？
大多數Web開發人員都經歷了上述所有階段，最初可能會對其中某些感到沮喪，但是當他們看到自己的網站正在運行並且人們在世界各地使用它時，總體感覺確實令人興奮和驚奇。Web開發人員負責許多任務，從收集需求到設計網站，處理網站的後端部分，並使其成功地為用戶服務。每年，行業中都會涌現出新技術和工具，以提高開發人員的工作效率，並為用戶提供更好的網站。對於他們來說，保持在Web開發游戲之上的挑戰變得越來越大。今天，我們將討論要在2020年成為Web開發人員的完整地圖。這將是針對所有開發人員(前端，後端和全棧)的實用指南。下面來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
1、首先確定你的目標或道路
我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發人員要做什麼，因為這將幫助你選擇合適的工具。和學習技術。成為Web開發人員的原因有很多，下面列出了一些選擇因素：
·你想作為一名Web開發人員在一家公司工作，這是最普遍的原因。
·你想以自由開發人員的身份來開始自己的業務或代理。
·你可以成為其他公司的顧問。
·你可以創建自己的應用來賺錢。
·編碼是你的業余愛好。
從上述感興趣或目標的領域，你可以選擇適用於你的目標的正確工具和技術。如果你的目標是成為一名前端開發人員，則可以選擇前端開發的工具和技術。後端和全棧開發也是如此。
2、Web開發的基本工具和軟體
·
計算機和操作系統：如果沒有計算機和操作系統，則無法編寫代碼。要學習Web開發，你不需要任何高端計算機(如果你擁有的話，那麼更好)。你可以使用任何類型的中型筆記本電腦或台式機。對於操作系統，可以使用適合你的MacOS，Windows(最新版本)或Linux。
·文本編輯器/
IDE：毫無疑問，VSCode適用於大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇，例如Sublime
Text或Atom。如果我們談論IDE，那麼是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不錯的選擇。
·
Web瀏覽器：大多數開發人員的首選是Chrome或Firefox。Chrome速度很快，並且使用V8引擎(JavaScript引擎)。Firefox也取得了長足的進步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發工具，可以對Web開發中的問題進行故障排除。
·終端：您將使用一些系統命令來使用CLI進行很多工作。您可以將默認或第三方終端用於您的Web開發項目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper這些都是可以使用的選項。
·設計(可選)：並不是每個人都需要學習。在公司中，有專門的團隊來製作圖像，徽標或草圖，但是如果您是自由職業者，則可能必須學習Adobe
XD，Photoshop，Sketch或Figma。
3、從HTML和CSS開始
HTML和CSS是Web開發的基本構建塊。無論您的Web應用程序有多先進，或者使用什麼框架和後端語言，都必須使用HTML和CSS構建前端應用程序。因此，這是在Web開發中要學習的第一件事。
·HTML5(語義元素，屬性，文檔類型等)
·CSS基礎知識顏色，字體，位置，盒子模型等。
·CSSGrid和Flexbox對齊內容或創建列。
·CSS自定義屬性
4、響應式布局
您的應用程序應該在所有類型的設備(例如智能手機，平板電腦，台式機，iPad或任何其他屏幕尺寸的設備)上都可以查看和使用。因此，了解創建響應式設計或布局非常重要。讓我們來看一些重要的主題。
·了解如何設置視口
·媒體查詢不同的屏幕尺寸。
·流體寬度
·雷姆單位
·移動優先
5、自定義可重用CSS組件
與其依賴大型的CSS框架(如Bootstrap)，不如創建自己的模塊化，可重用的CSS組件以在項目中使用。如果您構建自己的定製設計，則無需導入完整的庫。您創建只需要特定UI的組件。的新趨勢最近還出現了有助於更有效地編寫CSS代碼的代碼。如果你已經了解CSS，那麼您無需在學習Saas上花費很多精力。Saas是CSS預處理程序，可為標准CSS添加更多功能並使其更加高效。你可以使用變數，嵌套，條件語句來減少CSS的重復並提高其效率。你還可以為每個可重用組件創建單獨的Saas文件。Sass確實節省了很多時間，所以你絕對應該在2020年學習它。
6、CSS框架
學習CSS框架的普及程度不如去年，但對於不擅長設計的開發人員而言，仍然非常相關或有用。有許多流行的CSS框架可供使用，其中一些如下。
·Bootstrap是最流行的CSS框架。學習引導程序也有助於學習其他框架。
·Tailwind
CSS是其他正在流行的框架，與其他框架幾乎沒有什麼不同。它是一組實用程序類，因此您可以創建自己的按鈕和其他看起來與其他按鈕確實不同的東西。它們也是高度可定製的。
·物化
·布爾瑪
7、前端必須語言：JavaScript
學習HTML和CSS之後，接下來需要學習的是Vanilla
Javascript。對開發人員來說，掌握javascript基本知識非常重要。您將在伺服器端語言(例如PHP，Python或#)中使用大量javascript，並且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫一起使用，則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題
·JavaScript基礎知識(變數，數據類型，函數，條件等)
·DOM(文檔對象模型)
·JSON(JavaScript對象表示法)
·提取API(請求/響應/Ajax)
·如果您想轉向React，Vue，Angular或其他框架，現代JS(ES6)概念對於學習非常重要。
8、一些重要工具
Web開發中將使用一些工具。這些工具將幫助你進行調試，提高生產率，管理代碼，與其他開發人員合作以及類似的東西。讓我們討論其中一些工具。
·
Git(版本控制)和Github是您肯定會在2020年學習的最受歡迎的工具。Git在與其他開發人員協作和管理代碼方面有很多幫助。您還可以選擇其他一些選項，例如GitLab，Bitbucket和其他一些選項。
·
了解如何使用瀏覽器開發工具。無論是chrome還是firefox，您都應該知道如何使用不同的選項卡，例如元素選項卡，javascript控制台，用於請求和響應的網路選項卡，應用程序選項卡以及其他用於不同目的的選項卡。
·大多數IDE或文本編輯器都具有添加擴展名或插件的功能，這對提高生產力和構建Web應用程序非常有幫助。例如，Visual
Studio代碼中的VSCode擴展可幫助下載擴展，例如實時伺服器或實時saas編譯器以與React一起使用。
·Emmet是另一個很棒的工具，它允許您編寫非常快速的HTML和CSS，這有助於提高開發人員的生產力。
·
學習使用javascript軟體包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或庫(例如React)，那麼這些軟體包管理器將使用很多，但是對於其他語言(例如Python或Php)，您將使用不同的軟體包管理器。
·
如果要在前端安裝NPM軟體包，則必須使用Webpack或Parcel。如果要創建自己的模塊，或者要將一個javascript文件帶到另一個javascript文件，則默認情況下不能僅使用瀏覽器來執行此操作，因此需要Webpack或Parcel對其進行捆綁。
9、基本部署
此時，一旦你知道應該為前端開發學習什麼工具或技術，就需要知道如何在Internet上部署前端網站。如果你正在為小型企業構建一些小型應用程序，登錄頁面或個人站點，則無需學習AWS或DevOps，僅因為它們具有光澤和新潮。你將使事情變得更加復雜而不是簡單。你需要在2020年學習一些部署工具和步驟。
·域注冊(Namecheap，Google等)
·託管託管(InMotion，Hostgator，Bluehost等)
·靜態主機(Netlify，Github頁面)
·SSL證書。
·FTP，SFTP(文件傳輸協議)非常適合小型應用程序。
·SSH(安全外殼)，用於高級應用程序。
·CLI和Git。
到目前為止，我們討論的任何工具，技術趨勢或步驟都是前端開發的一部分。您尚不知道該框架，但可以為個人和小型企業構建網站，也可以構建適合移動設備的布局。您還可以使用到目前為止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作，那麼學習一些前端框架(如React，Vue或Angular)將是很棒的。
10、前端框架和狀態管理
框架使您可以進行更高級的前端開發。框架為您提供了許多優勢，例如可重用的組件，更有條理的UI或頁面交互。這對於協作更好，也有助於編寫簡潔的代碼。另外，了解狀態管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態管理器。
·React：React庫是最流行的Web開發學習方法，與其他框架和庫相比，它相當容易。React開發人員還有很多工作要做。您可以將Rex和
ContextAPI與Hooks一起使用以進行狀態管理。
·Vue：
Vue也越來越受歡迎，開發人員也更喜歡學習Vue。與React和Angular相比，Vue最容易學習。VueX是為視圖而構建的狀態管理器。
·Angular：此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習
TypeScript也很好。它允許您使用可選的靜態類型並支持ES2015的功能。NGRX和Services是可以學習此框架的良好狀態管理器。
可選學習：
·
如果您具有這三個框架之一的知識，那麼您還可以使用Svelte，它是一個JavaScript編譯器，可讓您生成純凈的原始JS代碼並幫助您輕松構建用戶界面。
·
了解伺服器端渲染。NextJS(React)和NuxtJS(Vue)是允許您在伺服器上運行React和Vue的框架。兩者都有很好的功能，例如更好的SEO，文件系統路由，自動代碼拆分，靜態導出，JS中的CSS和許多其他功能。
·靜態網站生成器：Gatsby(反應式)和Gridsome(Vue)
我們已經討論了所有大多數前端開發工具和技術。現在讓我們討論成為後端開發人員或全棧開發人員的語言和技術。
11、伺服器端語言(選擇一種)
您應該至少了解一種伺服器端語言。要在2020年選擇一種語言，下面提供了一些選項...
·NodeJS(不是語言，而是運行時環境)
·Python(非常適合初學者)
·Java(適合大型組織)
·Php(適合自由職業)
·Ruby(2020年少兩極)
·C#
·Go
注意：無論你喜歡學習哪種伺服器端語言，都要確保你了解使用該語言的數據結構和演算法。數據結構和演算法將幫助您為用戶呈現數據，並將幫助您優化Web應用程序中的代碼。我們特別建議您專注於使用數組和字元串(最重要)。你將同時使用這兩種方法。
12、伺服器端框架(選擇一項)
一旦學習了自己選擇的一種伺服器端語言，就可以使用其中一種語言框架。您可以選擇以下給出的選項之一...
·Node.js_Express，Koa，Adonis，Feather.js，Nest.js
·Python：Django，Flask，
·Java：SpringMVC，Grails
·PHP：Laravel，Symfony，Codeignitor，Slim
·Ruby：Sinatra上的RubyonRails
·C#：ASP.NETMVC
·Go：Revel
13、資料庫(選擇一項)
大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些資料庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決於您要為應用程序選擇哪個資料庫。我們將討論2020年一些流行的資料庫。
·關系資料庫：RDBMS仍然是最受歡迎的資料庫。最喜歡使用PostgreSQL，MySQL，MSSQL。
·NoSQL：MongoDB，RethinkDB，CouchDB
·雲資料庫：Firebase，AzureCouldDB，AWS
·輕量級和緩存：Redis，SQLlite，NeDB
在學習資料庫時，您還將學習RDBMS，ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL
：(可選)您可以了解現在流行的GraphQL。這是API的查詢語言。它具有類似於JSON的簡單語法，並且相當容易實現。
14、CMS：內容管理
您絕對應該了解內容管理系統，尤其是如果您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。
·
傳統CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enro(Javascript)
·其他CMS：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
託管全棧應用程序或後端應用程序比僅前端應用程序要復雜一些，尤其是當您擁有資料庫時。確保您知道如何使用CLI進行部署。了解有關用於部署應用程序的以下內容。
在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以了解到，如果您正在從事自己的項目。
·SSH(安全外殼)
·Web伺服器環境：NGINX，Apache
·應用程序託管：Linode，Heroku，AWS，Azure，Now。
·虛擬化：Docker，Vagrant
·測試：單元，功能，集成等
·負載平衡，監視，安全性。
以上就是小編今天為大家分享的關於Web前端開發工程師入門必備指南。以上所有技術工具都足以使您成為前端，後端或全棧開發人員。根據最終目標選擇正確的工具和技術。想要了解更多Web前端相關知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師！
英文|#/how-to-become-a-Web-developer-in-2020-a-complete-guide/翻譯|Web前端開發(ID：Web_qdkf)
10. 現在前端框架什麼最火
第一階段：庫/框架選型 前端工程建設的第一項任務就是根據項目特徵進行技術選型。 基本上現在沒有人完全從0開始做網站，哪怕是政府項目用個jquery都很正常吧，React/Angularjs等框架橫空出世，解放了不少生產力，合理的技術選型可以為項目節省許...