[ 編輯 ] Single Page Application [ 编辑 ] Single Page Application

[ 編輯 ] 所依賴的Web技術 [ 编辑 ] 所依赖的Web技术

Ajax為Asynchorous Javascript And XML ，早期Ajax被用作來傳輸單純的HTML或是XML，並且利用DOM的innerHTML屬性來更新部分HTML內容。 Ajax为Asynchorous Javascript And XML ，早期Ajax被用作来传输单纯的HTML或是XML，并且利用DOM的innerHTML属性来更新部分HTML内容。 如今Ajax在SPA中被當作重要的傳輸媒介(Transport)，無論範本資料到應用程式資料，都是利用Ajax在背景傳輸完後，再由Javascript Template來產生HTML。如今Ajax在SPA中被当作重要的传输媒介(Transport)，无论范本资料到应用程式资料，都是利用Ajax在背景传输完后，再由Javascript Template来产生HTML。

JSON為Javascript Simple Object Notation ，在標準的Javascript語法中，以{ }及[ ]這兩個語法，可以宣告物件與陣列，並可以使用eval函式將他轉換為Javascript物件。 JSON为Javascript Simple Object Notation ，在标准的Javascript语法中，以{ }及[ ]这两个语法，可以宣告物件与阵列，并可以使用eval函式将他转换为Javascript物件。 例如object=eval("({a:'b'})")，此時object物件便有一個屬性"a"其值為"b"。例如object=eval("({a:'b'})")，此时object物件便有一个属性"a"其值为"b"。 在SPA中，JSON被運用來作為一種資料格式，藉此取代複雜的XML，以節省頻寬。在SPA中，JSON被运用来作为一种资料格式，借此取代复杂的XML，以节省频宽。 而傳輸的JSON資料又可以快速還原為javascrip物件，又更節省程式執行的時間。而传输的JSON资料又可以快速还原为javascrip物件，又更节省程式执行的时间。

在SPA中， HTML DOM是一個最重要的元素，尤其是DIV及SPAN等Container的操作更是。在SPA中， HTML DOM是一个最重要的元素，尤其是DIV及SPAN等Container的操作更是。 由於絕大多數的畫面都不進行任何換頁的動作，程式裡大部分都是在控制DOM及Container。由于绝大多数的画面都不进行任何换页的动作，程式里大部分都是在控制DOM及Container。 而對於A (Anchor)而言，href裡的URL也沒有太大意義，多半都是在onclick裡寫javascript，或是用Javascript函式庫去bind onclick事件。而对于A (Anchor)而言，href里的URL也没有太大意义，多半都是在onclick里写javascript，或是用Javascript函式库去bind onclick事件。 由於直接呼叫瀏覽器提供的DOM函式庫功能，會遇到像IE一樣不符合W3C規格的問題。由于直接呼叫浏览器提供的DOM函式库功能，会遇到像IE一样不符合W3C规格的问题。 要選用一個合適的Javascript擴充函式庫，如Prototype.js或是jQuery，如此才不會有太多跨瀏覽器問題。要选用一个合适的Javascript扩充函式库，如Prototype.js或是jQuery，如此才不会有太多跨浏览器问题。

CSS在以往的Web應用程式中，多半都拿來當作畫面的修飾，布景主題或是顏色特校。 CSS在以往的Web应用程式中，多半都拿来当作画面的修饰，布景主题或是颜色特校。 但在SPA中，必須要熟悉CSS的Dimentation (長寬控制)， Classification (顯示行為)， Positioning (定位)。但在SPA中，必须要熟悉CSS的Dimentation (长宽控制)， Classification (显示行为)， Positioning (定位)。 在無法換頁的狀況下， 只能靠著移動，隱藏，顯示這些方法來控制畫面的元素。在无法换页的状况下，只能靠着移动，隐藏，显示这些方法来控制画面的元素。 如果要瞭解這些進階CSS的主題，都可以在w3school裡的教學找到。如果要了解这些进阶CSS的主题，都可以在w3school里的教学找到。

Trimpath是Google為了SPA而開發出來的一個函式庫集合，也可以說是Rails的Javascript版。 Trimpath是Google为了SPA而开发出来的一个函式库集合，也可以说是Rails的Javascript版。 如果要撰寫下面所說第一種SPA，就必須利用到Trimpath的全部，而第二種只需要用到Trimpath Javascript Template即可。如果要撰写下面所说第一种SPA，就必须利用到Trimpath的全部，而第二种只需要用到Trimpath Javascript Template即可。 Javascript Template(JST)如同PHP的Smarty一樣，是標準的範本技術，只是採用的語言是Javascript。 Javascript Template(JST)如同PHP的Smarty一样，是标准的范本技术，只是采用的语言是Javascript。 為了撰寫SPA，必須要好好地運用JST。为了撰写SPA，必须要好好地运用JST。

快取的機制在SPA也相當的重要，為了達到讓使用者感受到程式的反應快速，就必須應用多方面的快取。快取的机制在SPA也相当的重要，为了达到让使用者感受到程式的反应快速，就必须应用多方面的快取。

• View Cache：SPA中的View就是指已經顯示出來的HTML，很多常用，而不需要經常改變的HTML，就可以將放在Container(DIV或SPAN)裡。 View Cache：SPA中的View就是指已经显示出来的HTML，很多常用，而不需要经常改变的HTML，就可以将放在Container(DIV或SPAN)里。 不用的時候就隱藏，需要的時候就顯示。不用的时候就隐藏，需要的时候就显示。 而另一種方式是可以用z-index將選單或是清單的Container放在最下層，而要回到這個清單的時候就將蓋在其上的container隱藏。而另一种方式是可以用z-index将选单或是清单的Container放在最下层，而要回到这个清单的时候就将盖在其上的container隐藏。
• Template Cache：一般來說JST的範本資料只要讀取一次就可以，又因為這些只是字串，可以直接就存在Hash裡。 Template Cache：一般来说JST的范本资料只要读取一次就可以，又因为这些只是字串，可以直接就存在Hash里。
• Javascript Cache：在我提出的SPA實做中，有一個特性是將各個JST的「行為」程式碼分開，就如同sap.net將aspx與cs檔分開的作法一樣。 Javascript Cache：在我提出的SPA实做中，有一个特性是将各个JST的「行为」程式码分开，就如同sap.net将aspx与cs档分开的作法一样。 而如果採用這個作法，不需要重複讀取的javascript就必須要快取。而如果采用这个作法，不需要重复读取的javascript就必须要快取。
• Data Cache：資料快取是最難的一部份，牽扯到了快取一致性的問題。 Data Cache：资料快取是最难的一部份，牵扯到了快取一致性的问题。 而現在在javascript中並沒有對於XML或JSON的資料快取解決方案，未來如果能夠有這樣的函式庫，就能夠更提升整體的效率。而现在在javascript中并没有对于XML或JSON的资料快取解决方案，未来如果能够有这样的函式库，就能够更提升整体的效率。

以上說明的都是Client Side所必須要使用到的技術，而Server Side的技術多半與Service Design息息相關。以上说明的都是Client Side所必须要使用到的技术，而Server Side的技术多半与Service Design息息相关。

REST為Representational State Transfer ，他比較像是一種設計樣式(Design Pattern)，而不是Web技術。 REST为Representational State Transfer ，他比较像是一种设计样式(Design Pattern)，而不是Web技术。 在以往Web應用程式的規劃中，URL並不完全具有意義，傳輸的內容型態多半是HTML，而HTTP的各種動作也並未完全利用。在以往Web应用程式的规划中，URL并不完全具有意义，传输的内容型态多半是HTML，而HTTP的各种动作也并未完全利用。 在SPA中，由於需要在不同時間傳輸各種資料，如HTML範本，JS範本，或是XML及JSON資料。在SPA中，由于需要在不同时间传输各种资料，如HTML范本，JS范本，或是XML及JSON资料。 此時REST的設計技巧就可以節省下很多重複的命名，而讓程式碼整體更有意義。此时REST的设计技巧就可以节省下很多重复的命名，而让程式码整体更有意义。 支援REST設計樣式的Web Framework如Ruby On Rails，讓整體設計較為簡單。支援REST设计样式的Web Framework如Ruby On Rails，让整体设计较为简单。

[ 編輯 ] SPA的架構 [ 编辑 ] SPA的架构

SPA就分類而言，算是RIA的一種，只是不採用任何的sandbox而已。 SPA就分类而言，算是RIA的一种，只是不采用任何的sandbox而已。 典型的SPA是不需要任何的後端的Web Service或是Offline Database，只需要一個htm檔或是一個網頁就能夠運作，如微軟的HyperText Application(HTA)就是，但還是缺乏完善的資料儲存能力。典型的SPA是不需要任何的后端的Web Service或是Offline Database，只需要一个htm档或是一个网页就能够运作，如微软的HyperText Application(HTA)就是，但还是缺乏完善的资料储存能力。

第一種SPA程式，如同著名的Google Reader離線版，具有一個離線資料庫與一個同步管理程式，在有網路連線的時候，會將資料同步回線上的資料庫。第一种SPA程式，如同著名的Google Reader离线版，具有一个离线资料库与一个同步管理程式，在有网路连线的时候，会将资料同步回线上的资料库。 這個最大的優點就是完全利用了Client的CPU資源，使用者雖然看見的是網頁，但卻是在使用在本機執行的獨立應用程式，因此速度是相當流暢。这个最大的优点就是完全利用了Client的CPU资源，使用者虽然看见的是网页，但却是在使用在本机执行的独立应用程式，因此速度是相当流畅。 比起一般的動態網頁，這樣子的使用體驗更能夠顛覆一般人對於「網頁」的看法，而逐漸瞭解何謂Web應用程式。比起一般的动态网页，这样子的使用体验更能够颠覆一般人对于「网页」的看法，而逐渐了解何谓Web应用程式。 另一個例子是使用Trimpath函式庫撰寫成的NextAction，是一個多功能的ToDo List。另一个例子是使用Trimpath函式库撰写成的NextAction，是一个多功能的ToDo List。

另一種就是較簡單的SPA，不具有離線瀏覽的能力，但是承襲了使用javascript的高效能。另一种就是较简单的SPA，不具有离线浏览的能力，但是承袭了使用javascript的高效能。 必須提及的是Server Side並不是採用XML，而是可以快速轉換為Javascript物件的JSON，來當作Web Service。必须提及的是Server Side并不是采用XML，而是可以快速转换为Javascript物件的JSON，来当作Web Service。 如此Server Side的語言只需要具備能夠快速將物件serialize成JSON的能力即可。如此Server Side的语言只需要具备能够快速将物件serialize成JSON的能力即可。

[ 編輯 ] Rails與SPA [ 编辑 ] Rails与SPA

這個小節所要說明的是相當技術性的部分，無法說明的太詳細，有興趣的讀者可以寫mail一起討論。这个小节所要说明的是相当技术性的部分，无法说明的太详细，有兴趣的读者可以写mail一起讨论。 為了簡化觀念，我使用Sequence Diagram來說明Rails要如何應用在SPA上：为了简化观念，我使用Sequence Diagram来说明Rails要如何应用在SPA上：

• URLRequester是一個javascript函式，主要的工作就是以REST方式對一個URL進行不同Content-Type的Request，並且將回傳的資料產生HTML，並填到container裡顯示出來。 URLRequester是一个javascript函式，主要的工作就是以REST方式对一个URL进行不同Content-Type的Request，并且将回传的资料产生HTML，并填到container里显示出来。
• HTTPRequest在這裡作為進行Ajax呼叫的傳輸媒介。 HTTPRequest在这里作为进行Ajax呼叫的传输媒介。
• RailsController表示伺服器端對應至特定URL的程式，在這裡也必須使用REST方式來回應。 RailsController表示伺服器端对应至特定URL的程式，在这里也必须使用REST方式来回应。 也因此如果要求content-type為HTML的時候就傳JST範本，要求JSON的時候就傳資料，要求javascript的時候就傳javascript文件。也因此如果要求content-type为HTML的时候就传JST范本，要求JSON的时候就传资料，要求javascript的时候就传javascript文件。
• RailsModel代表伺服器端的資料庫，在要求資料的時候，勢必定要連資料庫來取得資料的。 RailsModel代表伺服器端的资料库，在要求资料的时候，势必定要连资料库来取得资料的。 而回傳的時候，就將ruby物件serialize成JSON。而回传的时候，就将ruby物件serialize成JSON。

1. Client呼叫URLRequester函式，例如http://servername/controller/action/id。 Client呼叫URLRequester函式，例如http://servername/controller/action/id。
2. HTTPRequest送出一個要求，並指定Content-Type為HTML。 HTTPRequest送出一个要求，并指定Content-Type为HTML。
3. RailsController接到指定的URL，並執行controller#action。 RailsController接到指定的URL，并执行controller#action。 我將JST寫在rhtml裡面，JST基本上也是html，不過是範本的標籤換成{}而已。我将JST写在rhtml里面，JST基本上也是html，不过是范本的标签换成{}而已。 因為REST設計方式會因為指定的content-type回傳對應的型態，此時直接將內容的JST文件傳回。因为REST设计方式会因为指定的content-type回传对应的型态，此时直接将内容的JST文件传回。
4. 在前面我有提及快取的重要性，所以這裡就快取住這個JST，下次要求同樣的內容就可以直接使用而不用重複傳輸。在前面我有提及快取的重要性，所以这里就快取住这个JST，下次要求同样的内容就可以直接使用而不用重复传输。
5. 對於同一個URL，使用HTTPRequest送出要求，並指定Content-Type為JSON。对于同一个URL，使用HTTPRequest送出要求，并指定Content-Type为JSON。
6. 因為REST的特性，這次會執行到content-type為JSON時的程式碼，接著就可以照一般方式使用Rails Model讀取資料庫。因为REST的特性，这次会执行到content-type为JSON时的程式码，接着就可以照一般方式使用Rails Model读取资料库。
7. Model傳回的Ruby物件，當然就要轉換成JSON回傳。 Model传回的Ruby物件，当然就要转换成JSON回传。 而在ruby中相當簡單地便是呼叫to_json就可以轉換了。而在ruby中相当简单地便是呼叫to_json就可以转换了。
8. 回傳的JSON，併和剛剛快取的JST，使用trimpath javascript template函式庫產生成HTML，並更新至container裡。回传的JSON，并和刚刚快取的JST，使用trimpath javascript template函式库产生成HTML，并更新至container里。
9. 在這裡我採用行為javascript程式碼與範本分離的方式，所以還是以HTTPRequest再次傳送要求，並將Content-Type指定為Javascript。在这里我采用行为javascript程式码与范本分离的方式，所以还是以HTTPRequest再次传送要求，并将Content-Type指定为Javascript。
10. 同樣地根據要求的content-type，會回傳javascript文件。同样地根据要求的content-type，会回传javascript文件。
11. 快取，並呼叫eval執行回傳的javascript。快取，并呼叫eval执行回传的javascript。
12. 將container顯示在想要放置的畫面區域。将container显示在想要放置的画面区域。

[ 編輯 ] 結論 [ 编辑 ] 结论

許多人都在說Web 2.0可能又是另一次的泡沫化，這個熱潮怎樣開始的，又怎樣消退的，也是相當明顯。许多人都在说Web 2.0可能又是另一次的泡沫化，这个热潮怎样开始的，又怎样消退的，也是相当明显。 網路上對於各種新技術名詞的炒作，將不同應用層次的技術，全部攪和在一起說明或稱做是最終解決方案，也模糊了使用者的眼睛。网路上对于各种新技术名词的炒作，将不同应用层次的技术，全部搅和在一起说明或称做是最终解决方案，也模糊了使用者的眼睛。 那麼，在這個時代，到底還有什麼可以相信，可以學習的？那么，在这个时代，到底还有什么可以相信，可以学习的？

唯一能夠做的就是重新審視這些技術，瞭解因果。唯一能够做的就是重新审视这些技术，了解因果。 就可以知道哪些作法是適合用在自己現在的專案，那些是本質相同的，哪些是跨大其詞的。就可以知道哪些作法是适合用在自己现在的专案，那些是本质相同的，哪些是跨大其词的。 根本的觀念正確，就不需要擔心這些延伸的技術是否會有誤解或誤用。根本的观念正确，就不需要担心这些延伸的技术是否会有误解或误用。