前端UI框架对比
前端UI框架对比
--校长
序论
每种产品都是有自己的定位!根据项目业务来选择技术平台才是正确的、平台好不好、要看是否适用当前项目!下面校长根据自己的开发经验谈谈自己的看法、个人经验之谈!还有一句话要说明一下:任何一个开发人员都不喜欢去设计界面!设计师的逻辑跟程序员的逻辑思维是不一样的!设计师面对的是用户为用户体验而设计、程序员面对的是代码为系统的性能而编写!
1、ExtJs
ExtJs 开源、商业应用收费的前端富客户端框架!强大的组件库、完美的浏览器差异兼容!能大大减低开发人员的开发难度、提高开发效率!出色的布局能力使得即使没有一点设计基础的人员也能搭建漂亮、丰富的界面!通过内置的强大Ajax类实现了完美的后台交互能力!由于太过丰富、重量!使得他更适合应用企业级系统应用开发!
Component类使得任何一个OO开发人员都能驾驭该框架、设计很好的界面与功能!不在需要开发人员编写大量的Html元素!即使在没有美工、设计师在情况下、你也能开发出一个相当成功的项目!大大降低了研发成本!当然了需要一个出色的OO开发人员!
1、 丰富、出色的组件库、主题样式
2、 完美的独立性、不需要集成任何第三方插件、使得浏览器兼容性不再是问题
3、 强大、丰富的文档、社区支持
4、 对JS原生对象的扩展、使得我们更好的应用JS对象;如:Array、Date、Function、String
5、 脱离传统B/S软件对美工的依赖,纯粹依靠开发人员来构建软件系统。
6、 目前版本:Ext 4.2
总结:目前99%的企业级应用都能使用它来开发!对于我们当前项目来说就挺好的、多媒体坐席系统Demo就是基于这个开发的、看到界面还是很不错的吧!简单的入手、可是提高项目的研发进度!(随便拉一个人都能做一个Ext项目)(校长不是很喜欢这个东西、至于原因…呵呵…)
2、jQuery EasyUI
jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的。一些功能也足够开发者使用,相对于extjs更轻量。
jQuery EasyUI有以下特点:
1、基于jquery用户界面插件的集合
2、为一些当前用于交互的js应用提供必要的功能
3、使用 EasyUI你不需要写很多的javascript代码,通常只需要写HTML标记来定义用户界面即可
4、支持HTML5
5、开发产品时可节省时间和资源
6、简单,但很强大
7、支持扩展,可根据自己的需求扩展控件
8、目前各项不足正已版本递增的方式不断完善
总结:由于把视图层与控制层的分离、所以需要我们编写大段的html代码、导致代码不义易维护、很难定位到当前的组件!功能相对薄弱、需要自己定制组件、不利于浏览器的兼容!同样他优秀的组件库、强大的扩展能力使得我们依然可以用它架构一个出色的项目、对于开发人员能力要求比较高(精通Ajax、Html/Css,熟悉JS、)、由于是免费的(好像不开源)、目前拥护人员也是相当的多!
3、Flex
作为新一代的富客户端互联网技术的佼佼者,Flex这种技术已经被越来越多的公司所采用,被越来越多的用户和程序员所接受。(校长)可是随着html5的发展、Flex的前景不是那么的明朗!毕竟他是为了开发人员能够使用到Flash的一些功能而设计!从目前的Html5发展程度、很有可能取代Flash、Adobe公司也表示已经降低的Flash、Flex的研发精力转而投入到Html5的研发!(/校长)!虽然这样、但是Flex的优势也是显而易见的!校长也使用过Flex开发项目、总的来说还是很不错的!也表示希望继续使用此技术!
由于程序是运行在Flash Player虚拟机里面、所以有着良好的跨平台性和兼容性!支持多种后台交互技术(校长表示分布式的系统架构能更好的体现Flex的优势)!
服务器交换数据
Flex技术包括以下几个主要技术框架:
1. 描述应用程序界面的XML语言(MXML);
2. 符合ECMA规范的脚本语言(ActionScript),处理用户和系统的事件,构建复杂的数据模型;
3. 一个基础类库;
4. 运行时的即时服务;
5. 由MXML与ActionScript文件生成swf文件的编译器。
Flex的优势:
1、Flex与Flash:可以让普通程序员开发制作Flash成为可能
2、界面表现能力一流。
3、RIA富客户端应用,解决了异步调用,界面无刷新,浏览器兼容性等多项难题
4、对流媒体的支持:Flex是被公认为流媒体技术支持最好的应用
5、平台的可用性:根据ADOBE公司的说法,Flash player在全世界一半的PC机器上安装度为99.8%
6、跨平台:Flash player能够在linux下运行,也可以在手机上运行,所以不用担心绑死在WINDOWS上
7、对底层的可操作性:Flex能够调用底层的东西,比如可以调用摄像头实现视频,而且视频本身就嵌入在Flex应用中,由Flex player直接播放。
8、平台的后续运营和发展前景:Flex是由ADOBE公司推出的且开源
9、有充足的学习环境: Flex官方样式配置工具,可以在线配置Flex应用程序各种控件的外观样式,改程序也是用Flex编写的,大家可以想象Flex可以做到什么程度的应用了,而且这么漂亮的界面,根本不用做任何图片和美工,都是直接用样式实现即可。
10、可以用任何你熟悉的WEB编程平台作为后台数据访问层,可以使用 .net,php,jsp,webservice 。
11、脱离传统B/S软件对美工的依赖,纯粹依靠开发人员来构建软件系统。试图让开发人员在完全不需要学习Flash情况下,直接进行Flash RIA编程,这样的话,避免了B/S中遇到的情况,加重了开发人员的学习负担,且这些东西本来就不是开发人员所擅长的。
总结:根据目前我们当前项目的业务来说、我觉得Flex比较适合、多媒体联络中心门户、由于我们需要多种数据格式的传输、以后可能会做在线视频业务(不过、校长对于多媒体是没什么概念的!我真的不懂、而且不懂)、多媒体坐席系统的架构Flex也是能很好的实现的、毕竟flex就是做企业级开发的、有良好的消息推送技术!当然了、当前项目也有很多设计是不适合使用此技术的!
4、Dojo
(校长表示没有用过、从网上参考了一些建议)
优点
背后强大的支持:IBM、Sun、BEA等,这是非常重要的优势。
功能的强大,Full Stack的框架,扩展了DHTML的能力,例如:
支持与浏览器Back/Forward按钮的集成。
Dojo Offline,一个跨平台的离线存储API。
Chart组件,可以方便地在浏览器端生成图表。
基于SVG/VML的矢量图形库。
Google Maps、Yahoo! Maps组件,方便开发Mashup应用。
Comet支持,通过通用的Buyeux协议。
强大的UI(Dijit)。
面向对象的设计,统一的命名空间,包管理机制(The Package System and Custom Builds)
可扩展性。
缺点
复杂,学习曲线陡。
文档的极端不全,这是一个很大的问题。
API很多不稳定,各版本间改动较大,现在还不是一个成熟的框架。
侵入性太大,页面中大量使用dojo的属性,例如<button dojoType="dijit.form.Button" id="helloButton">,如果将来dojo升级或者换一个框架时,负担会很大。
性能问题,由于dojo加载采用了同步的机制,会暂时锁定浏览器,导致CPU使用率达到100%。另外,很多Widget的速度很慢。
5、AngularJS
(校长正在学习使用、想了想不是很适合我们当前的项目)
6、jQuery
做Web前端开发人员都知道的一个东东!不论是框架本身的设计、架构、还是展现出来的功能都是上上之选!但它是一个类库、不是一个框架、它提供的是函数、方法、功能!这样一来问题也就暴露出来了、由于它本身不带任何UI层的东西!虽然它拥有强大、丰富的插件扩展!但是由于各个开发者技术能力良莠不齐、导致插件的兼容性、稳定性大大降低!对于当前的几个jQuery UI库还是很不错的!比如上面说到的EasyUI与jQuery UI、jQuery mini UI!都有一个同样的问题就是需要编写大量的html代码、所以看个人爱好了!
7、Bootstrap
中文网:http://www.bootcss.com/
说到Bootstrap、这方面的资料就比较少了!所以我只是一个了解、没用过!但是由于其流行性、我又不得不去了解他!打开它的官方网站我们可以看到一句话:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。看到这句话我就动容了!在完整个文档介绍、确实它值得这样宣传自己!
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。
Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。同样它拥有强大的Web UI组件库!但是上手难度比较大、至少我看完整个文档后、我还是不知道怎样去运用它!可是它潮流、精美、优雅的界面吸引着我!我想、我该去尝试学习它了!
下面是一些网站实例:优雅、潮流