談談XAML前端開發


GUI的發展

在圖形用戶界面的操作系統(Windows,MAC)出現之前,計算機軟件是命令行界面的程序,用戶和程序的交互是通過輸入命令,查看命令運行結果進行的。當然很不友好。后來出現了文本圖形界面的程序,即用制表符等特殊文本拼接出圖形界面的效果,來使程序以圖形界面的方式和用戶交互。出現了菜單項,狀態欄等概念,當時在DOS下流行的QBASIC,TurboC等IDE就是典型的文本圖形界面程序。

隨着Windows操作系統的普及,GUI(圖形界面)程序的交互方式成為了用戶和計算機交互的標准方式。Windows從操作系統層面上對GUI程序進行支持,從當時較為成功的Windows95至今已經有了20年的時間。期間出現了無數的Window桌面應用程序,也就是所謂的exe程序。

計算機硬件的形式和用戶和圖形界面程序交互的方式也在不斷發生着變化,大約可以分為三代。傳統的PC桌面設備和程序時代,計算機的形式是台式電腦和筆記本電腦,放在桌子面上使用,用戶使用鍵盤和鼠標進行交互,所以程序被叫做桌面程序。至今在桌面操作系統中,Windows仍然占90%以上的份額,所以桌面程序仍然是Windows的天下。

第二代就是所謂的移動手持設備和觸控程序時代,這時的計算機就不僅是放在桌面上使用了。而是拿在手上,可在移動中隨時使用,用戶使用觸摸屏和電磁手寫筆和程序進行交換。智能手機,平板電腦屬於這種設備。目前的移動程序被iOS和Android程序占據了大部分份額,微軟正力圖通過Windows10改變這種局勢。我們如今還處在這兩個時代之中,還有一些設備是融合了兩個時代的特點的,如觸控變形超級本,大屏幕觸控一體機等。

未來的可穿戴設備則屬於下一個時代,可穿戴設備指如手表,腕帶,眼鏡等便於穿戴在身上的設備,這時的圖形用戶界面可不一定是簡單的2D界面了,有可能是3D界面。用戶和程序的交互方式也不一定是觸摸,還有可能是手勢,語音,甚至眼神。微軟的Windows10打出的就是大一統跨所有設備的牌,甚至包括未來設備,可見雄心之大。

本文中我們主要討論桌面時代和移動時代的2D圖形用戶界面程序,當前的3D游戲一般也采用2D界面加3D場景的方式。

CS和BS

上文中提到的GUI程序指客戶端程序,即CS程序。與之相對的還有瀏覽器應用程序,即BS程序。最初時瀏覽器是為了呈現互聯網上的網站用的,網站數據是靜態數據,服務器只是存儲和返回數據。這些網站數據的標准就是HTML語言。

后來隨着用戶需求的增長,網站數據變為了動態數據,服務器就不僅僅是存儲靜態網站數據了,而是變為了一個Web應用程序服務器。瀏覽器中顯示的數據也變得形式豐富和富於交互,標准隨之發展為HTML,CSS和Javascript。使用這些技術可以搭建起以內容呈現為主的網站,也可以搭建起富於業務邏輯的應用程序。這種在瀏覽器中運行的應用程序被稱為BS程序。

在HTML5出現之前,BS程序的表現力和交互性都不是很好,所以出現了RIA程序,通過在瀏覽器中安裝插件的方式來提高表現力和交互性,典型代表是Flash和Silverlight。由於已經不是HTML了,這種方式更像是客戶端程序,而不是BS程序。由於RIA本身的局限性和HTML5的快速發展,RIA程序成為了過度方案,正在淹沒在HTML5的大潮中。

以HTML5,CSS3作為表現層的BS技術擁有不錯的前景,但個人認為BS技術適合的領域和CS是不沖突的。BS程序適合面向大眾的互聯網程序,在瀏覽器端以內容呈現為主,擁有不太復雜的界面和交互以及業務邏輯,在服務器端可以很復雜甚至用到了雲計算。CS客戶端程序從早期的兩層CS(客戶端直接連接數據庫),發展為三層CS(客戶端連接應用程序服務器),其實和BS程序的架構已經非常相似。區別只是在於和用戶交互的程序一個是瀏覽器中的跨平台Javascript程序,一個是操作系統平台原生支持的客戶端程序。客戶端程序可以和操作系統更為接近,而且性能更好,所以CS程序適合面向專業用戶的局域網程序,在客戶端可以擁有復雜的界面和復雜的交互邏輯以及業務邏輯,在服務器端可以復雜也可以不太復雜,視需求而定。

對於界面,交互和業務邏輯都很復雜的程序,例如大型的平台級程序,甚至復雜到VS,PS等大型生產力工具,顯然更適合用客戶端程序,不能片面地認為基於HTML5的BS程序會完全取代CS程序。還有一種折中的方案,程序主體界面框架使用客戶端方案,其中部分界面,尤其是以內容呈現為主的部分使用HTML方案。可能某些類型的程序,這樣做更好,能使兩者優勢互補。

我們下文要討論的XAML是為CS程序服務的,BS程序使用HTML5,CSS3和Javascript。

Windows平台客戶端程序開發

Windows的主要版本包括面向桌面的95,98,2000,XP,Vista,7,面向桌面和平板的8,8.1,面向手機的Windows phone 7,8,8.1。也就是說目前桌面和平板是統一的,和手機是割裂的。(Android平板和手機是統一的,蘋果平板和手機是統一的,和桌面是割裂的。)微軟意識到了這個問題,所以即將推出的Windows10是大一統全設備的。Windows各種平台的客戶端的開發平台發展過程如下。

Windows桌面平台經歷了Win32 SDK,MFC,VB6(Delphi,PB),Windows Form,WPF(AIR,JavaFX)等幾個階段。

微軟RIA平台為Silverlight

Windows平板平台經歷了Windows Store App 8(8.1),Universal Windows App,Windows 10 App三個階段。

Windows手機平台經歷了Silverlight for Windows Phone 7,Silverlight for Windows Phone 8(8.1),Universal Windows App,Windows 10 App四個階段。

上述標為粗體的平台使用XAML技術,目前桌面平台的WPF和大一統的Windows 10 App具有較好的前景。WPF適合構建大型桌面平台,如生產力工具,VS,Blend,SQL Server客戶端就是使用WPF開發的。Windows 10 App微軟提出自適應控件的方案,適合跨設備應用程序開發。

前端開發的產生

早期把從事靜態網頁設計和實現的人員叫做網頁工程師,他們使用table布局。隨着時間的推移,DIV加CSS的方式成為了主流。再后來,靜態網站已經不能滿足需求,變成了BS程序,網頁工程師變成了Web前端開發工程師,他們要使用Javascript語言和各種各樣的框架,當然也需要HTML和CSS。由於BS程序在瀏覽器端一般沒有較多的業務邏輯,所以Web前端開發工程師一般只負責表現層邏輯,如果存在較多的業務邏輯如GIS系統,可能由專門的Javascript程序員負責完成業務邏輯開發。

客戶端前端開發的概念是從Web前端開發移植來的,指客戶端表現層的開發,不包括客戶端的業務邏輯層。早期的客戶端平台比如Win32 SDK,既沒有專門的表現層開發工具又沒有開發語言,使用C/C++等程序設計語言開發,要想讓學美術的人完成開發基本不太可能,只能采用出效果圖,然后交由程序員實現的方式完成開發,效率和效果都不會很好。后來的平台比如Windows Form有了表現層開發工具,但沒有開發語言,並且沒有較好的機制和設計模式支持表現層和業務邏輯層分離,所以盡管美術人員可以參與部分表現層開發工作,但實施起來存在很多問題。

現代的客戶端開發平台繼承和發揚了Web的HTML語言的方式來構建表現層開發平台,其中有代表性的是XAML,Flex,JavaFX,Android幾個平台。他們都使用基於XML的描述性語言作為開發語言,並且提供可視化的開發環境,使用一種強類型的程序設計語言作為背后支撐。完成表現層開發工作的前端開發人員只需要熟練掌握表現層開發語言極其機制,熟練使用表現層開發工具,少量掌握背后的程序設計語言就可以很好地完成表現層開發工作。所以美術人員轉行做客戶端前端開發成為了可能。其中個人認為微軟的XAML技術做得較好,通過MVVM模式可以做到表現層和業務邏輯層較好的分離,Blend開發環境也做得很好。前端開發人員基本不需要會太多的C#,就可以完成大部分的工作。XAML前端開發人員完成表現層設計和開發,C#程序員完成業務邏輯層開發,這樣配合效率和效果都會變得很好。

客戶端前端開發的特點

網頁一般采用固定寬度的縱向延伸的方式布局,而客戶端程序一般是需要根據窗口大小自適應的,某些類型的BS程序也是需要自適應的。所以客戶端前端開發和網頁設計最大的區別就是自適應布局。網頁設計習慣的先設計效果圖,再裁圖構建頁面的方式可能並不適合客戶端前端開發,因為效果圖只能代表界面的一個狀態的效果,而設計時就需要考慮在不同窗口大小下的界面自適應布局。並且對於XAML這樣的基於矢量的平台而言,不應該使用位圖拼湊的方式構建界面,而應該從一開始就使用矢量的方式構建界面。所以XAML前端開發人員直接在Blend中完成基於矢量的自適應布局的表現層設計和開發是更好的方式。

客戶端前端開發和Web前端開發的一個重要區別是控件封裝,HTML首先是給瀏覽器解析使用的,然后才是給設計人員使用的,但只限於在網頁設計的范圍內。如果擴展到BS程序的范圍就會出現問題,因為程序設計需要封裝外觀和功能,以便於復用,就是所謂的控件。而HTML並不能擴展,所以各種框架提供的控件只能通過Javascript來表達,並不能在HTML中以聲明式的方式表達。這對於美術人員轉行過來的前端開發人員來說不是好事。XAML平台從最開始就被設計成為了客戶端程序表現層開發服務。所以加入了控件封裝,模板等重要機制,並且控件可以通過自定義的方式無限擴展,可以直接在XAML中使用,還可以在XAML中任意改變控件的外觀。XAML平台可謂是為客戶端前端開發人員量身定做的。其他客戶端開發平台,如Flex,JavaFx和Android和XAML平台有很多的相似之處,Flex和JavaFx平台也使用MVVM模式,Android平台使用MVC模式,個人覺得MVVM模式更能做到前端和業務邏輯分離。Flex的應用呈下降的趨勢,JavaFx目前應用不是很廣,所以XAML前端開發人員可以考慮同時學習一下Android平台,兩者的相似之處還是很多的,而且客戶端的設計理念也相似。蘋果的iOS平台和XAML,Android平台的區別較大,而且界面背后的XML語言不對開發人員開放,OC相對C#和Java而言難學,所以要想把前端開發人員獨立出來較難。

XAML前端開發之路

我想象的前端開發人員的職業規划路線可能是這樣的,

1. 平面位圖和矢量設計人員

2. 網頁設計人員(可選)

3. 初中級WPF前端開發人員

4. 高級WPF前端開發人員,可進行表現層邏輯開發。

5. 多平台XAML前端開發人員,可進行Win10前端開發。

6. 多平台前端開發人員,兼做Android前端開發。

7. 全平台前端開發人員,也會iOS開發。

8. 跨平台UI交互設計師。

9. 資深用戶體驗專家。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM