聊聊介面渲染引擎——UIEngine的前世今生

隱世大師發表於2016-11-02

話說20世紀90年代出現了網際網路,一開始只是用來看看靜態文件。但是人們發現在瀏覽器網頁上通過幾個輸入控制元件就可以做類似於發郵件之類的事情,慢慢就有了互動的概念。以cgi,pl,php,asp為代表的模板(template)語言盛行,它們可以生成動態網頁,於是第一代介面渲染技術誕生了。

後來,隨著頁面功能慢慢複雜,服務端runtime逐漸被物件導向語言Java領導的servlet/jsp技術佔據主流,並提出了MVC模型的概念。這後來也成為J2EE企業級開發web層的程式設計規範。

再到後來,人們對網頁互動能力的要求越來越高,瀏覽器中指令碼語言(javascript)的能力也越來越強,可以大大增強渲染效果並提高互動體驗。還有css技術也分離出來,網頁可以擁有更漂亮的佈局和樣式。於是前端開發的三架馬車出現了。

這時候湧現了大量的前端框架,比較有名的有ext、prototype、jquey等。這也就是第二代渲染技術,即先採用template語言在服務端渲染出頁面骨架,然後再到客戶端Browser繼續渲染細節的部分。這個技術的最高水平也是sun公司提出的,叫JSF(Java Server Faces),他還首次提出了元件樹、元件生命週期管理、資料繫結等介面渲染的新指導思想。

正在這時候,我進入了阿里巴巴集團B2BCRM,跟隨牛人一起開發了一個牛X的前端框架(shy3),採用了當時非常先進的XML語言來定義介面語義,然後通過template渲染,再加上js渲染,實現了當時軟體開發的極致速度,增刪改查功能半天就能搞定。

再到後來,隨著網際網路公司的群雄征戰,以Google、Facebook公司為首的前端開發工程師又一次做了顛覆性創新,他們極致地提高瀏覽器、js引擎的效能,並在2011年提出了HTML5標準,並且css和http協議也相繼跟進,近期javascript已經完成了ES6的標準制定,正在邁向ES7。。。。,還有移動網際網路時代也到來了,又需要軟體開發能夠覆蓋到三個端(PC、Pad、Mobile)。這時候湧現的技術標準有MVVM(提出了directive、雙向繫結等概念)。於是最近期乾脆有人提出介面渲染引擎——UI Engine的概念,即在JS Runtime之上搭建一層介面渲染層,寫一次程式碼就可以實現三端合一,前端開發速度將進一步提升!

這也就是第三代渲染技術時代的到來!比較代表的技術有前兩年的angular、近期的React、以及最近淘系前端團隊剛剛開源的Weex技術等。

最後總結一下最新一代UI Render Engine的三大特徵:
1、元件生命週期管理
2、基礎元件定義
3、虛擬Dom技術實現雙向繫結

各位開發工程師親們,讓我們擁抱前端開發的這些變化,這樣才能在軟體開發領域一直立於不敗之地。


相關文章