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

来源: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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...