說說前端未來幾年的發展方向

在知乎上看到這麼一個問題,覺得很有意思,以下是原提問者的見解

過去五年前端的發展過程基本上是一個工程化的過程,框架和工程化工具層出不窮。 近兩年其實發展已經比較遲滯了。 框架方面:基本就是三大框架鼎立的局面,三大框架都在相互借鑑吸收,而且方向各有側重,未來短時間內我看格局不可能有什麼大變化. 工程化工具:基本上是 webpack 一統江湖的趨勢,雖然有 parcel 等來小打小鬧,但是生態一旦形成,沒有革命性的項目是無法取代 webpack 的,而且 webpack 也在進化. 個人認爲前面五年是前端生產力提高的五年,工程化使得前端的生產力得到了極大提升,但是現在也基本上是在已有的格局中修修補補了

我談談我對前端未來幾年的發展方向的看法。

看未來的發展方向,無非就是看現在的解決方案所存在的痛點。

1. 瀏覽器的性能問題

做 web 前端的同學都知道,和原生的 App 相比,性能一直一個致命的痛點,如果要追求性能,肯定得用原生 App。那麼在性能上,未來幾年可能是一個方向。

①前端代碼編譯爲字節碼

瀏覽器這幾年在 Chrome 的帶動下,性能飛速發展,但畢竟其核心原理沒有變化,性能始終難以達到原生 App 的水平,這部分是很有可能出現大的變化的,一個可能的方向就是瀏覽器變成虛擬機,前端代碼編譯爲字節碼,通過這種方式來將性能提升一個等級,雖然還是難以達到原生App的水平,但已經能夠滿足絕大部分應用的性能需求,類似於Java對比C/C++一樣。 --李運華

因爲 js 是邊解釋邊執行的,這肯定是要比編譯型語言要慢,爲了解決解釋器的低效問題,大概在 2008 年的時候,提出了 JIT 的概念,它是使 JavaScript 運行更快的一種手段(JIT,內聯緩存和隱藏類)之一,通過監視代碼的運行狀態,把 hot 代碼(重複執行多次的代碼)進行優化。通過這種方式,可以使 JavaScript 應用的性能提升很多倍。

但是時至今日,還是覺得不夠快,所以各大瀏覽器廠商開始支持 WebAssembly。WebAssembly 是一種新的字節碼格式,主流瀏覽器都已經支持 WebAssembly。

和 JS 需要解釋執行不同的是,WebAssembly 字節碼和底層機器碼很相似可快速裝載運行,因此性能相對於 JS 解釋執行大大提升。

也就是說 WebAssembly 並不是一門編程語言,而是一份字節碼標準,需要用高級編程語言編譯出字節碼放到 WebAssembly 虛擬機中才能運行.

他的優點就是:

  • 體積小:由於瀏覽器運行時只加載編譯成的字節碼,一樣的邏輯比用字符串描述的 JS 文件體積要小很多;
  • 加載快:由於文件體積小,再加上無需解釋執行,WebAssembly 能更快的加載並實例化,減少運行前的等待時間;

目前可以編譯成爲 WebAssembly 字節碼有 :AssemblyScript(語法跟 TS 差不多,)、c\c++、Rust、Kotlin。

②統一的DOM樹限制了單線程的渲染

理論上來說,一個頁面某個時間變化的部分只是集中在一小塊區域,沒有必要將整個DOM樹鎖住。因此,一個可能的方向是分區渲染,即將頁面劃分爲幾個不同的區域,每個區域有獨立的DOM樹,獨立渲染,那麼性能會高很多,類似於 App 開發中的組件,組件類的運行不影響其它組件,如果需要依賴其它組件,通過組件間消息進行通信。

原生 App 不同平臺重新開發的痛點

現在的 web 有兩大優勢,一個是瀏覽完畢直接走人,另外一個是跨平臺,只要有瀏覽器,一切都好說。

所以現在有很多 hybrid 解決方案,某些頁面通過 h5 的方式來展現。

想解決的無非就是少花點成本,寫一份代碼,可以在 ios 和 Android 上都可以用,進而也出來了想 RN、weex、NativeScript 這類 Learn Once, Write Anywhere(RN提出來的) ,但是他們最終都會翻譯成原生代碼。

但是用過這些的人都知道,還有很多坑,經常調侃 rn 的就是 write once ,debug anywhere。

Learn Once, Write Anywhere 的理念,背後就是跨端的思想,所以也誕生出來 electron、PWA 爲代表的案例。

而且現在出現了 Taro 、mpvue 這些 h5 與小程序的統一的方案,所以未來在突破寫一份代碼在 h5 ,原生 app、小程序,甚至桌面應用都有可能。

另外提醒

  1. 我很早就跟星球裏的朋友們說過,TS 一定會在火的,現在用 TS 的感覺,讓我感覺跟 vim 很像,剛開始用的時候很難受,一旦習慣了就離不開了。未來項目會越來越複雜,用了 TS 項目的風險會可控很多。
  2. 多注重框架原理,現在對於前端工程化,個人認爲差不多到了瓶頸期,很難有新的突破,注重原理才能很好的應對未來的發展。
  3. 眼界放寬、拓寬自己知識的廣度。

歡迎大家把自己對未來幾年前端的看法在留言區討論,以上僅爲個人觀點。

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