谈谈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. 资深用户体验专家。