本篇文章要從以往的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技术的演进，要注意到后三种技术集合，其时间是并行的：
| 靜態網頁 静态网页 | 動態網頁程式 动态网页程式 | Web應用程式 Web应用程式 | Rich Internet Application with Sandbox Rich Internet Application with Sandbox | Single Page Application Single Page Application | |
| 時期 时期 | 2000以前 2000以前 | 2000(php4釋出)~2004 2000(php4释出)~2004 | 2004(Ruby On Rails釋出)以後 2004(Ruby On Rails释出)以后 | 2005(macromedia被adobe併購)以後 2005(macromedia被adobe并购)以后 | 2004(Gmail釋出beta)以後 2004(Gmail释出beta)以后 |
| 表現層 表现层 | CSS CSS | CSS,HTML,Javascript CSS,HTML,Javascript | CSS,HTML,Javascript CSS,HTML,Javascript | Flash, Sliverlight Flash, Sliverlight | CSS,HTML(DOM) CSS,HTML(DOM) |
| 邏輯層 逻辑层 | Javascript Javascript | Template或自行撰寫 Template或自行撰写 | Web Framework Web Framework | Action Script, C# Action Script, C# | Javascript或是撰寫Web Service的語言 Javascript或是撰写Web Service的语言 |
| 資料層 资料层 | HTML HTML | Database(SQL) Database(SQL) | Database(ORM) Database(ORM) | Database(ORM) Database(ORM) | Offline Database, Web Service Offline Database, Web Service |
| 開發方式 开发方式 | 網頁編輯程式网页编辑程式 | 整合HTML及Server Side語言的編輯器整合HTML及Server Side语言的编辑器 | 整合Web Framework的IDE整合Web Framework的IDE | 整合Sandbox的IDE整合Sandbox的IDE | 整合Server Side與Client Side語言的IDE整合Server Side与Client Side语言的IDE |
| 運算資源 运算资源 | 所有資料直接透過Web Server送出，除了硬碟讀取，幾乎不需要額外的運算所有资料直接透过Web Server送出，除了硬碟读取，几乎不需要额外的运算 | 因為使用了Server Side語言來Render表現層，運算多半會消耗在Server因为使用了Server Side语言来Render表现层，运算多半会消耗在Server | 因為使用了Server Side語言來Render表現層，運算多半會消耗在Server因为使用了Server Side语言来Render表现层，运算多半会消耗在Server | 運算資源平均被分散在Server及Client，但Client需要Sandbox去執行，所以會消耗更多CPU資源运算资源平均被分散在Server及Client，但Client需要Sandbox去执行，所以会消耗更多CPU资源 | 運算資源平均被分散在Server及Client运算资源平均被分散在Server及Client |
| 資料格式 资料格式 | 傳送完整的HTML传送完整的HTML | 傳送完整的HTML传送完整的HTML | 傳送部分或完整的HTML传送部分或完整的HTML | 只需第一次傳送HTML及內嵌程式(Flash或Sliverlight)，其餘傳送XML只需第一次传送HTML及内嵌程式(Flash或Sliverlight)，其余传送XML | 只需第一次傳送HTML及Javascript，其餘可傳送XML或JSON只需第一次传送HTML及Javascript，其余可传送XML或JSON |
| 優點 优点 | 簡單易學简单易学 | 學習同一種Server Side語言，搭配簡單的HTML,CSS,JS觀念便能夠有成果学习同一种Server Side语言，搭配简单的HTML,CSS,JS观念便能够有成果 | 整合Ajax或進階Javascript函式庫，REST及MVC。整合Ajax或进阶Javascript函式库，REST及MVC。 使得設計概念更為物件導向化使得设计概念更为物件导向化 | 使用者介面反應快速，變化多且美觀。使用者介面反应快速，变化多且美观。 兼顧視窗程式的反應速度，且能部分相容傳統HTML應用。兼顾视窗程式的反应速度，且能部分相容传统HTML应用。 | 完全相容傳統HTML應用，及任何可能的Web應用程式Mashup。完全相容传统HTML应用，及任何可能的Web应用程式Mashup。 可以採用不同的傳輸方式，併和REST及瀏覽器快取來節省頻寬，使得整體反應相當快速。可以采用不同的传输方式，并和REST及浏览器快取来节省频宽，使得整体反应相当快速。 |
| 缺點 缺点 | 無法讓使用者儲存任何應用程式資料，任何資料必須藉由人工設計无法让使用者储存任何应用程式资料，任何资料必须藉由人工设计 | 對於龐大的應用程式，便得花上大量的Server成本。对于庞大的应用程式，便得花上大量的Server成本。 程式反應速度受限於伺服器負載，需要叢集架構來彌補。程式反应速度受限于伺服器负载，需要丛集架构来弥补。 | 設計方式更為簡單快速，但相對於傳統的動態網頁程式付出更大的Server成本。设计方式更为简单快速，但相对于传统的动态网页程式付出更大的Server成本。 | 除了CSS,HTML,JS以外還需學習一兩種不同的語言才能進行開發。除了CSS,HTML,JS以外还需学习一两种不同的语言才能进行开发。 RIA通常程式資料較大，在開始使用前必須等候一段下載時間。 RIA通常程式资料较大，在开始使用前必须等候一段下载时间。 | 除了CSS,HTML,JS以外還需學習一種撰寫Web Service的語言。除了CSS,HTML,JS以外还需学习一种撰写Web Service的语言。 需要相當熟悉DOM及CSS，也需考慮瀏覽器的差異，開發起來相對地困難許多。需要相当熟悉DOM及CSS，也需考虑浏览器的差异，开发起来相对地困难许多。 |
表現層的演進可以得知，不管是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上的应用。