ASP.NET 與 HTML5

ASP.NET 是很多企業現階段所使用的技術,由於先天上的限制,相信技術人員這麼多年來,一定或多或少苦惱於某些功能的實作,無論是各種資料的前端視覺化呈現,或是即時動態更新,甚至前端程式的敏捷操作,避免拖垮系統的背景執行機制,這些相關的應用,ASP.NET 幾乎很難或是無法利用現有的 HTML 與 JavaScript 進行實作,而現在,你可以直接利用 HTML5 來處理了。

傳統的ASP.NET 透過ADO.NET與控制項進行伺服器端的資料庫連接與互動,而與使用者互動的部份,則必須藉由Postback 機制,以網頁更新的方式來處理。

ASP.NET 簡化了以網頁為基礎的Web 應用程式開發過程,但是並沒有辦法突破網頁Postback 機制的限制,畢竟這是一個Server 領域的技術,客戶端還是純粹的HTML ,功能再強大的控制項,一旦離開Server 便無法發揮作用,而為了捕足這一塊的缺口,幾年前微軟開發出Silverlight 技術,而這種嵌入網頁的技術雖然強大,但它終究不是網頁內建支援的標準,以此技術開發的網頁,想要跨越手機或平板等各種非PC 行動裝置更是困難重重,也因此最後終究還是沒有取得真正的成功。

現在我們有機會將 ASP.NET 所開發的應用,翻修成為同時具客戶端功能的網頁應用程式,利用HTML5 處理使用者的互動,然後經由Server-Sent Events 與XMLHttpRequest 等內建的技術,與ASP.NET 進行資料交換。




經過圖示的實作,我們可以透過ASP.NET 建構強大的伺服器功能,而在客戶端的部份,則經由瀏覽器解譯HTML5 網頁與JavaScript 程式的運作,提供豐富敏捷的使用者操作介面。

對於傳統的ASP.NET 開發人員,你可以保留分層架構中的邏輯層以及實體資料物件層,另外建立新的HTML5 介面,取代原來由控制項與後置程式碼建構的ASP.NET 網頁,這樣作的好處是,你可以脫離控制項與Postback 機制的限制,建立完全自由不受限制的網頁介面,一旦將網頁升級至HTML5 ,你就可以打造與原生程式相同水平的使用者操作介面,建構各種應用,例如數位儀表板、即時動態更新的資訊網頁等等。

HTML5被視為將是主導 PC 與行動裝置未來發展最重要的技術,除了動畫、繪圖與 CSS 等設計領域之外,開發人員最關心的,莫過於 HTML5 在應用程式發展的過程中,導入這項技術能帶來什麼助益。

改良現有的 Web 應用程式,是可以馬上運用 HTML5 的第一步,而如此作之前,你必須瞭解幾項重要的議題,首先是繪圖,在這個視覺化的時代,除了冷冰冰的數字與單調的文字,更多的情形下,開發人員必須能夠將資料轉換成為圖形來呈現,這對於無論客戶或是主管而言,都比單純的呈現文字資料要來得更容易理解、更具價值。

在過去,視窗程式要呈現圖形報表可以利用  GDI+ 之類的技術 ,而如果要讓資料能夠透過網路流向使用者,並且在瀏覽器呈現,情況就變得複雜了,你有幾種選擇,在伺服器直接將資料轉換成靜態圖片,然後再送入網路是一種方式,但這只能獲得靜態的圖片,如果想作到即時動態更新則需利用 Falsh 或是 Silverlight 之類的外掛技術。

HTML5 具有無可匹敵的網路滲透能力,當這個世界開始脫離 PC 的控制,全面迎接行動裝置時代的來臨,異質平台的滲透能力就變得至關重要,而當你使用外掛技術來發展你的圖形資料介面,跨平台就變成重大的挑戰,透過 HTML5 描繪的圖形內容讓資料呈現變得相對容易,也讓 Web 應用程式未來的發展呈現完全不同的格局。

在繪圖這一塊, HTML5 有不同的 API 可以調用,最普遍的莫過於 Canvas 物件所提供的 2D 繪圖功能,我在 HTML5 完美風暴》書中作了相當詳盡的說明,而基礎的繪圖也在這個入門系列作了討論,其中所觸及的知識已經足夠進行基本的統計圖描繪。

當然,只會描繪圖形是不夠的,資料的儲存、連結、轉化、載入與整合呈現,才是開發人員使用 HTML5 最重要的關鍵

Web 應用程式相較於原生應用程式複雜的地方,在於它同時必須跨越網路與伺服器端進行互動,資料會在瀏覽器,也就是網頁這一端與伺服器端的 ASP.NET 之間流動,開發人員必須負責將這兩端串連起來並針對資料進行處理。資料處理永遠是應用程式開發最重要的議題,HTML5 自然也不會例外,包含各種格式的檔案,圖像資料,甚至最簡單的純文字等等,嚴格說來,傳統的 ASP.NET 並沒有 針對網頁這一塊進行處理,那是 HTML與 JavaScript 的事,它只負責接收並且處理網頁回傳的要求,並將運算結果整理成一份新的網頁送入網路,最後覆蓋使用者目前瀏覽器上的網頁,完成回應。

由於 HTML5 的功能相當完整,因此我們可以在網頁這一端進行資料處理,並且只在需要時與伺服器端作即時的連線溝通,不需要每一個資料處理動作即丟一個要求回伺服器,除了減少頻寬的浪費之外,最重要的意義在於我們能夠以此技術建立瀏覽器可以直接處理,提供豐富功能與敏捷回應特性的 Web 應用程式介面。


HTML5 透過非同步訊息系統建構資料處理所需的相關機制,無論是網頁彼此之間的資料流通處理,或是網頁與 JavaScript 檔案,也就是無視覺化元素的邏輯程式溝通,甚至跨越網路的推播機制,全都可以透過訊息系統來完成。



瞭解非同步訊息系統,可以讓你快速解構 HTML5 最重要的幾種資料溝通機制,無論你要將資料從網頁丟到特定的地方,或是接收由其它地方回傳的資料,當然這也包含了伺服器端的 ASP.NET 應用程式。 

除了訊息系統, 支援Web 應用程式介面與伺服器端資料交換最重要的重量級物件 XMLHttpRequest ,將會在這個課程中進行討論。

當然,除了 HTML5 本身的訊息系統與內建的相關物件,你還必須瞭解 ASP.NET 如何將資料轉化成可與伺服器構通的資料格式,在這門課程當中,你會看到我們利用 JSON 作為網頁與伺服器間的共同資料格式,並且在物件與字串兩種格式之間進行轉換,還有利用 LINQ 與自訂類別,將資料庫取出的任何原始資料轉化成對應的實體類別結構,於保留資料結構組成的前提下,再一次轉化成 JavaScript 可以直接解析對應的 JSON 格式資料,回傳至前端網頁。資料一旦順利轉換並傳送至前端,就可以根據需求透過 HTML5 進行處理,無論是表格的呈現,或是統計圖的轉換。

完成 HTML5 訊息系統的討論,接下來你便可以透過此機制,建立非同步執行的資料處理功能,示範實際的「新增/刪除/修改/讀取」資料操作。
讀取:從資料庫讀取/查詢資料,取得資料呈現,圖形化轉換。
新增/刪除/修改:回傳異動資料,並且非同步取得更新結果。

資料的異動與查詢以非同步執行,這樣作的好處在於,可以避免因為長時間的伺服器作業影響網頁目前的工作,另外一方面,可以透過即時更新,定時動態取得伺服器的更新資料,資料庫的任何更新操作,都可以即時反應在網頁上。



沒有留言: