Anistar RIA Blog

IThome第385期花了8個Page來介紹目前關於RIA技術上的一些應用與實例(包含了Flex, Silverlight, Ajax…等)，雖然這期是2月份的刊物，但是找在過年前編輯就已經花了很多心思到處做採訪，當初當我從IThom那邊收到密密麻麻的採訪提問時，實在打從心底不得不稱讚它們的用心，可見這個編輯果然做了很多功課。

我很高興能透過這個機會將一些關於RIA的經驗透過IThome雜誌傳達出去，因為過完年後一堆新的專案等著被執行，還不知道有沒有這個力氣來一一寫成文章(光是出版社的稿件我就已經是要焦頭爛耳了)，經過了3個小時左右的採訪，大致上問題是圍繞著專案開發流程，難易度，可行性這些主題打轉，老實說這可是RIA專案中最重要的一環，因為一個錯誤的策略或流程，將會導致整個專案的成敗，這跟技術層面不是那麼的直接，但也遇過太多學員或是客戶自行嘗試而失敗的案例，雖然這不是幾張紙或是一本書就能講完的內容，但是幾個大重點都已經被編輯寫在這篇文章中了，剩下的只好另外找時間在繼續在blog中講完，當然在課堂上是必講的概念啊。

礙於版權的關係我不方便將全文或是關於這篇文章的掃描檔放在blog中，因此我擷取了該篇文章中引述關於我接受採訪的內容給大家參考：

Web技術不能偏廢，合著用最好

有多年Flash/Flex教學經驗的精誠資訊多媒體產品處知識產品事業部產品經理宋志峰強調：「整個網站換成Flash/Flex未必是好的作法。 HTML、Ajax和RIA這3種技術，應該合在一起用。」以討論區或新聞列表等為例，此類應用HTML就做得很好，何必換掉？而Ajax在小視窗、 AutoComplete及頁籤等小的應用上很適合，因為是簡單的應用，所以也可避開相容性問題。

RIA用在哪裏效果最好？「操作」

至於RIA最佳的應用場域，宋志峰提出：「操作複雜的應用，像ERP就很適合。」RIA給人最鮮明的印象，在酷炫的立體、光暈、漸層及動畫效果，但宋志峰認為真正的重點，是藉由動畫、提示及物件的縮放及閃動等設計，呈現操作變化的軌跡，與前後步驟的關聯性，才能幫助使用者不在網頁的一次次切換中「迷航」。

元件化的設計，改用RIA並不難

既然採用RIA可以避免傳統網頁因為換頁導致的問題，又有諸多好處，那麼既有的網頁加入Flash/Flex或者Silverlight困難嗎？正如宋志峰所言，網站未必需要全部換成RIA，Ajax和HTML都有存在的價值，只有操作複雜的部分，才需要評估RIA方案。
既有以JSP、ASP.NET或PHP開發的網站，如果當初有基本的元件化設計，後端服務以Web Services型式交換資料，那麼，置換前端展示層為RIA，其實改變的幅度並不大，因為RIA鎖定的是前端展示層的應用，伺服器端介接的程式語言類型並沒有限制，也不需要改寫。
如果過去 Web 應用程式開發完全依賴伺服器端技術，而沒有 Web瀏覽器端程式碼，要進入 RIA 應用領域更動幅度較大。

精誠資訊多媒體產品處知識產品部產品經理宋志峰表示：「很多企業送員工來上課的原因，是架構越寫越大之後，遭遇做不下去的瓶頸。追根究柢，問題出沒有元件化。」
事實上，切成3層是最基本的分工。前端Theme的部分，可以將負責版面配置的CSS再拆解出來，而Flash或Silverlight中用到的圖，例如背景或按鈕圖示，也可以分割、獨立成為個別的檔案或元件。
分層、分工的好處，是未來需要置換風格或樣式時，設計人員不需要更動XAML/MXML檔，然後重新編譯RIA程式，只要抽換CSS、圖檔及動畫，即可改變呈現效果。而將程式的部分元件化，受益的是開發團隊，在不影響其他程式的情況下，可調整小部分機制，或者達到再利用的目的。

RIA的應用仍未成熟，需改變「換頁」的思維

RIA的架構可以在不換頁的情況下，操作很多功能。不過根據宋志峰的觀察，現階段的應用模式尚未成熟，他說：「很多應用Silverlight或 Flash/Flex的網站，動不動就是送出要求，在用戶端與伺服器端之間傳資料。」這表示設計者脫離不了舊有的思維，習慣把所有的工作都丟回伺服器處理。因此開發者改變傳統的網頁開發思維，才能有效減少伺服器及頻寬負擔。
事實上，以RIA的架構，多數的資料和程式邏輯可以放在用戶端，透過本機電腦運算，只有存取資料庫的行為，才需要提交資料由伺服器端處理。以購物車為例，在使用者按「結帳」按鈕之前，商品的增減及費用的計算，都可以透過用戶端的資源處理。

2009年RIA的發展重點： 手機 (我當初是講Mobile)

在美國，Flash/Flex的企業應用已經非常成熟，明顯的指標是Oracle和SAP的產品均採用Flex技術，以Oracle的CRM系統為例，是用Adobe AIR和Flex技術設計管理介面，而且可以與手機結合。

Adobe與全球最大的消費性電子晶片廠商ARM合作，聲稱未來ARM的晶片將內建Flash Player 10。這對RIA的手機應用，是一大契機。未來使用者只要透過3G上網，就可以在手機上做很多事。宋志峰大膽預言：「2～3年之後，RIA在手機市場的商機很大。」因為如果在一套軟體平臺上可以做完所有事，很多公司都願意投入。

另一個觀察重點，在於桌面端的應用，相較於嵌入於瀏覽器的RIA，桌面的RIA有更多的好處，例如，可以離線瀏覽、儲存資料於本機、也可以避開瀏覽器相容性問題，導致的版型錯亂問題。再者，單一的桌面應用，也可以避免使用者被其他網站資訊吸引而離開。

Flash與Flex的差異，在設計的思維

許多人認為Adobe的企業RIA解決方案，應稱作「Flex」而非「Flash」，因為企業應用重視資料的存取而非動畫。宋志峰強調：「Flash與Flex沒有區分的必要，因為兩者在編譯之後都是SWF檔，也同樣在Flash Player中執行。」
事實上，兩者的差異主要在工具設計概念的不同。Flash CS4主要以動作場景與時間軸的設計概念，安排元件的互動關係；而Flex包括Flex SDK，以及付費的IDE工具Flex Builder。其中Flex Builder是基於Eclipse平臺的開發工具。

開發者撰寫互動程式，美術設計師負責版面設計

分工作業的延伸議題，是切割工作的方法。宋志峰說得明白：「我不認為美術設計師寫互動程式會有什麼好下場，因為這牽扯到元件化的能力。」(關於這句話看起來實在是過於聳動，我的意思是說除非美術設計師下定決心)。美術設計師的專業在版面設計、繪圖和動畫，把程式的部分交給開發者處理，才能做到物件導向，以利程式再利用性。這方面，米蘭數位設計就有獨立的「互動技術部」，負責前端 ActionScript的開發。
企業不應該期待美術設計師會寫物件導向的程式，他們真正需要強化的能力並不是這項技術，宋志峰特別提到：「是CSS與Ajax。」因為如果CSS沒有和Ajax結合，只能設定外觀，作用就顯得薄弱。

導入RIA，企業本身一定要精通設計嗎？

設計與開發人員的合作，不容易在短時間之內克服溝通障礙。新光證券與北士設計合作開發Silverlight版「富貴角7 號」網路下單系統，有很深刻的體會，新光證券資深系統設計／分析師趙偉如解釋：「RIA對雙方而言都是全新的領域，彼此都在摸索與學習，難免出現做白工的情況。」
但宋志峰認為企業導入RIA，這方面問題不大。「因為注重形象的RIA對外網站，通常會委由設計公司處理；而對內的RIA應用，美醜不是重點，實用性才重要。」就像傳統開發桌面應用程式一樣， RIA也可由程式開發人員包辦所有工作，而所謂「版面設計」其實就是控制項擺一擺而已。(這個其實也一些偏頗掉了，當初我的原意是只這樣看公司的專案性質，不是每個專案都需要大量的美術設計，不能一概而論)

以RIA改善網站使用性的啟發

如何運用RIA強化網站的使用性（Usability）及友善性（User Friendly）？精誠資訊多媒體產品處知識產品事業部產品經理宋志峰認為，Adobe的官方範例網站FlexStore是很好的參考。這個網站以線上手機購物網站為例，展示如何運用RIA技術強化購物車流程的友善性。

RIA不是高級HTML，可以設計更友善的介面

宋志峰表示：「現階段企業應用RIA，瓶頸在於很多人都把Silverlight和Flex拿來當高級的HTML使用。」這是用牛刀殺雞的作法。
RIA可以在不換頁的情況下，操作很多功能，使用者能夠直覺地知道上一個畫面和下一個畫面的關係。不過我們還是看到很多採用Flash/Flex技術的網站，停留在傳統網頁設計的概念，只是把HTML換成以Flash Player或Silverlight執行的靜態圖像和文字。

特效不要超過1秒，重點在「引導」

引導的用意，在於不讓使用者迷失。傳統網站換頁的情況，使用者不見得會久候不耐，但主要問題在換頁之後，上／下頁的關連中斷，甚至跑出現其他會造成干擾的資訊，使用者可能被其他不相關資訊所吸引，沒有完成手邊的工作之下，又「逛」去別的地方。這對電子商務網站尤其不利，因為使用者在尚未結束購物車流程的情況下，移轉注意力到別處，花錢的衝動也會跟著消退。
宋志峰在課堂上，一再強調：「動畫要在一秒內結束。」因為動畫的作用主要在「引導」，不要反而造成干擾，而其他像飛出來飛出去、旋轉或光暈等效果，要適可而止，沒必要做到過炫。

採用RIA技術，酷炫效果並不是真正重點。如同Adobe的官方範例FlexStore所示，它本身是以Flash/Flex技術開發的購物車流程，重點並不是在美學講究，而是示範如何應用RIA，引導使用者線上購物的操作流程，才不致於在一次次換頁中「迷路」。

完整的文章你可以連到IThome的網站上觀看該期的線上版文章內容。