2021年前端技術趨勢洞察

(欒硯強&Jet Ding)

1???前端技術歷史：從簡陋頁面到大前端

前端技術在傳統意義上指HTML、CSS、JavaScript等一組用來滿足Web頁面展示的編程技術。1995年Brendan Eich用了不到10天就創建了JavaScript，那時JavaScript的設計并非以速度見長，基本上只用于驗證表單，速度非常緩慢。彼時的頁面不僅粗糙簡陋，而且除了進行超鏈接跳轉，沒有辦法實現任何交互。

從那時起直到2005年微軟贏得了第一次瀏覽器戰爭，前端技術才逐步有了語言規范（ECMA-262 JavaScript規范、W3C的HTML與CSS規范）。2005年到2009年，Sam Stephenson的Prototype庫為JavaScript增加了面對對象的繼承能力，基于Ajax特性的動態頁面開發得以普及。2009年到2012年jQuery出現并被廣泛采用，基于jQuery帶來的鏈式操作讓前后端開發得以解耦。兼容jQuery的zepto.js在移動端廣泛使用，前端進入移動互聯網開發時代，Web頁面開始向Web App進化，前端項目復雜程度較之前大幅度增大，使得模塊化日益重要。2012年到2016年是模塊化標準之爭的混戰時期，從RequireJS開始到AMD基本完成了統一。模塊標準統一后的JavaScript具有豐富的開發工具鏈，大規模復雜項目大量涌現，NodeJS服務端技術使得JavaScript全棧能力迅速完善，前端技術形成了完整技術體系。2016年后的前端技術體系的發展較之前顯著加速，開發框架方面形成了React，Vue和Angular三大生態，React Native和Flutter融合了前端技術和客戶端技術，客戶端技術也積極向前端靠攏，Webview以及JavaScript引擎的不斷優化改進。小程序即是技術融合的產物。

由于客戶端技術與傳統Web技術的融合，前端技術的有了更廣泛的內涵。業界常常以“大前端”最為客戶端技術和Web技術的融合技術。大前端本身即是當今前端技術趨勢的重要方面之一。

本文的內容以大前端作為考察的范圍。傳統前端技術在本文中以Web前端技術指代。

2????當今最具商業化價值的前端技術趨勢

現在的前端技術早已不再拘泥于滿足頁面展示，而是延展到全棧來閉環產品。

最近一年以來，全球智能協同辦公領域需求暴漲，音視頻解決方案飛速發展。在音視頻技術方面，前端技術憑借WebRTC、WebAssembly等技術而大顯身手。在跨平臺開發方面，前端技術具有天然的優勢，這使得產品能夠一次開發，在PC、Web、移動端、IoT產品、汽車產品的多種終端完成產品閉環。軟件工程效率方面，前端DevOps技術持續發展，Webpack等工具鏈持續完善。 在軟件工程能力方面，云原生技術體系，特別是Serverless技術，賦能前端技術，真正實現前端工程團隊的全棧開發模式。在產品化方面，低代碼技術是最為引人注目的解決方案。 例如微軟公司的第四朵智能云Power Platform,?通過“無代碼”和“低代碼”的簡單方式，讓用戶輕松地自定義構建業務應用程序。以低成本的軟件解決方案實現了商業數據分析產品的核心產品價值。

這些表明：前端技術體系已經有能力透過業務深入產業，繼而影響商業結果。

接下來，本文將先盤點以下2021年最具商業價值的前端技術趨勢：

·?????????WebAssembly技術生態

·?????????WebRTC與互動音視頻

·?????????前端DevOps工程效能

·?????????低代碼/無代碼平臺賦能運營

2.1?WebAssembly技術生態

長期以來JavaScript一直是Web技術的中堅力量。 如今又出現了一個新的挑戰者，WebAssembly?—— 簡稱WASM。?WebAssembly源于Mozilla發起的Asm.js項目，其本解碼速度比JS解析快得多，讓高性能的Web應用在瀏覽器上運行成為可能。它可在瀏覽器中的專有虛擬機上執行，與JavaScript虛擬機共享內存和線程等資源。現在主流瀏覽器基本都支持了WebAssembly。

WebAssembly的出現為Web開發者打開了一扇新的大門。開發者將能夠使用更多的編程語言來創建Web應用程序：C,C++,Go，Java，Python，PHP，以及近年來最火熱的Rust語言。目前國內外越來越多的團隊已將WASM付諸了業務實踐。 例如：騰訊IMWeb團隊將ffmpeg編譯為WASM版本在瀏覽器中運行。過去隔絕在瀏覽器底層的音視頻編解碼能力得到徹底解放。前端頁面中實現對音視頻流直接進行處理，在完全不依賴服務端的情況下，便捷高效的實現了視頻播放幀預覽與視頻幀截圖等功能。

另一最為重要的特性是WebAssembly?的沙箱功能。當程序編譯成?WASM?模塊再加載到運行引擎中時，這些代碼運行在一個私有的沙箱中。沙箱中的程序不能訪問沙箱以外的地址空間，否則將被運行引擎終止并返回異常。同時?WASM?程序調用?API?訪問系統資源時也會受到運行引擎的監管。這樣的沙箱功能可以在許多場景下提供傳統的原生編譯程序無法支持的功能。

WASM沙箱可帶來的極具價值的特性：

·?????????安全的運行地第三方代碼：沙箱提供可信運行環境。在云端和邊緣側非常有意義，為瀏覽器提供了類似于現代容器技術如?Docker?的核心價值之一。

·?????????跨平臺模塊分發：?作為W3C?定義的字節文件標準格式，WASM天然具有良好的兼容性。軟件模塊可以WASM作為媒介格式分發。例如C++語言開發的圖像識別算法代碼庫，可以編譯為WASM?模塊的方式發布。其他人通過集成?WAMR?這樣的引擎就可以在不同架構、不同平臺、不同環境調用這個算法，比如在云端容器、可信執行環節（TEE）、物聯網設備上都可以調用。

·?????????超輕量級：充分考慮了網絡環境，WASM字節碼的設計相當精簡。通過開發階段的編譯不再需要對下載程序進行文本解析。實例的對象與內存模型也較為簡單。這些特點使?WASM?模塊可以非?？斓赝瓿杉虞d進入執行狀態，創建一個執行實例只需要很少量的資源。

·?????????高性能：WASM字節碼的設計充分考慮了即時編譯JIT，不僅可以達到很快的編譯速度，還可以獲得很高的運行速度。

·?????????動態模塊加載：在小設備上尤其有用，過去固件必須統一編譯、統一更新，如今通過固件中的模塊化可被靈活地加載。

·?????????重用海量?C/C++?庫資源： 過去從JS、Java等語言的程序中調用C/C++?的功能，只能使用各種語言自身的綁定接口，例如JNI技術?，F在，第三方?C/C++?庫源程序直接編譯成?WASM?模塊，然后通過先綁定?WAMR引擎來，不再需要 通過JNI?去一一綁定?C/C++?庫中的所需函數。

2.2?WebRTC互動音視頻

隨著網速不斷提高和音視頻技術的發展，音視頻技術類的產品相繼面世，例如直播和短視頻。移動網絡進入5G時代，帶來了超高帶寬和超低時延，在移動環境中的音視頻的基礎設施大大增強。

從音視頻技術過往的發展來看，已經基本解決的難點有：1.??視頻壓縮率的問題（通過H264/H265、VP8/VP9以及AV1編解碼器）；2.?網絡帶寬的問題 （通過5G、WiFi-6等的發展）。這兩個問題解決后，各行各業都開始使用音視頻技術來實現更佳的用戶體驗，比如：音視頻會議、直播帶貨、在線教育、遠程醫療、娛樂游戲等等。2020年由于疫情的影響，視頻會議、遠程辦公、智能協同類型的產品更是呈現井噴式發展，各家都在比拼著推出更快、更便宜、更智能的產品。這里我們把他們看做是高層服務的音視頻技術。

用于高層服務的音視頻技術大致有兩個體系:?一類是RTC（real time communication），它不僅包括媒體處理，還具有信令控制、網絡管控、會議管控的協議，主要用于滿足多人會議中的低延時互動；另一類是由流媒體技術發展演進而來，主要有?HLS?和?RTMP/HTTP-FLV?兩個協議，主要用于滿足于對低延時要求不高，但并發量要求很高的低成本場景。

對于前端技術體系而言，WebRTC使得低時延音視頻互動的開發變得非常容易，而且絕大多數瀏覽器，包括桌面端和移動端，都提供了統一和完整的API支持。因此WebRTC技術體系的熱度遠高于HLS等流媒體技術。

另外，端側音視頻處理還圍繞更智能，諸如人臉識別、美顏、降噪、超分等處理優化來展開,?行業中也有更多的實踐落地，從后端到前端都在探索更為極致的體驗。

Chrome、Firefox、蘋果Safari等主流瀏覽器都已加入對WebRTC支持。各個云服務廠商，包括騰訊云、阿里云、網易云、七牛云以及諸如專門音視頻服務商（聲網和即構科技等等），都將WebRTC納入瀏覽器實時音視頻首選方案。

值得注意的是，各大云廠商為會議協同功能提供了廣泛開放性的解決方案，并且開發成本開發極低。例如：阿里云最近新推出了互動白板解決方案的外測，提供在線繪制涂鴉、標注、標注、媒體共享、路放、轉碼等功能。另外，聲網agora.io提供基于WebRTC體系的會議協作云API，“四行代碼，30分鐘，在應用內構建語音通話、視頻通話、互動直播、實施消息”。阿里云最近新推出了互動白板解決方案的外測，提供在線繪制涂鴉、標注、標注、媒體共享、路放、轉碼等功能。令前端的互動體驗更加生動。

由于API的成熟穩定，熟悉前端編程語言的工程師進入視頻功能開發領域的門檻大幅度降低。下圖是對前端開發者所需要開發互通音視頻的知識圖譜，掌握這些足以完成功能開發。WebRTC標準對音視頻具有完備的信令服務、網絡管理、會議控制、媒體管理等能力。在安卓系統、iOS系統、桌面系統上，云廠商都提供相應SDK。

可以看到，WebRTC在云和端的技術體系都已近相當完整。接下來將是應用更快迭代、更好體驗的競爭。

2.3?前端DevOps工程效能

相比前面提到的兩個趨勢，DevOps內涵更加豐富，不僅是單一的技術，而是框架、工具鏈、方法論、項目管理、組織方法的綜合運用。

前端DevOps為研發效率賦能。 當下各大科技公司軟件工程都在重點投入研發力量持續完善。開發運維一體化流程，CI/CD流程的串聯，幫助業務提升研發效能。下圖是騰訊公司的前端DevOps流水線設計。

前端相關的DevOps需要為Node為中心的服務器開發體系進行設計，在當下，云原生的發展大勢情況下，Node服務上云的相關容器技術是DevOps的重點領域。

低代碼/無代碼平臺

從2014年Forrester的研究報告提出“low-code”一詞到今天，低代碼領域持續升溫。從低代碼領域的行業角度看，2017年后，微軟、甲骨文等各大廠家紛紛加入了低代碼賽道的競爭。近年來，獲得3.6億美元融資的Outsystems更是成為低代碼領域海外市場的一只獨角獸。國內方面，也不乏阿里的云鳳蝶、點石、iVX、輕流、積木等平臺的誕生，低代碼產品領域的蓬勃發展，正成為特定場景軟件開發的重要趨勢。

簡單而言，“低代碼”和“無代碼”平臺的商業理念是“賦能全民開發”。對現在趨勢中所說的“低代碼”和“無代碼”，一般認為的區別在于：

無代碼：自己編程給自己用，給用戶的感覺就是一個軟件。因此，平臺不會給自己定位成一個“編程工具”。主要是通過圖形化的操作來降低學習曲線，類似PPT、Excel等。在垂直領域的特定場景中，才能做到好用。

低代碼：編程給其他人用，通過降低專業難度，讓運營人員也參與進來。平臺評估好預制的場景和需求，減少從頭寫代碼的成本，一定程度上可以通過圖形化的方式滿足業務訴求。

這類平臺產品的價值點在于大幅度降低業務交付的成本。 在技術實現方面，可基于目前可視化和模型驅動理念，結合當下大前端跨端體驗的融合技術以及云原生的支持?？梢暬罱ㄈネ瓿蓸I務可以讓產品和運營人員參與進來，可以極大地釋放軟件開發者的人力瓶頸，也進一步促進了技術和業務的深度合作。

微軟公司的Power Platform就是這樣一個平臺。目前Power Platform包括三個產品：

Power BI：商業數據分析，

Power Apps：APP開發，

Power Automate：辦公流程自動化，

騰訊公司的Vision低代碼平臺是為運營場景優化的，賦能運營人員。Vision生成的代碼兼容React，Vue.js，?JQuery?等不同技術棧，實現了PC、H5、微信小程序的可視化運營的頁面搭建。

為了滿足復雜交互的運營需求，Vision也提供可視化搭建引擎Gems，支持復雜的管理頁面，支持數據接口的可視化搭建與生成。

預計2021年低代碼大前端繼續迅猛發展。從早期的通過模塊化搭建解決營銷活動領域的問題，轉向突破解決內部復雜的中后臺業務需求，既適用于面向C側用戶的產品運營，也貼合B側用戶的數據管理需求。

3???前端編程語言趨勢

目前用的比較多的編程語言有HTM, CSS及其擴展, JavaScript, TypeScript, Kotlin, Java, Dart, C#, Swift, C++等等。

編程語言五花八門，愛好者各有各的原因，在前端也存在一樣的情況，我們不一定非得推崇什么樣的編程語言，但我們在開發的時候一定要選取讓自己感覺最舒服的編程語言。

語言本來無所謂好與壞，這是對應你的場景，參考如下的因素需要有個取舍:?我們當前團隊會這種語言的人有多少？這門語編程語言好不好學??這本語文的替代編程語言，是不是更好？有沒有另外一種編程語言比當前的編程語言寫出更簡潔的代碼來？有沒有別的編程語言比當前的編程語言開發效率更高?

3.1?Web開發三駕馬車: HTML, CSS, Javascript

跟傳統的網絡頁面技術開發一樣，現代的前端技術開發也同樣需要HTML, CSS, Javascript這三駕馬車。當然，結合具體的框架及其版本，他們又有很多的擴展。

像HTML可以使用新的一些Tag特性，自定義的Directives，?如Video, Audio等等；

像CSS有很多的擴展，如SASS, SCSS, LESS等等，?如Variables，?Mixins，Extends等等；

JavaScript自身的新版本特性，以及TypeScript的引入，TypeScript是JavaScrit的超集，它的出現使得前端開發的代碼更加規范和整潔。

這三個技術各有其側重點，比如說HTML主要是聚焦于頁面的內容管理，CSS主要聚焦于頁面的樣式管理，比如顏色，寬度等等，JavaScript與TypeScript主要用于處理業務的邏輯，頁面交互等等。

4???開發框架的趨勢

4.1?頁面組件化

在目前眾多的前端開發技術中，有共識的有這么一個技術點，就是組件化。組件化可以減少程序模塊之間的耦合度。同時也可以增強代碼的重用性，從而提高代碼的可維護性。

組件化理念運的一個表現就是單頁應用程序框架，我們可以把一個完整的網站理解成就是一個組件頁面。

在這個頁面中，你可以有很多個區域，每個區域當中又有很多的子區域，這樣一層一層的分下去，就是在一個大的頁面框架中，包含了很多的子組件，然后子組件又有下一層的組件，以此類推下去。通過這樣的劃分，就把頁面領域化，組件化了，從而達到便于管理和重用的目的。

4.2?單頁面路由和NextJS

在單頁應用框架出現之前，頁面路由的管理是由服務端來處理的。 從A頁跳到B頁，在服務器端對應的是不同路徑和調用函數，每個函數可能會去調用對應的模板內容。這種處理方式存在如下的幾個缺點，一是增加了服務器端程序設計的復雜度，另外一個是造成客戶端不好的用戶體驗，主要是頁面反應慢。

在單頁應用框架中就不存在這樣的問題，因為頁面路由管理全部由前端來承擔了。這使得路由部分切換是在前端，也就是客戶這一邊來完成的，從而提高了頁面的響應速度。

NextJS是當今最受歡迎的路由管理框架。路由管理部分的技術大同小異，不存在太大的差距。所以不用太擔心，你用什么樣的前端技術。

4.3?數據流管理的優劣

前后端分離以后，在數據流管理部分有很大的一個比例由前端來承擔了。在前端技術的數據流管理中，一般認為有兩種大的方向，一種是單向流的管理方式，另外一種是雙向流的管理方式。所謂單向流，就是說你取得的數據只能讀不能寫，而雙向流管理，是對一個數據，既能讀又能寫。

那么有人就問了，對于單向流的數據我們是如何進行修改的呢，這就牽扯到設計模式flux和Redux，?Redux是Flux的變種，?Redux是在React中比較流行的數據處理模式，Flux是Vue中常用的數據處理模式，他們對應的關鍵字稍有不同，但大致相近：比如reducer, mutation, getter, effect, action等等。

在新的React版本中出現了Hooks技術，使得React數據流的管理多了一種選擇。

Angular可以通NgRX來使用Redux技術，實現單一數據流的管理模式，同時Angular還可以通過Input/Output方式來管理數據，除此之外Angular還支持依賴注入，這樣你可以通過Service來管理數據。這就避免了單一數據流中的多重環節造成的代碼冗余問題，極大地提高了項目管理的可控性。

4.4?業界主流的開發框架

4.4.1?AngularJS

最早的版本發布于2010年10月，最近的版本發布于2020年10月。這門技術在2021年12月31日之后，?Google會停止修復安全問題，瀏覽器兼容性問題，等等的支持。

迄今為止，AngularJS的技術風格沒有大的變化。

對于AngularJS項目，現在比較痛苦的就是開發人員數量越來越少了。因為這個框架的技術門檻相對比較高，它整個設計做的比較復雜。

我接觸過一些公司，使用這個技術，開發了很多的項目，都有四五年的歷史了，代碼量非常之龐大，現在他們面臨的一個問題是第一開發人員找不到了，第二就是客戶的新需求不斷的進來，于是就很尷尬，不知道該怎么應對這種情況[l1]?。

4.4.2?Angular

Angular是由AngularJS團隊重寫的一個前端開發框架，最早的正式版本發布于2016年9月， 最新的版本發布于2021年4月21日。

Angular相較于AngularJS：

去除了scope、controller的概念

使用了更簡潔的屬性輸入綁定和事件輸出綁定

可以把核心功能移到一個模塊中，更加方便管理

推薦使用TypeScript編程語言，這門語言支持靜態類型，支持模板，支持注解

TypeScript是ES6的超集，向后兼容ES5

支持動態加載

等等

這是一個非常不錯的技術，相比較它的前身AngularJS，它去除了非常繁雜的，冗余的一些架構設計。

從這個技術推出到現在，它的技術風格沒有變化，是在前端技術框架中技術保值性最強的。可以毫不夸張的說，在5年前你學的Angular技術到今天依然是新鮮的，在現在的最新版本中使用那些技術是沒有問題的。

除此之外，由于谷歌的推動,?這門技術，越來越受前端開發團隊的重視，尤其是一些大的公司首選的前端技術就是Angular，我在北美設計開發的七八個項目都使用Angular。這個技術追求嚴謹性，這從它追求把HTML，?CSS，TypeScript三者的分離以及使用TypeScript作為它的邏輯編程語言，可以看出端倪。

4.4.3?React

最早版本發布于2013年5月，最新版本發布于2021年3月。

React技術發生過如下比較顛覆性的變化：

0.13.0 2015年3月發布的這個版本，宣布不再支持之前的版本。

16.8.0 2019年2月發布的這個版本，添加了Hooks和函數組件，并引導開發者使用新的技術，以解決React代碼重用的問題。

React技術入門的門檻比較低，它有一個優勢，就是它可以在以前傳統的網絡前端程序里面作為一個程序庫使用，它不一定當做框架來使用，這是它的一個優勢。除了被當做一個程序庫使用以外，也可以把react當做一個程序框架使用。

React有非常龐大的程序員開發社區。尤其是在Facebook的推動下,?其影響力，一直穩步攀升。

對于React最大的詬病就是它的jsx文件格式，這種文件格式是邏輯代碼和模板代碼的混合體，有人愛，有人恨。我個人的觀點是這種方式導致代碼的耦合性增高，使得項目的維護成本大幅提升。

從鮮有開發經驗的程序員的角度來說，可能喜歡把它們合在一起，因為那樣會很快出東西上手，有成就感，但是逐漸你會發覺，如果把東西合在一起，最開始的時候可能很快樂，隨著項目規模的不斷提升，復雜度就越來越高，到這個時候就苦不堪言了。

4.4.4?Vue

最早的Vue版本發布于2014年2月，最新的版本發布于2021年4月。

Vue的技術脫胎于AngularJS的框架，支持模板，CSS和邏輯代碼的分離，這點跟Angular很接近，在數據流的處理上使用Flux模式，這一點跟React又很接近。

最近的3.0版本，開始引導開發者使用TypeScript。

Vue的技術特點，它既想吸引React的程序員,?它支持單向的數據流模式，也就是Flux模式，這跟React里面的Redux非常接近，因為Redux就是基于Flux進行擴展的，又想吸引Angular的程序員，比如它的一些模板設計方法和雙向數據流模式都跟Angular非常接近。當然它也在努力塑造自己的風格，就是以最簡單的東西來實現所要求的功能。

4.4.5?Blazor Server?與?Blazor WebAssembly

最早的版本發布于2018年，這門技術是跟Asp.Net?Core一起發布的，通過它可以使用C#，?HTML, CSS完成網絡前端的開發。

Server支持服務器端的渲染方式。?Blazor WebAssembly使用單頁應用運行方式，客戶端的框架使用WebAssembly編寫。

很多朋友問我這門技術的前途怎么樣，跟現在的三大前端框架相比有什么優勢？它最大的優勢就是C#編程語言，這門編程語言目前也是跨平臺的，在Linux上，Windows上和Mac OS上都可以使用。又非常容易上手，這是這門技術最大的優勢，當然它有微軟的支持，也是不容忽視的一個優勢。

個人感覺Blazor的發展，有點左搖右晃的，它既想支持傳統的Server端的渲染，又支持單頁應用的渲染方式，我覺得它可以先集中在某一個點上發力，當然目前最有前途的還是單頁應用的這種開發模式，因為對客戶體驗來說是最好的，響應速度最快。

4.5?廣泛流行的界面庫

如果我們開發網絡應用的前端，我們不可能不研究有哪些優秀的界面庫可以使用和參考。這類庫選取需要考慮如下的幾個因素：

能否滿足我的開發需求；

技術更新是否及時；

該技術是否相對成熟；

下載量是否足夠多，用戶群足夠龐大，口碑要好；

可以參考的界面有：

Prime, Bootstrap, Material, Antd等等。

使用這類庫的好處是可以大大的減少開發工作量，使得開發出來的界面更加的專業。

5???跨平臺開發

5.1?Flutter統治跨平臺

由Google創建。是一個開源的、跨平臺的界面開發框架。開發者可以用來開發出自適應的用戶界面。這門技術使用Dart作為開發語言。

通過使用不同的widgets，它可以提供非常強大的兼容性來適應不同場景下的屏幕界面設計。

而且，Flutter支持熱加載，從而提高了開發效率。因為開發者不需要重新加載應用就可以看到自己的代碼變化。

由于減少了應用與平臺間的羈絆，Flutter應用的性能是非常優秀的。

這門技術目前可以支持安卓端開發，iOS端開發和網頁端開發，并且只有一套代碼就全部搞定，這個是它最大的優勢，這一點跟其他的跨平臺技術是有一些區別的。這得益于Flutter不斷涌現的優秀的高質量程序庫。除非特別新的功能，特別的與硬件相關的一些技術，一般來說現有的Flutter語言的SDK和程序庫都可以幫用戶搞定了。

5.2?Electron跨系統桌面方案

Electron技術允許開發者使用JavaScript, HTML, CSS編寫跨平臺的桌面應用程序，比如VS Code。編寫過程就如網絡前端開發，但是它可以讀取和寫入本地操作系統的文件。類似的技術還有, NW.js, APPJS等。

這類技術的出現，使得網絡前端程序員有能力開發出跨平臺的桌面應用程序來。

5.3?React Native原生方案

React Native有Facebook推出，也是非常優秀的開源跨平臺框架，其產出也是原生的移動端應用，性能也非常不錯。

如果是React程序員的話，使用React Native幾乎沒有技術障礙，可以直接上手，當然，開發網頁應用跟開發手機應用有一些區別，它們樣式的設計和界面的一些規范是不一樣的，這個當然需要區分一下。

還有就是移動端的用戶操作習慣跟網頁端的用戶操作習慣是不一樣的，這個也是作為開發者需要考慮的因素。

5.4?Xamarin/ Visual Studio

使用C#編程語言編寫Android和iOS原生應用程序，Xamarin/Visual Studio?是不二的選擇。C#的易用性廣為人知，再加上跨平臺的代碼重用性，這項技術在前端的開發市場上有一批忠實的擁躉。

這門技術，最早是脫胎于Mono項目，Mono項目，是試圖把C#這門語言推向跨平臺，到如今這個目標已經實現了，當然這也離不開微軟的大力支持和推動。

由于微軟已經購買了這個擁有這個項目的公司Xamarin，所以微軟直接就把這門技術集成到Visual Studio里面了，如果你有這個工具，那么你就可以用這門技術加上C#語言直接開發Android和iOS的應用了。

5.5?Ionic 4

在前端技術列表中，Ionic作為一個開源的開發包，可以用來開發混合模式的移動端應用。它包含三個方面的內容：基于軟件及服務的UI框架，Angular框架和一個編譯器。

這個UI框架庫針對移動端做了專門的優化。Angular架構用于快速的開發規?；捻椖?。開發者使用一個編譯器如PhoneGap或者Cordova，把HTML, CSS, JavaScript代碼編譯成原生的移動應用。

如果是Angular程序員的話，使用這門技術，是沒有技術門檻的，可以直接上手，當然要熟悉一下網頁端開發和手機端開發的一些區別，包括用戶習慣，界面的一些設計差異等等。

5.6????JavaFX

JavaFX最早發布于2008年12月，目前依然處于活躍使用狀態。是跨平臺的通用界面開發平臺，使用Java作為編程語言。

Java技術的天然屬性是跨平臺，這也是這門技術的一個優勢，使用它，你可以開發出同樣一套界面系統，運行在不同平臺上: Linux , Windows, Mac OS平臺上以及其他可以運行Java虛擬機的平臺上。

5.7?QT

QT的初始版本發布于1995年5月，距今已有26年的歷史了，目前依然非?；钴S。用戶依然眾多。它的主要編程語言是C++。它支持跨平臺，可以支持桌面系統，如MacOS, Linux桌面，Windows等等，也支持移動平臺如Android, iOS，以及其他的嵌入式系統[l2]?。

曾幾何時，這門技術曾是嵌入式手機系統的霸主。但是隨著Android和iOS的興起，它的市場地位就不斷處在下滑的狀態，但是，由于其深厚的技術底蘊，它依然有很大的客戶群。也經常有朋友詢問這門技術的前景如何，這說明它在當前市場上還是有很多的使用場景的。

5.8?WPF

WPF最早發布于2006年11月，目前依然處于活躍使用狀態。是在Windows上的基于XML格式的界面開發平臺?？梢灾С?D, 3D渲染。編程語言是C#。

這門技術在Windows平臺上出現的相對比較晚，它的出現支持了如下方向，一個是游戲類，二維和三維的渲染開發， 這包括虛擬現實平臺和混合虛擬現實平臺的開發。另一個是Windows移動端的應用開發。

6???小結

前端技術變化速度很快，這是因為這門技術是不斷在實踐中發展壯大的。它的突破點主要發生在如下幾個方面：

數據流的管理，如服務器端管理相對于客戶端管理，單向數據流相對于雙向數據流。

響應速度，隨著瀏覽器技術的不斷發展，單頁應用相對于傳統的服務器端渲染，響應速度要快得多。

跨平臺的能力，代碼重用性越強即跨平臺能力越強當然越受歡迎。

大規模應用的管理能力，這個主要體現在模塊化和組件化的能力上。

性能極致的追求，這個地方的追求度決定了是不是使用原生SDK開發對應的移動端應用。

易用性的選擇，如果你是有經驗的開發者，對于一門技術，看了三十分鐘沒看出門道，基本上可以先放棄了。

上面是針對本人對于前端技術的工作經驗，結合自己的認知，對于當前的前端技術做出的洞察，其中一定會有很多不足之處，肯請各位大佬多多批評指正。

7???參考資料

https://angularjs.org/

https://angular.io/

https://reactjs.org/

https://vuejs.org/

https://blazor.net/

https://ionicframework.com/

https://flutter.dev/

https://reactnative.dev/

https://www.android.com/

https://www.apple.com/ios/

http://xamarin.com/

https://www.qt.io/

https://docs.microsoft.com/en-us/cpp/mfc/mfc-desktop-applications

https://docs.microsoft.com/en-us/dotnet/framework/wpf/index

https://docs.microsoft.com/en-us/dotnet/framework/winforms/

https://wiki.openjdk.java.net/display/OpenJFX/Main

https://www.electronjs.org/

https://webrtc.org/

JavaScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。