Web UI發(fā)展歷程

時(shí)間：2023-02-18 14:34:02 | 來源：營銷百科

時(shí)間：2023-02-18 14:34:02 來源：營銷百科

Web UI發(fā)展歷程：Web 1.0的UI技術(shù)

在HTML規(guī)范發(fā)展的過程中，以HTML標(biāo)簽為基礎(chǔ)來構(gòu)建的頁面一直是Web UI的主流技術(shù)。

1.1.1 純文本網(wǎng)頁

1989年，英國人Tim Berners Lee發(fā)明了www（World Wide Web），萬維網(wǎng)誕生。通過www，分散在網(wǎng)絡(luò)上各處的資源可以相互訪問。最開始的網(wǎng)頁沒有UI的概念，只包含純文本的數(shù)據(jù)和跳轉(zhuǎn)的超鏈接。

1.1.2 靜態(tài)HTML頁面

隨著越來越多的數(shù)據(jù)被放置到了互聯(lián)網(wǎng)上，純文本的HTML已經(jīng)不能滿足人們的期望。Marc Andreessen在1993年引入了圖片。隨后，字體、背景、框架和一些特效（marquee、blink）等元素相繼被引入了HTML中。

1993年6月，互聯(lián)網(wǎng)工程工作小組（IETF，Internet Engineering Task Force）發(fā)布了HTML草案；1995年11月，提出了HTML2.0規(guī)范。

此時(shí)的web UI已經(jīng)具有較強(qiáng)的靜態(tài)展示能力，豐富多彩的展示效果，被越來越多的人所接受。Web UI技術(shù)逐漸形成。

1.1.3 Web UI的成熟期

1996年是HTML發(fā)展的一個(gè)里程碑，JavaScript和疊樣式表（CSS，Cascading Style Sheets）相繼誕生，W3c（World Wide Web Consorium）制定的HTML3.2規(guī)范出爐。

此時(shí)的web UI可以在展現(xiàn)后，與用戶的操作交互，根據(jù)用戶的行為方便地修改UI元素和調(diào)整樣式，從而實(shí)現(xiàn)動(dòng)態(tài)的DHTML頁面。至此，傳統(tǒng)的HTML Web UI技術(shù)發(fā)展到成熟期。后來的發(fā)展中，HTML標(biāo)準(zhǔn)沒再有大的改動(dòng)。

從這個(gè)時(shí)期開始，一般的web站點(diǎn)或是web應(yīng)用系統(tǒng)的實(shí)現(xiàn)都是從界面設(shè)計(jì)人員使用Photoshop或是Dreamweaver等工具設(shè)計(jì)出效果圖或是界面原型開始。此時(shí)的內(nèi)容還都是所謂的靜態(tài)頁面，無法根據(jù)不同的外部條件展示不同的內(nèi)容。

1.1.4 服務(wù)器端技術(shù)

隨 后，CGI、ASP(Active Server Page)、JSP(Java Server Pages)、PHP(Personal home page Hypertext Preprocessor)等服務(wù)器端腳本技術(shù)相繼涌現(xiàn)，真正的動(dòng)態(tài)頁面出現(xiàn)了。服務(wù)器端代碼分析用戶提交的請求參數(shù)，從數(shù)據(jù)庫服務(wù)器獲取相應(yīng)的業(yè)務(wù)數(shù) 據(jù)，動(dòng)態(tài)地將網(wǎng)頁和數(shù)據(jù)組合拼裝出網(wǎng)頁的HTML文本輸出到客戶端瀏覽器。

此時(shí)的服務(wù)器端頁面不再是一個(gè)單純的UI模型，而只是一個(gè)服務(wù)器端腳本引擎來處理生成客戶端UI模型的模板，其中包括HTML片段、腳本塊和標(biāo)簽等元素。比如Struts、Tapestry和WebWork等基于JavaEE技術(shù)的web框架就是此類技術(shù)的集大成者。

隨 著web開發(fā)技術(shù)的進(jìn)一步發(fā)展，又出現(xiàn)服務(wù)器端UI組件技術(shù)。例如asp中的服務(wù)器端UI組件和JSP中的JSF組件。其使用服務(wù)器端腳本技術(shù)， 封裝部分HTML、JavaScript和CSS片段構(gòu)建一個(gè)完整的UI組件模型，在運(yùn)行期間解釋并與數(shù)據(jù)進(jìn)行整合，最終輸出為實(shí)際的HTML代碼。

Web 2.0的UI技術(shù)

Web2.0 是2003年之后互聯(lián)網(wǎng)的熱門概念之一，不過對什么是Web2.0并沒有很嚴(yán)格的定義。一般來說Web2.0是相對Web1.0的新的一代互聯(lián)網(wǎng)技術(shù) 的統(tǒng)稱。Web1.0的主要特點(diǎn)在于用戶通過瀏覽器獲取信息，Web2.0則更注重用戶的交互作用，用戶既是網(wǎng)站內(nèi)容的瀏覽者，也是網(wǎng)站內(nèi)容的制造者。

但業(yè)務(wù)系統(tǒng)與商業(yè)網(wǎng)站有著巨大的區(qū)別，業(yè)務(wù)系統(tǒng)主要使用web2.0來改善用戶體驗(yàn)，而極少關(guān)注博客（BLOG）、百科全書(Wiki)、社會網(wǎng)絡(luò)（SNS）等用戶互動(dòng)和參與技術(shù)。

1.2.1 Ajax進(jìn)入21世紀(jì)后，Ajax（Asynchronous JavaScript And Xml）技術(shù)的崛起絕對是互聯(lián)網(wǎng)應(yīng)用的一個(gè)劃時(shí)代的變革。簡單地說，Ajax就是為瀏覽器提供了在不提交整個(gè)頁面的情況下動(dòng)態(tài)的與服務(wù)器簡單交互的能力。 這樣，就可以通過使用JavaScript腳本來提交數(shù)據(jù)和刷新或是渲染頁面中的某些部分，此后人們就不必在頁面提交和顯示之間的空白狀態(tài)等待，web應(yīng) 用的用戶體驗(yàn)得到巨大增強(qiáng)。

Ajax技術(shù)通過在JavaScript語言環(huán)境中使用XmlHttpRequest對象與服務(wù)器端數(shù)據(jù)和業(yè)務(wù)交互，并從UI界面獲取用戶輸入和將服務(wù)器端處理結(jié)果通過UI界面展現(xiàn)出來。

主流的客戶端Ajax框架有：Jquery，Dojo，MooTools，Prototype等等。服務(wù)器端的Ajax框架有DWR，Buffalo，Ajax4jsf等等。

1.2.2 基于JavaScript的UI技術(shù)

基于JavaScript的UI技術(shù)的出現(xiàn)，將web UI的控制權(quán)從界面設(shè)計(jì)人員遞交給了程序員，即可以直接在web的前端使用JavaScript腳本來描述一個(gè)UI組件模型，然后在運(yùn)行時(shí)，由瀏覽器的腳 本解釋器調(diào)用核心的UI技術(shù)框架來將其轉(zhuǎn)換成HTML的UI界面。

此類UI技術(shù)框架跟服務(wù)器端UI技術(shù)的思路一致，只是在客戶端瀏覽器中 封裝了一套UI模型。這樣界面設(shè)計(jì)不需要服務(wù)器端的支持，在開發(fā)期間能更好的展示和測試界面效果。同時(shí)由于UI界面的構(gòu)建和控制都在客戶端，只需要和服務(wù) 器端傳遞請求參數(shù)和數(shù)據(jù)，這樣就能比服務(wù)器端UI技術(shù)大大的降低服務(wù)器端的壓力和網(wǎng)絡(luò)數(shù)據(jù)的傳遞量。

此類技術(shù)有Ext JS，Yahoo UI，qooxdoo等等。其中Ext JS框架比較完善并且易用的。

Ext JS最初是一個(gè)基于YUI(Yahoo！UI)的擴(kuò)展，已經(jīng)完全獨(dú)立。Ext JS是最好的純JavaScript UI展示框架，其提供了一整套的基于JavaScript和CSS的組件體系，以及整合了許多web UI的其他功能。