當前位置:首頁 » 網頁前端 » pwa前端黑科技
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

pwa前端黑科技

發布時間: 2023-02-18 02:11:48

1. 快畢業了,很多人都不推薦做前端,前端業內最真實情況是什麼樣的

一、從個人發展角度——前端是個比較「難積累經驗」的領域

如何判斷一個行業對個人發展是否有利?

最簡單的就是從身邊的人做對比,隨著時間的積累,個人發展能否得到提升,讓我覺得不安的是,一個工作了五年的騰訊前端工程師,跟工作兩年的前端工程師,卻很難有技術能力上的差異。

前端變化快,新技術新概念多,但也代表前端技術不穩定。這也是為什麼知乎上的前端普遍都很「焦慮」。每次問及前端,都必須聲明自己碾壓活在底層的「切圖仔」。

二、行業壁壘——對於普通人來說,前端天花板不高

很多人說現在的前端已經模塊化,工具化,規范化了,有Webpack、Parcel、Eslint、React、Vue、Angular、PWA、Puppeteer、Electron各種技術等等,前端已經是一個非常工程化的東西了,區別於用jQuery的切圖仔了!所以前端特別有競爭力!還有其他答主說前端入門很難,高級就不容易了!

其實前端還是一個相對比較新的行業,互聯網發展早期(1995年~2005年)是沒有專業的前端工程師的。隨著互聯網的發展,到了2010年,互聯網開始全面進入移動時代,前端工程師的地位越來越重要。而前端的前景也十分的好。

前端薪資:有越來越高的趨勢

前端開發依舊是剛需,所以你想要做web前端,是完全可以的,以上的回答給你參考

2. 前端和後端的區別是什麼

前端開發主要做的是用戶所能看到的前端展示界面;後端開發主要做的是邏輯功能等模塊。其實主要區別體現在以下兩個方面:知識結構與實現和工作職責。

1、知識結構

(1)展示的方式不同

前端指的是用戶可見的界面,網站前端頁面也就是網頁的頁面開發,比如網頁上的特效、布局、圖片、視頻,音頻等內容。前端的工作內容就是將美工設計的效果圖的設計成瀏覽器可以運行的網頁,並配合後端做網頁的數據顯示和交互等可視方面的工作內容。

後端是指用戶看不見的東西,通常是與前端工程師進行數據交互及網站數據的保存和讀取,相對來說後端涉及到的邏輯代碼比前端要多的多,後端考慮的是底層業務邏輯的實現,平台的穩定性與性能等。

(2)所用的技術、技能與工具不同

前端開發,就是要創造上面提到的網站面向用戶的部分背後的代碼,並通過建立框架,構建沉浸性的用戶體驗。為了實現這個目標,開發需要熟練運用下列語言、框架、工具庫:

後端開發者使用這些工具編寫干凈、可移植、具有良好文檔支持的代碼來創建或更新Web應用。但在寫代碼之前,他們需要與客戶溝通,了解其實際需求並轉化為技術目標,制定最有效且精簡的方案來進行實現。

(3)所用技術不同

前端開發用到的技術包括但不限於html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack,AngularJs,ReactJs,VueJs等技術。

後端開發 以java為例 主要用到的 是包括但不限於Struts spring springmvc Hibernate Http協議 Servlet Tomcat伺服器等技術。

2、工作職責

前端工程師主要的工作職責分為三大部分,分別是傳統的Web前端開發,移動端開發和大數據呈現端開發。Web前端開發主要針對的是PC端開發任務;

移動端開發則包括Android開發、iOS開發和各種小程序開發,在移動互聯網迅速發展的帶動下,移動端的開發任務量是比較大的,隨著5G標準的落地,未來移動端的開發任務將得到進一步的拓展;大數據呈現則主要是基於已有的平台完成最終分析結果的呈現,呈現方式通常也有多種選擇,比如大屏展示等。

後端工程師的主要職責也集中在三大部分,分別是平台設計、介面設計和功能實現。平台設計主要是搭建後端的支撐服務容器;介面設計主要針對於不同行業進行相應的功能介面設計,通常一個平台有多套介面,就像衛星導航平台設有民用和軍用兩套介面一樣;功能實現則是完成具體的業務邏輯實現。

(2)pwa前端黑科技擴展閱讀

前端和後端的應用范圍

1、PC (Personal Computer) 即個人電腦。

目前電腦端仍是前端一個主要的領域,主要分為面向大眾的各類網站,如新聞媒體、社交、電商、論壇等和面向管理員的各種 CMS (內容管理系統)和其它的後台管理系統。

2、Web App 是指使用 Web 開發技術,實現的有較好用戶體驗的 Web 應用程序。

它是運行在手機和桌面端瀏覽中,隨著移動端網路速度的提升,Web App 為我們提供了很大的便利。此外近兩年 Google 提出了一種新的 Web App 形態,即 PWA(漸進增強 Web APP) 。

3、WeChat (微信) 這個平台,擁有大量的用戶群體,因此它也是我們前端開發另一個重要的領域。微信的公眾號與訂閱號為市場營銷和自媒體從業者,打造了一個新的天地。

4、Hybrid App (混合應用) 是指介於 Web App、原生 App (主要是 Android 或 iOS )之間的 App,它兼具原生 App 良好用戶交互體驗的優勢和 Web App 跨平台開發的優勢。

5、Game(游戲),HTML5 游戲從 2014 年 Egret 引擎開發的神經貓引爆朋友圈之後,就開始一發不可收拾。不過現在游戲開發變得越來越復雜,需要製作各種炫麗炫麗的效果,還要製作各炫麗於 2D 或者 3D 的場景。

6、Desktop桌面應用軟體,就是我們日常生活中電腦中安裝的各類軟體。早期要開發桌面應用程序,就需要有專門的語言 UI (界面) 庫支持,如 C++ 中的 Qt 庫、MFC 庫,Java 的 Swing、Python 的 PyQT 等,否則語言是沒辦法進行快速界面開發。

7、Server Node.js 一發布,立刻在前端工程師中引起了軒然大波,前端工程師們幾乎立刻對這一項技術表露出了相當大的熱情和期待。看到 Node.js 這個名字,初學者可能會誤以為這是一個 Java 應用,事實上,Node.js 採用 C++ 語言編寫而成,是一個 Java 的運行環境。

3. web前端主要做的是什麼工作

Web前端可以做的工作,可以分為以下幾點:


1、Web前端是什麼意思

Web前端是網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶所瀏覽的網頁。

用我們的話來說,前端就是網頁給訪問網站的人看的內容和頁面,Web前端開發意思就是這些內容的製作,也就是代碼的實現。

Web 前端開發三大技術 html,css,js

還運用大量的 js 庫,可以將前端的交互效果做得更加炫酷,除了基本語言,還要掌握各種開發工具的應用。Dreamweaver:,Sublime,HBuilder等都是比較熱門的工具。


前端開發需要掌握的能力很多,知識范圍很廣,要付出的代價很多。不過,前端的前途也是相當光明的,前端現在正在走向工程化發展,無論權是大小公司企業,對前端開發的需求都是越來越大了,也越來越專業了。


3、朗沃教育Web前端課程做什麼


Web 前端除了最基本的 html,css,js 還有大量的技術內容,也會運用到一定的框架,而朗沃教育的 WEB 前端開發一般會學到這些內容。

  • HTML/CSS 基礎和高級

  • JavaScript 基礎語法和高級應用

  • Node 服務端開發

  • Web前端框架開發(React 技術棧,Vue 技術棧)

  • 移動端開發(React Native,跨端開發框架之微信小程序開發,Flutter,PWA 等)

  • 前端運維(Docker 與 Linux 基本操作等)

詳細課程請瀏覽朗沃教育Web前端課程。


WEB前端是什麼?零基礎可以學嗎?初期階段只是了解一些Web前端基礎內容,後面會涉及到一些Web前端交互的內容,再涉及到伺服器的一些知識,最後再學習Web前端的三大框架,再加上一些前端項目。

4. Web前端開發的核心技術有哪些

1.開發語言

HTML發展歷史有二十多年,歷經多次版本更新,HTML5和CSS3的出現又是一次革新,有些人認為前端開發要掌握的技能簡單,不就是製作網頁 嘛,其實不然,web前端需要掌握的核心語言xHTML+CSS+Java,Java作為最難的語言之一,許多編程高手也不敢妄 自菲薄自封精通。由於Java與html的差異性,以及靜動態分開處理的一些好處。在大公司編寫靜態效果和動態效果往往是分開由不同的人完成 的。小公司因為需要壓縮成本,就要求每個人會的越多越好,如果您想往項目經理發展,能懂一兩門**語言,絕對是錦上添花!

2.瀏覽器兼容性

互聯網目前主流瀏覽器有IE6789,Firefox,Chrome,Opera,Safari,遨遊,包括國內主流的搜狗,騰訊 TT,360,the World等等;從內核上講主要有IE的,遨遊版IE,safari,firefox以及opera的,這些都是大家常見的,如果你身邊有老網蟲喜歡收藏 瀏覽器,你翻翻他的硬碟,相信幾十款肯定是有的(或查看前端社區中的瀏覽器大全)。每種內核對代碼的解析是不完全一樣的,即使同樣內核也可能存在很大差異,如IE和遨遊版的IE。不說非主流的瀏覽器,就主流的瀏覽器要做到完全兼容,也並非易事,需要長時間的積累和測試,需要前端開發工程師對前端開發的熱愛和激情。

目前移動互聯網的發展趨勢也不容小覷,將慢慢占據互聯網的主要份額。移動互聯網最突出的好處是方便和及時,試想一下,走在某地風景很好,拍下來後自 動分享給各路好友,因此手機上的瀏覽器兼容也看刻不容緩,現在手機上的瀏覽器也是紛繁復雜,主流的UCWEB,safari,IE,3G門戶的,以及 symbian低端機的「殘缺兒童」,包括國外流行手機我們不知道的一些瀏覽器,更糟糕的是這些瀏覽器解析因為手機硬體的不同,每個瀏覽器得到的結果都是 完全不同的。

3.hack技術

由於不同的瀏覽器對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,這個時候就需要針對不同的瀏覽器寫不同的CSS,這個過程叫CSS hack。雖然我們寫代碼都要求按照標准,不寫hack代碼,但實際工作中為了兼容主流瀏覽器,hack代碼是免不了的,所以這也應該是每個前端開發人員 必備的技能。

4.業內標准

目前Web前端開發中提到最多的就是W3C標准,這是一系列標準的集合,代表了互聯網發展的方向,也代表了前端開發的一種信仰。寫的代碼都要100%通過標准驗證,為通過標准驗證而感到自豪,會有效推動互聯網的快速發展。

5.開發工具

目前比較流行的是Dreamweaver, 其曾經風靡一時,到現在也沒有退出歷史舞台,證明DW還是有很大優勢的,尤其是針對初學者,其強大的提示功能可以幫助我們很快的熟悉並掌握網頁布局,但現 在更提倡的是純手寫代碼,既體現技能方面的卓越,也可有效避免使用DW等工具產生的冗餘代碼。

5. 前端黑科技之PWA

PWA(Progressive Web App),即漸進式web應用,這種應用可以像常規網頁一樣載入,它採用了本地應用程序的外殼,不需要下載就可安裝再用戶的主屏幕上,大大減少內存的負擔,給予用戶良好的交互體驗。

PWA包含的核心功能及特性有:

1、Web App Manifest

2、Service Worker

3、Cache API 緩存

4、Push&Notification 推送與通知

5、Background Sync 後台同步

6、響應式設計

PWA的優勢:

1、無需安裝與下載,只需要輸入網址就可以可以將app的快捷方式放置桌面,全屏運行,與原生app無異

2、能夠在各種網路環境下使用,即使網路很差或者斷網的情況下,也不會顯示undefind

3、具有推送消息的能力

4、本質上是一個網頁,沒有app的各種啟動條件,能夠快速響應用戶指令

PWA存在的問題:

1、目前階段支持率不高,瀏覽器對技術支持還不夠全面,各大廠商還未明確支持PWA

2、依賴的GCM服務在國內無法使用

3、微信小程序的競爭

6. pwa的出現會對移動端原生開發造成什麼影響

結論是毫無影響。

原因分析

  1. PWA 其實是在普通的移動 Web App 上加持很多新的 Web 技術以期望達到 Native App 的體驗。

  2. 雖然國內 Android 設備佔大頭,但是國產手機廠商多多少少都修改過系統內核,大多數 Android 手機都沒有原生的 Chrome 瀏覽器。而國產的手機瀏覽器恐怕對支持 PWA 興趣不大,畢竟把自己的 KPI 和用戶日活時間提高比較重要。

  3. PWA的系列特性和要求,決定了這是只能在Google的光環下進行探索的無線端體驗增強技術,國內環境目前來講,要在生產環境實踐的話還頗為困難。其實PWA涉及的技術對於前端工程師來講並不陌生,比如ServiceWorker等。

7. 現在前端發展怎麼樣

在React和Vue等框架出現後,前端在代碼開發方面的復雜度已經基本得到解決,再加上Node解決前後端分離,前端技術棧本身其實已經非常成熟。因此業內人士普遍認為,未來幾年前端本身的開發技術應該不會有大的方向變化,但是將會呈現出四大發展趨勢:
第一個趨勢:入口應用會小程序化。
類似騰訊、阿里、滴滴、美團這樣作為入口的應用,會自己做自己的一套小程序體系,在自己的app內通行。這里的意思不是說大家都會去用微信小程序,而是會效仿微信小程序這套體系,搬到自己的app內。
主要原因是,這些入口應用容納自己公司各類業務線,已經臃腫不堪,使用原生開發迭代效率跟不上,使用HTML又難以做到高性能,因此使用類似小程序的方案,可以做到暢享HTML多年來積累的開發模式,同時裁撤大量平時用不到的API,降低渲染頁面的復雜度。這個趨勢會涉及到移動端開發。
第二個趨勢:Web前後端融合為全棧開發。
Node.js已經給前端開發很好地開了個頭,這個頭就是讓前端人員了解HTTP協議的細節,了解常規的API開發。我相信很多人已經看明白了,為什麼我們要做前後端分離,這裡面主要原因除了代碼開發部署上的分離,還有一部分是讓不懂HTTP協議的人不要在介面層瞎鼓搗,因為這裡面細節太多了,你都不了解HTTP緩存,你怎麼知道哪個API的HTTP header應該用什麼呢?
因此了解HTTP協議的前端,會慢慢吃掉這部分後端開發的任務,而了解HTTP協議的後端,也會因為三大框架開發模式的成熟而學會前端開發。進而,這兩類人演化為全棧開發。
第三個趨勢:營銷類頁面小程序化。
這個指的就是大家平時在微信里看到的各類營銷網頁,因為主要入口在微信,因此變成微信小程序。這個大家比較好理解吧,就不多說了。小程序現在可能BUG多,功能跟不上,但是要替代這類網頁可能也就是2年不到的時間。
第四個趨勢:PWA、WASM代表的HTML內的技術改進。
這個能影響到的范圍看起來很大,但其實場景比較有限,主要是排除掉上面說的1和3之外的空間。空間就在於這兩大技術目前都沒有成熟的最佳實踐,還需要探索。

8. 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選項消除了為內容和營銷維護單獨堆棧的需要。

所以我認為最火的技術應該就是這三個。

9. 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/)