談談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. 資深用戶體驗專家。