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

时间: 04-11

谈谈XAML前端开发的相关文章

我对前端开发的认识

很多人认为前端开发就是css/html/javascript. 门槛低,好上手,页面的渲染又是“所见即所得”,很容易引起人学习的兴趣.其实不然,前端开发知识面涉及很广,需要学习的知识也是很多,下面就从我认识的角度来谈谈对前端开发所应掌握知识的理解.(不喜勿喷!!~~~^_^ ~~~) 前端的核心也是就css/html/javascript.下面要说的也都是其各个部分的扩展.先从html讲起吧,它就是一个页面的框架,(就像人类的骨骼似的!)没有他,页面撑不起来.HTML有很多个标签组成,其中HTM

基于微软XAML技术的前端开发方法

使用XAML技术的平台目前包括WPF,Silverlight,Windows8等平台,未来的Windows10统一Windows App也使用XAML技术. 前端开发指通过可视化集成开发环境进行用户界面的设计和实现,结合手动编写XML界面描述代码,完成表现层开发的过程.基于XAML技术的前端开发使用的开发环境是Blend,输出是XAML代码.由于目前版本的Blend 2013存在一些问题,需要和VS配合使用.Blend 2015进行了重大改进,较好地解决了各种问题,但还未发布正式版. 下面总结一

北漂这五年,跟大家谈谈前端开发的发展以及进阶

前端自08年左右兴盛已来,无数年轻人投入其中,但是这2年不知道身为前端的你,有没有感觉到求一份靠谱的前端的工作变的很难,同样企业求一名靠谱的前端也觉得很难,其实并不是因为求职者太过挑剔,也不是企业给不起工资,而是因为这两年大前端的发展无论从技术深度和广度都跟以前大不一样,前端不再是页面仔,而是指能够使用JavaScript和相关H5技术开发iOS.Android.AR.VR.IoT.PC.Server.WebApp.3D甚至AI的综合性技术人才.很多同学的计算机基础相对薄弱,导致了知识直接断层.

准备.Net转前端开发-WPF界面框架那些事,值得珍藏的8个问题

题外话 不出意外,本片内容应该是最后一篇关于.Net技术的博客,做.Net的伙伴们忽喷忽喷..Net挺好的,微软最近在跨平台方面搞的水深火热,更新也比较频繁,而且博客园的很多大牛也写的有跨平台相关技术的博客.做.Net开发块五年时间,个人没本事,没做出啥成绩.想象偶像梅球王,年龄都差不多,为啥差别就这么大.不甘平庸,想趁机会挑战下其他方面的技术,正好有一个机会转前段开发. 对于目前正在从事或者工作中会用到WPF技术开发的伙伴,此片内容不得不收藏,本片介绍的八个问题都是在WPF开发工作中经常使用到

移动端前端开发调试

转自:http://yujiangshui.com/multidevice-frontend-debug/ 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前端开发和测试是非常有必要的. 由于之前做过大量有响应式需求的项目:今年(2014)年初也配合 Denis 的 微信机器人 做了一些用于微信的移动端项目:在淘宝 UED 实习的时候,也有参与过一个针对移动端的游戏的部分开发.所以算是积累了一点移动端调试的经验,在这里分享一

[转]关于Web前端开发,附:(百度web前端笔试面试题目)

关于Web前端及百度web前端笔试面试题目 随着各大互联网公司设立了Web前端开发工程师.设计工程师等职位,web前端越来越得到互联网企业的认可.而且其重视程度与地位也随着浏览器 端的富客户端的体现而日益提高. 眼前对HTML5的未来和走向,业内的预测是会和Flash.Silverlight等相结合,从而取代传统的客户端应用程序.而实现这个目标的客户端核 心工作是有Web前端工程师来完成的. 从另一个角度,对于web产品来说,交互和用户体验是产品的第一价值,这部分价值的体现就是在web前端.可以

浅谈web前端开发

有部分同学和朋友问到过我相关问题.利用周末我就浅浅地谈谈我对web前端开发的理解和体会,仅仅能浅浅谈谈,高手请自己主动跳过本篇文章. 毕竟我如今经验并非非常足,连project师都算不上,更不用说大牛了.今天也不谈技术.技术非常多人比我掌握得更好,也大同小异.可是每一个人的理解体会是不一样的. 对前端开发的三个整体理解和体会 我对前端开发的整体体会有三: 第一:杂而难,难度甚至超过了一般的后台开发,假设有人认为前端开发简单仅仅能说明他还没有入门. 第二:web前端开发正在向响应式和移动端方向大步

前端开发技术的发展

    作者:民工精髓 ,发布于:2013-3-21   前端开发技术,从狭义的定义来看,是指围绕HTML.JavaScript.CSS这样一套体系的开发技术,它的运行宿主是浏览器.从广义的定义来看,包括了: 专门为手持终端设计的类似WML这样的类HTML语言,类似WMLScript这样的类JavaScript语言. VML和SVG等基于XML的描述图形的语言. 从属于XML体系的XML,XPath,DTD等技术. 用于支撑后端的ASP,JSP,ASP.net,PHP,nodejs等语言或者技术

WEB前端开发 辨析类 面试真题 大集锦

WEB前端开发 辨析类 面试真题 大集锦 HTML5学堂-码匠:面试里最常出现的问题句式大概就是"说说XXX和XXX的区别""谈谈XXX和XXX的不同"了吧~!一波波的辨析题正在袭来,快快开启防御,杀出重围,来一场绝地反击! 僵尸,啊,不对,辨析三连发! 扫描了众多的面试题,发现--额--各个技术之间的辨析真的是如僵尸一般,一波一波的~ 相信不少人都在面试当中遇到过各类的辨析题,面试的画风大概是这样的 -- 面试官:strong.em.b.i的区别是什么? 面试官: