本篇文章要從以往的Server Side Web應(yīng)用程式，其開發(fā)方式與演進(jìn)來介紹Single Page Application(SPA) 與現(xiàn)今所有Web技術(shù)。本篇文章要從以往的Server Side Web應(yīng)用程式，其開發(fā)方式與演進(jìn)來介紹Single Page Application(SPA)與現(xiàn)今所有Web技術(shù)。

我在Web 2.0過去，現(xiàn)在與未來及介紹Ruby On Rails都有提到一些Web技術(shù)的演進(jìn)，比較明顯的趨勢就是從靜態(tài)到動態(tài)頁面，而設(shè)計(jì)的方式也更程式化。我在Web 2.0過去，現(xiàn)在與未來及介紹Ruby On Rails都有提到一些Web技術(shù)的演進(jìn)，比較明顯的趨勢就是從靜態(tài)到動態(tài)頁面，而設(shè)計(jì)的方式也更程式化。 而在Web2.0：過去，現(xiàn)在及未來«就是愛程式也有讀者在前言提到，技術(shù)並不是將一個(gè)名詞安上去就好。而在Web2.0：過去，現(xiàn)在及未來«就是愛程式也有讀者在前言提到，技術(shù)并不是將一個(gè)名詞安上去就好。 我相當(dāng)贊同這句話，因此也在這篇文章中希望來做個(gè)總整理，以技術(shù)及歷史來看看Web是怎樣成長的。我相當(dāng)贊同這句話，因此也在這篇文章中希望來做個(gè)總整理，以技術(shù)及歷史來看看Web是怎樣成長的。

本篇文章也同步發(fā)佈於http://kiwi.csie.chu.edu.tw/blog/archives/156本篇文章也同步發(fā)布于http://kiwi.csie.chu.edu.tw/blog/archives/156

[ 編輯 ] Web應(yīng)用程式的演進(jìn) [ 編輯 ] Web應(yīng)用程式的演進(jìn)

[ 編輯 ] 動態(tài)網(wǎng)頁 [ 編輯 ] 動態(tài)網(wǎng)頁

儘管Web並不是一個(gè)三言兩語能拿個(gè)版本號碼來解釋，但實(shí)際上Web技術(shù)確實(shí)有些明顯的分隔點(diǎn)。盡管Web并不是一個(gè)三言兩語能拿個(gè)版本號碼來解釋，但實(shí)際上Web技術(shù)確實(shí)有些明顯的分隔點(diǎn)。

最早期我們熟知的就是靜態(tài)網(wǎng)頁，這應(yīng)該沒啥問題。最早期我們熟知的就是靜態(tài)網(wǎng)頁，這應(yīng)該沒啥問題。 儘管在2000前，php,asp就開始流行，坊間的書上也都稱之為動態(tài)網(wǎng)頁。盡管在2000前，php,asp就開始流行，坊間的書上也都稱之為動態(tài)網(wǎng)頁。 而我在此提及的動態(tài)網(wǎng)頁程式 ，實(shí)際上卻是從php4釋出的那一年開始。而我在此提及的動態(tài)網(wǎng)頁程式 ，實(shí)際上卻是從php4釋出的那一年開始。 這邊要讓大家瞭解的分界點(diǎn)，其實(shí)是php4開始被許多商業(yè)公司所採用，而軟體的形式也更為套裝化，而不再像之前大家認(rèn)定的「動態(tài)」網(wǎng)頁僅僅只是拿來完成一些簡單的區(qū)塊來與一般的靜態(tài)網(wǎng)頁整合。這邊要讓大家了解的分界點(diǎn)，其實(shí)是php4開始被許多商業(yè)公司所采用，而軟體的形式也更為套裝化，而不再像之前大家認(rèn)定的「動態(tài)」網(wǎng)頁僅僅只是拿來完成一些簡單的區(qū)塊來與一般的靜態(tài)網(wǎng)頁整合。

在2004年的時(shí)候，Web Framework的產(chǎn)生，創(chuàng)造了Web應(yīng)用程式另一個(gè)新的高峰。在2004年的時(shí)候，Web Framework的產(chǎn)生，創(chuàng)造了Web應(yīng)用程式另一個(gè)新的高峰。 而在這個(gè)時(shí)候也開始有一些Rich Web Client概念的雛形了。而在這個(gè)時(shí)候也開始有一些Rich Web Client概念的雛形了。 我將Ruby On Rails定為一個(gè)分界點(diǎn)是因?yàn)?，他顛覆了傳統(tǒng)動態(tài)網(wǎng)頁還在使用設(shè)計(jì)方式，而改用MVC。我將Ruby On Rails定為一個(gè)分界點(diǎn)是因?yàn)?，他顛覆了傳統(tǒng)動態(tài)網(wǎng)頁還在使用設(shè)計(jì)方式，而改用MVC。 但要注意的是Ruby On Rails儘管整合了Ajax與進(jìn)階Javascript函式庫，但還是沒有改變回傳完整或部分HTML的方式，意思便是HTML的產(chǎn)生始終在Server Side。但要注意的是Ruby On Rails盡管整合了Ajax與進(jìn)階Javascript函式庫，但還是沒有改變回傳完整或部分HTML的方式，意思便是HTML的產(chǎn)生始終在Server Side。

[ 編輯 ] Rich Internet Application [ 編輯 ] Rich Internet Application

一直到現(xiàn)在，有相當(dāng)多的Web應(yīng)用程式，都還是維持使用URL來切換各種功能與畫面。一直到現(xiàn)在，有相當(dāng)多的Web應(yīng)用程式，都還是維持使用URL來切換各種功能與畫面。 而這些以「頁面」為主的程式，並不太需要控制DOM，就不常遇到跨瀏覽器問題。而這些以「頁面」為主的程式，并不太需要控制DOM，就不常遇到跨瀏覽器問題。 然而自從Firefox逐漸也在市場佔(zhàn)有一席之地，Javascript的應(yīng)用普及之後，跨瀏覽器問題也接著發(fā)生。然而自從Firefox逐漸也在市場占有一席之地，Javascript的應(yīng)用普及之后，跨瀏覽器問題也接著發(fā)生。 為了避開各種不同的瀏覽器所帶來的問題，各大企業(yè)都獨(dú)力發(fā)展自己可以嵌入在瀏覽器的應(yīng)用程式。為了避開各種不同的瀏覽器所帶來的問題，各大企業(yè)都獨(dú)力發(fā)展自己可以嵌入在瀏覽器的應(yīng)用程式。 早期如Java Applet及微軟的的Active X，算是Rich Internet Application(RIA)的開始，但效能方面還是差強(qiáng)人意。早期如Java Applet及微軟的的Active X，算是Rich Internet Application(RIA)的開始，但效能方面還是差強(qiáng)人意。

直到2004年的時(shí)候，RIA出現(xiàn)了兩種不同的實(shí)做方法：一種是承襲以往需要安裝額外Runtime或是在特定瀏覽器才能執(zhí)行的方式，稱做Sandbox；另一種是只採用CSS,HTML，並以Javascript控制HTML DOM的Dynamic HTML方式，優(yōu)點(diǎn)就是只需要瀏覽器就可以執(zhí)行。直到2004年的時(shí)候，RIA出現(xiàn)了兩種不同的實(shí)做方法：一種是承襲以往需要安裝額外Runtime或是在特定瀏覽器才能執(zhí)行的方式，稱做Sandbox；另一種是只采用CSS,HTML，并以Javascript控制HTML DOM的Dynamic HTML方式，優(yōu)點(diǎn)就是只需要瀏覽器就可以執(zhí)行。 而後者也延伸出利用Offline Database或是Ajax+Web Service來傳送與儲存程式資料，並可以儲存成一個(gè)獨(dú)立頁面的Web應(yīng)用程式，稱做Single Page Application(SPA) 。而后者也延伸出利用Offline Database或是Ajax+Web Service來傳送與儲存程式資料，并可以儲存成一個(gè)獨(dú)立頁面的Web應(yīng)用程式，稱做Single Page Application(SPA) 。 SPA最典型的例子，就是Gmail。 SPA最典型的例子，就是Gmail。 Google盡力克服了跨瀏覽器的問題，將Javascript發(fā)揮的淋漓盡致，讓大家驚嘆光靠純粹的Web技術(shù)竟能做到如此程度。 Google盡力克服了跨瀏覽器的問題，將Javascript發(fā)揮的淋漓盡致，讓大家驚嘆光靠純粹的Web技術(shù)竟能做到如此程度。

而我將2005定為Sandbox RIA真正開始的年代，也是因?yàn)锳dobe併購Macromedia，而有了較完整的開發(fā)環(huán)境與資源，並不是以往單純地嵌入Flash。而我將2005定為Sandbox RIA真正開始的年代，也是因?yàn)锳dobe并購Macromedia，而有了較完整的開發(fā)環(huán)境與資源，并不是以往單純地嵌入Flash。 這個(gè)契機(jī)也促使微軟改變策略，比起效能較差的Asp.Net，而拿Sliverlight作為Web下一代主力軍。這個(gè)契機(jī)也促使微軟改變策略，比起效能較差的Asp.Net，而拿Sliverlight作為Web下一代主力軍。

RIA或SPA都是學(xué)習(xí)歷程長，語言多又複雜的Web應(yīng)用程式技術(shù)，也因此發(fā)展速度相當(dāng)緩慢，但不可小看的是這些優(yōu)點(diǎn)： RIA或SPA都是學(xué)習(xí)歷程長，語言多又復(fù)雜的Web應(yīng)用程式技術(shù)，也因此發(fā)展速度相當(dāng)緩慢，但不可小看的是這些優(yōu)點(diǎn)：

• 相較以往在Server上產(chǎn)生HTML並回傳至瀏覽器，任何畫面皆利用瀏覽器本身或附加的功能來產(chǎn)生。相較以往在Server上產(chǎn)生HTML并回傳至瀏覽器，任何畫面皆利用瀏覽器本身或附加的功能來產(chǎn)生。 形同於借用了Client Side CPU的運(yùn)算資源，減少Server成本。形同于借用了Client Side CPU的運(yùn)算資源，減少Server成本。 使用者感受到的互動性與回應(yīng)速度皆有大幅的提升。使用者感受到的互動性與回應(yīng)速度皆有大幅的提升。
• 由於Server並不是回傳複雜龐大的HTML，而是純粹傳輸資料，使用的頻寬也相對變小。由于Server并不是回傳復(fù)雜龐大的HTML，而是純粹傳輸資料，使用的頻寬也相對變小。
• Server Side除了使用傳統(tǒng)XML Web Service，更可以採用REST，讓Client的應(yīng)用程式可以更快速掌握資料的新增修改刪除(CRUD)。 Server Side除了使用傳統(tǒng)XML Web Service，更可以采用REST，讓Client的應(yīng)用程式可以更快速掌握資料的新增修改刪除(CRUD)。
• 能夠快速M(fèi)ashup其他的Web應(yīng)用程式資源，又能擁有高速的執(zhí)行效能。能夠快速M(fèi)ashup其他的Web應(yīng)用程式資源，又能擁有高速的執(zhí)行效能。

下表列出了Web技術(shù)的演進(jìn)，要注意到後三種技術(shù)集合，其時(shí)間是並行的：下表列出了Web技術(shù)的演進(jìn)，要注意到后三種技術(shù)集合，其時(shí)間是并行的：

表現(xiàn)層的演進(jìn)可以得知，不管是RIA利用sandbox或者是SPA利用DHTML作為表現(xiàn)層，相較起來傳統(tǒng)以文字HTML拼湊出畫面的作法已經(jīng)無法符合使用者的需求。表現(xiàn)層的演進(jìn)可以得知，不管是RIA利用sandbox或者是SPA利用DHTML作為表現(xiàn)層，相較起來傳統(tǒng)以文字HTML拼湊出畫面的作法已經(jīng)無法符合使用者的需求。 更動態(tài)，更彈性的作法才能讓使用者獲得操作感。更動態(tài)，更彈性的作法才能讓使用者獲得操作感。

而在邏輯層上，演進(jìn)到了SPA則是變得較為複雜。而在邏輯層上，演進(jìn)到了SPA則是變得較為復(fù)雜。 如果是使用Web Service作為Server Side，除了必須撰寫該語言外，也還是得撰寫Javascript來控制畫面的呈現(xiàn)。如果是使用Web Service作為Server Side，除了必須撰寫該語言外，也還是得撰寫Javascript來控制畫面的呈現(xiàn)。 而這也影響到開發(fā)方式，以往的編輯器多半著重一種主要的語言上，但現(xiàn)在的Web IDE多半都可以完整的處理所有瀏覽器的語言，及多種Server Side語言。而這也影響到開發(fā)方式，以往的編輯器多半著重一種主要的語言上，但現(xiàn)在的Web IDE多半都可以完整的處理所有瀏覽器的語言，及多種Server Side語言。 例如Aptana IDE就是最好的例子。例如Aptana IDE就是最好的例子。

資料層的演進(jìn)就比較簡單，直到RIA的時(shí)期，還是相當(dāng)依賴傳統(tǒng)的Database。資料層的演進(jìn)就比較簡單，直到RIA的時(shí)期，還是相當(dāng)依賴傳統(tǒng)的Database。 但SPA的時(shí)期，就可以採用Offline Database，這裡指的就是Google Gears 。但SPA的時(shí)期，就可以采用Offline Database，這里指的就是Google Gears 。 但如果要使用傳統(tǒng)的Online Database，全部都尚未有Javascript的Client，就必須透過Web Service來轉(zhuǎn)換資料。但如果要使用傳統(tǒng)的Online Database，全部都尚未有Javascript的Client，就必須透過Web Service來轉(zhuǎn)換資料。 而在SQL到ORM的演進(jìn)上，雖然使用物件導(dǎo)向的作法減緩執(zhí)行速度，但相對降低開發(fā)難度，帶來更大的價(jià)值。而在SQL到ORM的演進(jìn)上，雖然使用物件導(dǎo)向的作法減緩執(zhí)行速度，但相對降低開發(fā)難度，帶來更大的價(jià)值。

[ 編輯 ] 小結(jié) [ 編輯 ] 小結(jié)

本篇說明了Web技術(shù)的歷史，來帶出現(xiàn)今的Web技術(shù)。本篇說明了Web技術(shù)的歷史，來帶出現(xiàn)今的Web技術(shù)。 下一篇要介紹的是Single Page Application與它在Ruby On Rails上的應(yīng)用。下一篇要介紹的是Single Page Application與它在Ruby On Rails上的應(yīng)用。