我對前端技術更新的看法以及未來發展趨勢預測

来源:https://www.cnblogs.com/coderhf/archive/2020/07/01/13219699.html
-Advertisement-
Play Games

前端開發如何看待“別更新了,學不動了”?Deno、TypeScript 等新輪子層出不窮,未來前端重點方向在哪?前端開發在大前端浪潮下如何持續學習、成長? SpriteJS 3.0 的特性和規劃 SpriteJS 是由 360 奇舞團開源的跨平臺高性能圖形系統,它能夠支持 web、node、桌面應用 ...


前端開發如何看待“別更新了,學不動了”?Deno、TypeScript 等新輪子層出不窮,未來前端重點方向在哪?前端開發在大前端浪潮下如何持續學習、成長?

SpriteJS 3.0 的特性和規劃

SpriteJS 是由 360 奇舞團開源的跨平臺高性能圖形系統,它能夠支持 web、node、桌面應用和小程式的圖形繪製和實現各種動畫效果,不久前剛發佈了 3.0 版本。與 SpriteJS 2.0 相比,SpriteJS 3.0 是真正優先使用 WebGL2 和 WebGL 進行渲染的跨平臺圖形系統。3.0 版本針對可視化的 2D 渲染做了專門的優化,能夠自動合併大量的元素進行渲染,從而大大提升渲染效率。與 2.0 相比,3.0 是更加純粹的渲染引擎,弱化了 2.0 提供的文字排版、Flex 佈局等功能,專註於提升圖形渲染的性能。

SpriteJS 3.0 同樣保持了對 DOM API 極高的相似度,因此對 d3.js 這樣數據驅動文檔的可視化工具非常友好,而在圖形渲染方面,由於 3.0 使用 GPU 渲染並針對可視化做了大量優化,使得它的渲染性能要大大超過了 2.0,在極端情況下達到十倍甚至百倍的提升。在渲染大量元素的時候,3.0 基本上可以在普通的 PC 電腦上處理畫布上數以百萬計的元素節點,輕鬆實現酷炫的粒子動畫視覺效果。

此外,SpriteJS 3.0 在現代瀏覽器中支持 Offscreen Canvas 和 WebWorker,能夠在 Worker 線程中渲染,不會阻塞主線程而影響用戶交互。

SpriteJS 3.0 通過擴展支持真正 3D 渲染,3D 擴展的底層是基於輕量級的 Ogl 框架,使用上簡潔高效,性能優良。整體功能上雖然不如 ThreeJS 這樣的老牌庫,但勝在 API 設計更簡單,尤其是配合 d3.js 使用,非常的方便,所以適合於大多數可視化開發的 3D 渲染場景。

在未來,SpriteJS 會考慮進一步壓榨渲染性能,比如使用 Web Assembly 重寫矩陣運算庫,讓底層運算的性能進一步提升,改良一些渲染的演算法,在記憶體方面儘量直接映射數據並操作 ArrayBuffer,以節約記憶體。在應用方面,考慮實現 Vue 3 的 runtime,直接支持 Vue 3 的應用。在 3D 方面,減少與 ThreeJS、BabylonJS 的能力上的差距,讓 3D 渲染能力變得更強大。

如何看待 Deno、TS 和未來的前端重點方向?

最近幾年流行的編程語言很多都號稱是 JavaScript 的替代語言,比如 TypeScript。前端三大框架現在也基本都增加了對 TypeScript 的支持,這背後的本質原因是什麼?

我認為,近幾年 JavaScript 的語言標準發展很快,這背後依托的依然是 Web 應用領域的高速發展,JavaScript 是 Web 領域事實上的“原生語言”和技術標準,很多編程語言都是 JS 的衍生語言。在他看來,TypeScript 是一個很優秀的編程語言,其靜態類型對一些規模較大的項目提高代碼的可維護性很有幫助,因此現在寫 TS 的開發者越來越多,三大框架增加對其支持是順其自然的事。

奇舞團很多項目也有採用 TS,內部也鼓勵大家嘗試和使用 TS 技術。SpriteJS 也提供了 TypeScript 的 typings,方便 TS 開發者使用。

近期,Deno 也發佈了正式的 1.0 版本。我認為它是一個很好的 Runtime,在 Node.js 之後走了另外一條道路,規避了 Node.js 設計上的不足之處。我認為未來 Deno 不見得會取代 Node,很有可能出現一種兩者並存共同發展的態勢。但是 Deno 的設計本身就是建立在對 Node 的思考和改進之上的,所以學習它,對於理解 Node.js 的精髓也非常有幫助。他表示個人對 Deno 的接觸不多,但是有機會會去深入地學習和使用它。

有趣的是,日前 Deno 官方公佈的一份文檔指出,出於對當前環境的實際考慮,Deno 將停止在內部代碼中繼續使用 TypeScript。文檔中提到的問題涉及 TypeScript 編譯時間、結構以及代碼組織方式等。未來,Deno 項目將使用純 JavaScript 編寫內部代碼。

Deno 將停止使用 TypeScript,並公佈五項具體理由

表示自己這兩年的主要精力放在可視化領域,主要是可視化渲染方面,我認為可視化是值得前端工程師重視的一個領域。隨著 Web 技術的發展,視覺特別是 WebGL/GPU 相關的應用場景會越來越豐富,對技術要求也會越來越高。與前端其他大部分技術不同,WebGL 的上手門檻比較高,需要對數學、圖形學有比較扎實的基礎,而圖形學和視覺呈現技術本身的天花板非常高,未來這塊一定會有非常大的發展空間。

AI 以及 VR/AR 也是未來前端的發展方向,對於 VR/AR,主流瀏覽器也開始支持 webXR 技術,應當予以關註,而且無論 AI 還是 XR 這些領域,其實也和 GPU 息息相關,所以它們和可視化技術也是有關聯的。

跨端技術,從 RN 到 Flutter,經過了很多的發展,但是還遠未成熟,而跨端本來就有很多應用場景,未來依然有很大的成長空間。PC 端的 Electron 也不容忽視,作為跨平臺應用開發,它是一個非常好用的工具。

Web Assembly、JS Binding,一些跨界交叉的領域往往有些前沿的東西,同樣值得前端開發者關註。

別更新了,學不動了?

曾經有位前端技術專家表示,“前端十八個月難度翻一番”,此言道出了前端領域更新換代之快背後的前端開發血淚史。也因此,“別更新了,學不動了”這句話成為了不少前端開發玩梗的口頭禪。

我個人屬於技術發展的越多越快越興奮的類型。我喜歡研究技術,嘗試新東西,不怕學習,更沒有學不動這種感覺。

我一直覺得,如果一個行業的新東西層出不窮,說明這個行業一直在高速發展,這本身對於從業者來說是一個非常好的事情,因為這說明這個行業中有更多的機會和成長空間。

對於一些前端開發的擔憂,我也能夠理解。我認為,如果你 不盲目 地去追求所謂的“時髦”技術,不去刻意擔心自己是否落伍,而是去多觀察這個行業,找到技術發展內在的規律和脈絡,那麼你就知道該如何前進,不會有任何恐慌。

在任何一個領域或方向,知識體系都可以大體上分為基礎知識和領域知識,而領域知識又可以分為通用領域知識和專用領域知識。二者的變化是不一樣的,基礎知識的變化最慢,其次是通用領域知識,然後是專用領域知識。

用可視化這個方向來舉例,基礎知識是數學和圖形學知識,比如向量、矩陣運算、三角剖分這些知識屬於基礎知識,它們基本上不會隨著時間發生很大變化。JavaScript、WebGL 這種屬於通用領域知識,它們會改變,會慢慢發展,比如從 WebGL1.0 發展到 WebGL2.0,從 ES2019 發展到 ES2020,但不會變化、發展得那麼快。而類似 ThreeJS、BabylonJS、SpriteJS、d3.js,這些屬於專用領域知識,很有可能一個大版本升級,就會有很大的變化。

學習這些知識,也是有不同的方法的。一般來說,如果是基礎知識,隨便什麼時候都可以學,而且越早學習越好。基礎知識就像是你的內功,學好它們,融會貫通之後,學習其他的知識都是事半功倍的。如果是通用的領域知識,一旦你下決心從事這個領域,也是能夠儘早學習它比較好,不過由於這些知識是領域相關的,如果能一邊學習,一邊通過實踐來打磨,就會掌握得更快。專用領域知識,不一定要很早去學,有一個技巧是,當你用到的時候再去學習它們。如果你沒有用到,你可以知道有這門技術,能做什麼就行了,不用花大量時間和精力去鑽研它們。

有些同學覺得技術更新太快,學不過來,通常是被這些專用領域知識給“迷惑”了。比如大家都說前端工程化里的代碼打包很重要,於是今天學習了 webpack,明天又去學習 rollup,而實際上這種專用領域知識,只需要知道它們能做什麼,在用到的時候再去詳細學習就好了。

給前端開發的一些真誠建議

我作為前端領域的多年從業者,技術管理者,也為 讀者朋友給出了自己的經驗總結和真誠建議。

首先,確定你自己真正喜歡和熱愛前端開發這門職業。大多數同學成為前端工程師,內心是真正喜歡這個職業的。但是,之前也聽到過有同學,因為覺得在程式員中前端比較“簡單”,或者覺得自己數學或演算法基礎不好,做前端對這些要求不高,再或者就是覺得前端工程師算是份體面的職業,所以選擇它,內心中並沒有真正熱愛這個職業。如果你心中沒有真正熱愛前端,僅僅把它當做一份謀生的工作的話,那麼你可能在這個職業道路上走不了多遠,也無法達到很高的高度。所以如果有這種情況,你需要反思一下自己是否真的適合前端開發這個職業。

如果你確實熱愛這份職業,考慮長遠的發展,最好選擇一個好的平臺,一個技術氛圍好的團隊,一份節奏合適的工作,這裡的節奏合適指的是忙閑交替,既不會長時間持續特別忙,又不會特別閑。在這樣的節奏下,項目積累再加上自己的學習沉澱,可以比較快速地成長,而技術氛圍好的團隊,可以讓自己的學習沉澱速度更快。

要在專業上達到一定的高度,每個人的情況是不一樣的,要根據自己的情況來規劃。不過有一些共通點,一般來說,自我的成長需要能夠找到並突破前端領域的“邊界”,這個邊界可以是某個有深度的領域,深入到其中的技術前沿,也可以是某個交叉領域比如與服務端的交界,與移動客戶端的交界等等,在這些邊界上做出突破,就可以步入前端專家的行列。

前端專家除了技術能力,也需要打造自己的個人影響力,鍛煉自己的領導力,要讓自己心態開放、眼界開闊,不排斥新技術,擁抱開源,多參與社區,這樣的話,在職業之路上就可以到達一個比較高的高度。

最後,希望各位都能成為優秀的前端專家,讓我們一起將前端行業變得更好。

總結

對了,小編為大家準備了一套2020最新的web前端資料,需要點擊下方鏈接獲取方式

學習前端,你掌握這些。二線也能輕鬆拿8K以上

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 頁面強行註入jQuery這個腳手架,然後可以用jQuery幹些事情了。 ...
  • 課程開始,今天學習了html的基本標簽: div + span: div和span兩個是雙標簽,html中有雙標簽和單標簽,下文中有單標簽介紹 ,雙標簽成雙成對出現例如: <div> <span></span> </div> 有<div>必定要有</div>這就是雙標簽的特性。 div和span沒有 ...
  • 觀察自然界中樹的分叉,一根主幹生長出兩個側乾,每個側乾又長出兩個側乾,以此類推,便生長出疏密有致的結構。這樣的生長結構,使用遞歸演算法可以模擬出來。 例如,分叉的側乾按45°的偏轉角度進行生長的遞歸示意圖如圖1所示。 圖1 生成樹的遞歸示意圖 按照樹分叉生長側乾的遞歸思想,編寫如下的HTML代碼。 < ...
  • 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript中的運算符</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 / ...
  • 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript簡介</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 wind ...
  • 想學習 TypeScript 的小伙伴看過來,本文將帶你一步步學習 TypeScript 入門相關的十四個知識點,詳細的內容大綱請看下圖: 一、TypeScript 是什麼 TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集,而且本質上向這個語言添加 ...
  • 開發人員將 JavaScript 設計模式作為解決問題的模板是很合適的,但並不是說這些模式可以代替開發人員的工作。 通過設計模式,我們可以將許多開發人員的經驗結合起來,以優化過的方式來構造代碼,從而解決我們所面對的問題。設計模式還提供了用於描述問題解決方案的通用辭彙表,而不是去枯燥地描述代碼的語法和 ...
  • 前端學習路徑 1.WEB前端快速入門 在本階段,我們需要掌握 HTML 與 CSS 基礎,當然,也包含 H5 和 C3 的新特性。這個部分內容非常簡單,而且非常容易掌握。相信你也更願意學習這個部分,畢竟他可以讓你最直觀的感受到前端的魅力。為了鍛煉大家寫代碼,可以根據你喜歡的站點去實現效果。這一階段是 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式(靜態工廠模式)1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點:2. 總結:3 ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說,下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫,因此mysql數據發生改變時,Elasticsearch也必須跟著改變,這個就是Elasticsearch與my ...
  • 引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據,今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫,旨在最大程度地減少單元測試中的“安排(Arrange)”階段,以提高 ...
  • 經過前面幾個部分學習,相信學過的同學已經能夠掌握 .NET Emit 這種中間語言,並能使得它來編寫一些應用,以提高程式的性能。隨著 IL 指令篇的結束,本系列也已經接近尾聲,在這接近結束的最後,會提供幾個可供直接使用的示例,以供大伙分析或使用在項目中。 ...
  • 當從不同來源導入Excel數據時,可能存在重覆的記錄。為了確保數據的準確性,通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間,而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟: 1. 首先安裝免費.NET ...
  • C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式,使程式更加健壯和可靠。 異常處理的基本概念: 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • 優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解,包括JDK和第三方庫。 我花了很多時間來學習API,尤其是在閱讀了Effective Java 3rd Edition之後 ,Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發,而不是為常見的東西編 ...
  • 框架 · 使用laravel框架,原因:tp的框架路由和orm沒有laravel好用 · 使用強制路由,方便介面多時,分多版本,分文件夾等操作 介面 · 介面開發註意欄位類型,欄位是int,查詢成功失敗都要返回int(對接java等強類型語言方便) · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵,火星子都快出來了。司機跟那同事更熟一些,連我在內一共就三個人,同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了,馬上聽出來了,為那個無辜的企業經辦人辯護,實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責, ...