Single Page Application所依賴的Web技術Ajax為Asynchorous Javascript And XML, 早期Ajax被用作來傳輸單純的HTML或是XML,並且利用DOM的innerHTML屬性來更新部分HTML內容。如今Ajax在SPA中被當作重要 的傳輸媒介(Transport),無論範本資料到應用程式資料,都是利用Ajax在背景傳輸完後,再由Javascript Template來產生HTML。 JSON為Javascript Simple Object Notation, 在標準的Javascript語法中,以{ }及[ ]這兩個語法,可以宣告物件與陣列,並可以使用eval函式將他轉換為Javascript物件。例如object=eval(" ({a:'b'})"),此時object物件便有一個屬性"a"其值為"b"。在SPA中,JSON被運用來作為一種資料格式,藉此取代複雜的XML, 以節省頻寬。而傳輸的JSON資料又可以快速還原為javascrip物件,又更節省程式執行的時間。 在SPA中,HTML DOM是一個最重要的元素,尤其是DIV及SPAN等Container的操作 更是。由於絕大多數的畫面都不進行任何換頁的動作,程式裡大部分都是在控制DOM及Container。而對於A (Anchor)而言,href裡的URL也沒有太大意義,多半都是在onclick裡寫javascript,或是用Javascript函式庫去 bind onclick事件。由於直接呼叫瀏覽器提供的DOM函式庫功能,會遇到像IE一樣不符合W3C規格的問題。要選用一個合適的Javascript擴充函 式庫,如Prototype.js或是jQuery,如此才不會有太多跨瀏覽器問題。 CSS在以往的Web應用程式中,多半都拿來當作畫面的修飾,布景主題或是顏色特校。但在SPA中,必須要熟悉CSS的Dimentation(長寬控制),Classification(顯示行為),Positioning(定位)。在無法換頁的狀況下, 只能靠著移動,隱藏,顯示這些方法來控制畫面的元素。如果要瞭解這些進階CSS的主題,都可以在w3school裡的教學找到。 Trimpath是Google為了SPA而開發出來的一個函式庫集合,也可以說是Rails的Javascript版。如果要撰寫下面所說第一種SPA,就必須利用到Trimpath的全部,而第二種只需要用到Trimpath Javascript Template即可。Javascript Template(JST)如同PHP的Smarty一樣,是標準的範本技術,只是採用的語言是Javascript。為了撰寫SPA,必須要好好地運用JST。 快取的機制在SPA也相當的重要,為了達到讓使用者感受到程式的反應快速,就必須應用多方面的快取。
以上說明的都是Client Side所必須要使用到的技術,而Server Side的技術多半與Service Design息息相關。 REST為Representational State Transfer, 他比較像是一種設計樣式(Design Pattern),而不是Web技術。在以往Web應用程式的規劃中,URL並不完全具有意義,傳輸的內容型態多半是HTML,而HTTP的各種動作也並 未完全利用。在SPA中,由於需要在不同時間傳輸各種資料,如HTML範本,JS範本,或是XML及JSON資料。此時REST的設計技巧就可以節省下很 多重複的命名,而讓程式碼整體更有意義。支援REST設計樣式的Web Framework如Ruby On Rails,讓整體設計較為簡單。 SPA的架構SPA就分類而言,算是RIA的一種,只是不採用任何的sandbox而已。典型的SPA是不需要任何的後端的Web
Service或是Offline Database,只需要一個htm檔或是一個網頁就能夠運作,如微軟的HyperText
Application(HTA)就是,但還是缺乏完善的資料儲存能力。 另一種就是較簡單的SPA,不具有離線瀏覽的能力,但是承襲了使用javascript的高效能。必須提及的是Server Side並不是採用XML,而是可以快速轉換為Javascript物件的JSON,來當作Web Service。如此Server Side的語言只需要具備能夠快速將物件serialize成JSON的能力即可。 Rails與SPA這個小節所要說明的是相當技術性的部分,無法說明的太詳細,有興趣的讀者可以寫mail一起討論。為了簡化觀念,我使用Sequence Diagram來說明Rails要如何應用在SPA上:
結論許多人都在說Web 2.0可能又是另一次的泡沫化,這個熱潮怎樣開始的,又怎樣消退的,也是相當明顯。網路上對於各種新技術名詞的炒作,將不同應用層次的技術,全部攪和在一 起說明或稱做是最終解決方案,也模糊了使用者的眼睛。那麼,在這個時代,到底還有什麼可以相信,可以學習的? 唯一能夠做的就是重新審視這些技術,瞭解因果。就可以知道哪些作法是適合用在自己現在的專案,那些是本質相同的,哪些是跨大其詞的。根本的觀念正確,就不需要擔心這些延伸的技術是否會有誤解或誤用。 |