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

前端開發如何看待“別更新了,學不動了”?Deno、TypeScript 等新輪子層出不窮,未來前端重點方向在哪?前端開發在大前端浪潮下如何持續學習、成長?帶着這些問題,InfoQ 記者採訪了 360 大前端團隊奇舞團團長月影,他也將奇舞團的故事和個人經驗毫無保留地分享給了大家。

奇舞團,一個開始於 9 年前的前端故事

2011 年 7 月 5 日,360 奇舞團成立,至今已有九年。這個由 360 公司應用開發部成立的前端團隊,最初定位是支持 360 的部分核心業務和一些創新孵化類業務的前端工作。而今,她已經成爲 360 技術中臺的大前端團隊,以 Web 前端爲主,包含部分產品和 UI 設計、Android 和 iOS 開發等核心崗位,同時本身也升級成爲了公司對內、對外的技術品牌和技術平臺,而不僅僅只是一個技術團隊。

每年的 7 月 5 日是奇舞團的奇舞節,這個推崇技術創新的團隊,在支持好公司業務的同時,也孵化了優秀的開源項目和技術產品,目前旗下比較成熟的開源項目和技術產品有 SpriteJS、ThinkJS、聲享、即視、衆成翻譯、奇舞學院等等。奇舞團同時還是國內前端行業具備技術影響力的團隊,有自己的技術公衆號“奇舞週刊”,還有 QiShare、aTaller 等優質的技術分享品牌。此外與圖靈、博文視點等出版商保持良好的合作關係,近年來翻譯了十餘本技術相關的書籍,崇尚開放精神和自由分享,鼓勵技術創作和翻譯。

目前團隊在使用技術棧上沒有強制要求,不過大部分業務使用 Vue 和 React,BFF 和部分產品的服務端採用 Node.js 技術。由於產品和業務的技術特點,奇舞團對特定領域的一些技術也頗有研究,比如視頻編解碼、GPU 和 WebGL 渲染、Flutter、小程序等等。奇舞團的技術風格是崇尚創新,研究前沿技術,不怕重複造輪子,鼓勵站在巨人的肩膀上對技術和解決方案進行持續改進。

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,而實際上這種專用領域知識,只需要知道它們能做什麼,在用到的時候再去詳細學習就好了。

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

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

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

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

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章