本篇文章要從以往的Server Side Web應用程式，其開發方式與演進來介紹Single Page Application(SPA) 與現今所有Web技術。本篇文章要从以往的Server Side Web应用程式，其开发方式与演进来介绍Single Page Application(SPA)与现今所有Web技术。

我在Web 2.0過去，現在與未來及介紹Ruby On Rails都有提到一些Web技術的演進，比較明顯的趨勢就是從靜態到動態頁面，而設計的方式也更程式化。我在Web 2.0过去，现在与未来及介绍Ruby On Rails都有提到一些Web技术的演进，比较明显的趋势就是从静态到动态页面，而设计的方式也更程式化。 而在Web2.0：過去，現在及未來«就是愛程式也有讀者在前言提到，技術並不是將一個名詞安上去就好。而在Web2.0：过去，现在及未来«就是爱程式也有读者在前言提到，技术并不是将一个名词安上去就好。 我相當贊同這句話，因此也在這篇文章中希望來做個總整理，以技術及歷史來看看Web是怎樣成長的。我相当赞同这句话，因此也在这篇文章中希望来做个总整理，以技术及历史来看看Web是怎样成长的。

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

[ 編輯 ] Web應用程式的演進 [ 编辑 ] Web应用程式的演进

[ 編輯 ] 動態網頁 [ 编辑 ] 动态网页

儘管Web並不是一個三言兩語能拿個版本號碼來解釋，但實際上Web技術確實有些明顯的分隔點。尽管Web并不是一个三言两语能拿个版本号码来解释，但实际上Web技术确实有些明显的分隔点。

最早期我們熟知的就是靜態網頁，這應該沒啥問題。最早期我们熟知的就是静态网页，这应该没啥问题。 儘管在2000前，php,asp就開始流行，坊間的書上也都稱之為動態網頁。尽管在2000前，php,asp就开始流行，坊间的书上也都称之为动态网页。 而我在此提及的動態網頁程式 ，實際上卻是從php4釋出的那一年開始。而我在此提及的动态网页程式 ，实际上却是从php4释出的那一年开始。 這邊要讓大家瞭解的分界點，其實是php4開始被許多商業公司所採用，而軟體的形式也更為套裝化，而不再像之前大家認定的「動態」網頁僅僅只是拿來完成一些簡單的區塊來與一般的靜態網頁整合。这边要让大家了解的分界点，其实是php4开始被许多商业公司所采用，而软体的形式也更为套装化，而不再像之前大家认定的「动态」网页仅仅只是拿来完成一些简单的区块来与一般的静态网页整合。

在2004年的時候，Web Framework的產生，創造了Web應用程式另一個新的高峰。在2004年的时候，Web Framework的产生，创造了Web应用程式另一个新的高峰。 而在這個時候也開始有一些Rich Web Client概念的雛形了。而在这个时候也开始有一些Rich Web Client概念的雏形了。 我將Ruby On Rails定為一個分界點是因為，他顛覆了傳統動態網頁還在使用設計方式，而改用MVC。我将Ruby On Rails定为一个分界点是因为，他颠覆了传统动态网页还在使用设计方式，而改用MVC。 但要注意的是Ruby On Rails儘管整合了Ajax與進階Javascript函式庫，但還是沒有改變回傳完整或部分HTML的方式，意思便是HTML的產生始終在Server Side。但要注意的是Ruby On Rails尽管整合了Ajax与进阶Javascript函式库，但还是没有改变回传完整或部分HTML的方式，意思便是HTML的产生始终在Server Side。

[ 編輯 ] Rich Internet Application [ 编辑 ] Rich Internet Application

一直到現在，有相當多的Web應用程式，都還是維持使用URL來切換各種功能與畫面。一直到现在，有相当多的Web应用程式，都还是维持使用URL来切换各种功能与画面。 而這些以「頁面」為主的程式，並不太需要控制DOM，就不常遇到跨瀏覽器問題。而这些以「页面」为主的程式，并不太需要控制DOM，就不常遇到跨浏览器问题。 然而自從Firefox逐漸也在市場佔有一席之地，Javascript的應用普及之後，跨瀏覽器問題也接著發生。然而自从Firefox逐渐也在市场占有一席之地，Javascript的应用普及之后，跨浏览器问题也接着发生。 為了避開各種不同的瀏覽器所帶來的問題，各大企業都獨力發展自己可以嵌入在瀏覽器的應用程式。为了避开各种不同的浏览器所带来的问题，各大企业都独力发展自己可以嵌入在浏览器的应用程式。 早期如Java Applet及微軟的的Active X，算是Rich Internet Application(RIA)的開始，但效能方面還是差強人意。早期如Java Applet及微软的的Active X，算是Rich Internet Application(RIA)的开始，但效能方面还是差强人意。

直到2004年的時候，RIA出現了兩種不同的實做方法：一種是承襲以往需要安裝額外Runtime或是在特定瀏覽器才能執行的方式，稱做Sandbox；另一種是只採用CSS,HTML，並以Javascript控制HTML DOM的Dynamic HTML方式，優點就是只需要瀏覽器就可以執行。直到2004年的时候，RIA出现了两种不同的实做方法：一种是承袭以往需要安装额外Runtime或是在特定浏览器才能执行的方式，称做Sandbox；另一种是只采用CSS,HTML，并以Javascript控制HTML DOM的Dynamic HTML方式，优点就是只需要浏览器就可以执行。 而後者也延伸出利用Offline Database或是Ajax+Web Service來傳送與儲存程式資料，並可以儲存成一個獨立頁面的Web應用程式，稱做Single Page Application(SPA) 。而后者也延伸出利用Offline Database或是Ajax+Web Service来传送与储存程式资料，并可以储存成一个独立页面的Web应用程式，称做Single Page Application(SPA) 。 SPA最典型的例子，就是Gmail。 SPA最典型的例子，就是Gmail。 Google盡力克服了跨瀏覽器的問題，將Javascript發揮的淋漓盡致，讓大家驚嘆光靠純粹的Web技術竟能做到如此程度。 Google尽力克服了跨浏览器的问题，将Javascript发挥的淋漓尽致，让大家惊叹光靠纯粹的Web技术竟能做到如此程度。

而我將2005定為Sandbox RIA真正開始的年代，也是因為Adobe併購Macromedia，而有了較完整的開發環境與資源，並不是以往單純地嵌入Flash。而我将2005定为Sandbox RIA真正开始的年代，也是因为Adobe并购Macromedia，而有了较完整的开发环境与资源，并不是以往单纯地嵌入Flash。 這個契機也促使微軟改變策略，比起效能較差的Asp.Net，而拿Sliverlight作為Web下一代主力軍。这个契机也促使微软改变策略，比起效能较差的Asp.Net，而拿Sliverlight作为Web下一代主力军。

RIA或SPA都是學習歷程長，語言多又複雜的Web應用程式技術，也因此發展速度相當緩慢，但不可小看的是這些優點： RIA或SPA都是学习历程长，语言多又复杂的Web应用程式技术，也因此发展速度相当缓慢，但不可小看的是这些优点：

• 相較以往在Server上產生HTML並回傳至瀏覽器，任何畫面皆利用瀏覽器本身或附加的功能來產生。相较以往在Server上产生HTML并回传至浏览器，任何画面皆利用浏览器本身或附加的功能来产生。 形同於借用了Client Side CPU的運算資源，減少Server成本。形同于借用了Client Side CPU的运算资源，减少Server成本。 使用者感受到的互動性與回應速度皆有大幅的提升。使用者感受到的互动性与回应速度皆有大幅的提升。
• 由於Server並不是回傳複雜龐大的HTML，而是純粹傳輸資料，使用的頻寬也相對變小。由于Server并不是回传复杂庞大的HTML，而是纯粹传输资料，使用的频宽也相对变小。
• Server Side除了使用傳統XML Web Service，更可以採用REST，讓Client的應用程式可以更快速掌握資料的新增修改刪除(CRUD)。 Server Side除了使用传统XML Web Service，更可以采用REST，让Client的应用程式可以更快速掌握资料的新增修改删除(CRUD)。
• 能夠快速Mashup其他的Web應用程式資源，又能擁有高速的執行效能。能够快速Mashup其他的Web应用程式资源，又能拥有高速的执行效能。

下表列出了Web技術的演進，要注意到後三種技術集合，其時間是並行的：下表列出了Web技术的演进，要注意到后三种技术集合，其时间是并行的：

表現層的演進可以得知，不管是RIA利用sandbox或者是SPA利用DHTML作為表現層，相較起來傳統以文字HTML拼湊出畫面的作法已經無法符合使用者的需求。表现层的演进可以得知，不管是RIA利用sandbox或者是SPA利用DHTML作为表现层，相较起来传统以文字HTML拼凑出画面的作法已经无法符合使用者的需求。 更動態，更彈性的作法才能讓使用者獲得操作感。更动态，更弹性的作法才能让使用者获得操作感。

而在邏輯層上，演進到了SPA則是變得較為複雜。而在逻辑层上，演进到了SPA则是变得较为复杂。 如果是使用Web Service作為Server Side，除了必須撰寫該語言外，也還是得撰寫Javascript來控制畫面的呈現。如果是使用Web Service作为Server Side，除了必须撰写该语言外，也还是得撰写Javascript来控制画面的呈现。 而這也影響到開發方式，以往的編輯器多半著重一種主要的語言上，但現在的Web IDE多半都可以完整的處理所有瀏覽器的語言，及多種Server Side語言。而这也影响到开发方式，以往的编辑器多半着重一种主要的语言上，但现在的Web IDE多半都可以完整的处理所有浏览器的语言，及多种Server Side语言。 例如Aptana IDE就是最好的例子。例如Aptana IDE就是最好的例子。

資料層的演進就比較簡單，直到RIA的時期，還是相當依賴傳統的Database。资料层的演进就比较简单，直到RIA的时期，还是相当依赖传统的Database。 但SPA的時期，就可以採用Offline Database，這裡指的就是Google Gears 。但SPA的时期，就可以采用Offline Database，这里指的就是Google Gears 。 但如果要使用傳統的Online Database，全部都尚未有Javascript的Client，就必須透過Web Service來轉換資料。但如果要使用传统的Online Database，全部都尚未有Javascript的Client，就必须透过Web Service来转换资料。 而在SQL到ORM的演進上，雖然使用物件導向的作法減緩執行速度，但相對降低開發難度，帶來更大的價值。而在SQL到ORM的演进上，虽然使用物件导向的作法减缓执行速度，但相对降低开发难度，带来更大的价值。

[ 編輯 ] 小結 [ 编辑 ] 小结

本篇說明了Web技術的歷史，來帶出現今的Web技術。本篇说明了Web技术的历史，来带出现今的Web技术。 下一篇要介紹的是Single Page Application與它在Ruby On Rails上的應用。下一篇要介绍的是Single Page Application与它在Ruby On Rails上的应用。