精华频道 → Web前端
阅读更多

Web前端
名家访谈 jQuery 富客户端框架 DWZ（jUI）开发团队专访  

2013-08-23  编辑 wangguo 评论(29条) 有94939人浏览
DWZ jQuery Ajax 开发框架 jUI

声明：ITeye精华文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

jUI（原DWZ）富客户端框架是DWZ团队开发的基于jQuery实现的Ajax RIA开源框架，支持用HTML扩展的方式来代替JavaScript代码，不懂JavaScript的程序员也能通过jUI来使用各种页面组件和Ajax技术。jUI基于jQuery，你可以非常方便地定制特定需求的UI组件，并以jQuery插件的形式发布。

jUI项目在“2013年度中国优秀开源项目评选”中获得较高票数，并被专家评审团评为“2013年度中国优秀开源项目”。

本期我们采访了DWZ团队，请他们来详细介绍一下jUI框架的由来及他们的开发、开源心得。


从左到右：杜权、张慧华、吴平、郑应海

先介绍一下你们的团队吧！ Top

杜权：从事UI/UE前端设计工作，有13年产品设计工作经验。jUI项目发起人，负责用户界面设计、用户体验设计，负责jUI组件HTML结构定义、CSS定义，并负责jUI组件开发完成后的验收工作。

吴平：一直从事Java开发工作，对前端开发也是有一定的兴趣，所以才会参与到这个项目中来。jUI创始人之一，在项目中主要负责jUI组件的JS开发工作。

张慧华：一直从事Java开发工作，对前端开发比较感兴趣，2013年开始从Java转到HTML5手机App开发。在项目中主要负责jUI组件JS开发，以及jUI和Java、PHP整合版本的开发。

DWZ团队目前除了3个创始人，还有几个核心开发人员：郑应海、张涛、冀刚。此外，还有一些没见过面的网友也参与到项目中。

jUI项目最初的名字为DWZ，这个名字是怎么来的？后来为什么又改为jUI？ Top

杜权：DWZ取名为“杜权、吴平、张慧华”姓氏拼音首字母，起初由我和吴平用了两个月的业余时间开发了第一版，之后主要是张慧华维护和小步更新。我们想把这套界面框架做成完全自由、开放、安全、不嵌入任何内码的一套界面框架，让它成为行业标准，所以我们重新选择了名字jUI作为框架名称。j的中文寓意很丰富，比如可以代表界面、简单、简洁、教导、焦点、角度等，从技术上可以理解为JavaScript、jQuery、JSON等。而我们三个人又是在Java项目的开发工作中结识，并成为朋友，合作伙伴。

吴平：DWZ这个名字更多的是代表我们这个团队。

张慧华：现在DWZ作为一个团队代号，jUI就是DWZ团队下的一个产品。在DWZ这个团队下还有Java企业级开发框架、ThinkPHP+jUI整合应用、ZendFramewark+jUI整合应用，以后还会有HTML5手机开发框架。

jUI项目的开发初衷是什么？ Top

杜权：在我职业生涯中有过多次跳槽经历，做过的大大小小的网站和软件有千余个，从中感觉到无论是大公司还是小公司做开发都存在着同样的问题——做设计的不懂代码，写代码的不懂设计。在整个界面实施的过程中频频遇到设计的界面无法实施到产品中，而我在学设计时对编程也有浓厚兴趣，对编程思想和代码结构都比较清楚，掌握的技术知识面比较广泛，所以对于一个功能呈现到界面上该如何表现，代码结构该怎么写，在这方面理解更深刻。在工作中不断总结方法，发现大多数界面在切割成独立的个体时，代码都可以重用，为了制作界面的工作更简单、更高效，我们尝试在一套HTML上采用不同的CSS来实现多种风格，基于这样的思路把界面代码片段化，分成一个个功能组件，而页面就可以由一个或几个这样的组件组合出来。我们想让JS编码能力稍弱的设计师或程序员学习和使用这种方法，从而提高工作效率，提升代码水平，缩短时间成本。

吴平：最开始我们在公司的项目中也用过市面上的一些组件框架，但始终觉得用起来都挺麻烦的，后来干脆就自己编写组件，后面凭着我们对前端开发的兴趣，决定更系统地开发出全套的组件。至于为什么会开源，应该说源于张慧华的一次尝试。

张慧华：jUI项目开源算起来快4年了，在这之前我们也没有做过开源项目。刚开始我把jUI打了个zip包上传到了CSDN，发现关注的人还挺多，后来就放到Google Code上。当时国内还没有Code平台，第八届开源大会后把代码迁移到CSDN Code平台后下载速度明显快多了。

我们几个属于技术狂热者，平时没事就会一起讨论一下技术问题。都是纯做技术的，没有任何营销经验。通过做开源项目可以认识各方面的人才，建立人脉关系，为以后的发展做准备。就这样慢慢走向了开源之路。

jUI的设计思路和具体实现是什么？如何使得开发人员不写JavaScript的情况下，也能用Ajax做项目和使用各种UI组件？ Top

杜权：做界面首先要清楚地理解界面，相信大多数人对界面的理解只是好看不好看，而我对界面感官上的理解首先是把界面和内容分开，无论是产品经理还是界面设计师对界面的理解都是非常重要的，理解不清晰将无法做出一个高性能的产品，将直接影响到整个产品的质量。

那么什么是内容？什么又是界面呢？内容是一个页面要传达给我们的信息，包括文本、图片、媒体等；而界面就是布局和色彩，无论是布局和色彩都是修饰内容用的，包括宽高、位置、边框、投影、大小、颜色、字体等。从技术角度理解界面就是：

  • 用HTML定义内容的类型和结构，正确的内容使用正确的标签定义；
  • 用CSS定义标签的布局、颜色、大小、背景等。
基于界面的用途来定义并规范HTML代码片段，再用CSS选择定义这一块代码片段中标签的具体颜色、边框、字体等来规范一个组件显示什么样的效果，从而使一个页面内的组件可重用多次，而代码却是同一段。

另外，我们针对不会写JS的用户，开发了很多基于传统HTML用法的扩展属性，只要有HTML的基础就能实现很炫的效果。例如：点击一个链接，想让浏览器弹出一个Ajax动态加载的漂浮在当前页面的窗口，而不是打开一个新的浏览器窗口，通过jUI，你只需要一行简单的代码就能搞定，<a href="url" target="dialog">弹出窗口</a>。和传统的链接相比<a href="url" target="_blank">弹出窗口</a>，只是target的属性不同而已，你几乎不需要学习就能使用。

张慧华： 设计思路是：简单实用、扩展方便、快速开发、RIA思路、轻量级。Web 2.0时代的到来，前端开发人员非常稀缺。jUI目的就是让不懂前端，不懂JS的开发人员，也能够做出非常炫的页面效果。jUI就是本着这个原则，添加一些HTML扩展属性，通过class实现自动绑定JS效果。jUI中每个可视化组件都提供有HTML扩展属性调用方式。

jUI基于jQuery，对一些有JS开发经验的开发人员，可以非常方便地扩展其功能。

相比其他前端框架，jUI的优势或特点是什么？ Top

  • 完全开源，源码没有做任何混淆处理，方便扩展
  • CSS和JS代码彻底分离，修改样式方便
  • 简单实用，扩展方便，轻量级框架，快速开发
  • 仍然保留了HTML的页面布局方式
  • 支持HTML扩展方式调用UI组件，开发人员不需写JS
  • 只要懂HTML语法不需精通JS，就可以使用Ajax开发后台
  • 基于jQuery，UI组件以jQuery插件的形式发布，扩展方便

你们也开发了一些整合项目，比如SSH+jUI、ThinkPHP+jUI、ZF+jUI、YII+jUI，这些项目的目的是什么？未来还会整合哪些项目（框架）？ Top

吴平：这些整合的项目基本都是张慧华一个人的杰作，我跟杜权参与得很少，我们更多是在jUI项目本身上。

张慧华：目前的整合项目有：

这些整合项目主要是为了让开发人员能够更快上手。在实际项目中使用jUI，如果只是看jUI文档，很多地方不好理解，特别是一些和服务器交互性比较强的地方，比如表单提交、列表查询、分页、排序等操作，因为这些不仅仅是前端问题。结合Java和PHP整合版本，开发人员可以更方便地理解和使用jUI。

还有一个原因是我们还想推广dwz4j企业级Java Web快速开发框架，现在该项目还没有相关文档，后续会把文档补上。

jUI在浏览器兼容方面表现如何？ Top

吴平：对于浏览器兼容方面我们通过两种途径来解决：一方面，杜权在CSS兼容方面做了大量的工作；另一方面，利用JS来处理一些CSS不太容易处理的兼容性问题。可以说当时在浏览器兼容性方面下了不少工夫，出来的效果至少对于我们自己来说，还算是满意的。

在jUI开发过程中，你们是如何分工的？又是如何协作的？你们平时使用的开发工具是什么？ Top

由杜权设计好界面，并以HTML结构形式提交到内部的SVN服务器，然后再根据时间安排分别提交给吴平或张慧华开发具体的JS代码。

杜平在提交HTML时，分别把功能需求写在每个组件的独立页面中，并以注释的方式分别在代码行中描述当前要用的属性和要实现的效果应该怎么控制。JS编码完成后通过内部服务器直接测试，如果没有问题就可以上线。

我们使用的工具如下：

  • Java开发工具：Eclipse
  • PHP开发工具：Zend Studio
  • 前端开发工具：Aptana Studio、JetBrains WebStorm
  • HTML5移动开发工具：JetBrains WebStorm
  • 设计工具：Photoshop、Illustrator

用户如何在自己的项目中整合jUI？ Top

吴平：在自己的项目中整合jUI，我自己认为是比较简单的，因为一般只要按照文档中对组件的描述，正确写组件的HTML代码，并加上对应的扩展属性，基于就可以了。

但对于初次使用的用户来说，jUI的文档可能还不够详细，这里也希望在使用jUI方面有一定经验的朋友，可以分享一下使用心得，感谢不尽。

据你们所知，目前大约有多少项目采用jUI？ Top

杜权：我们没有刻意统计过用户量，从朋友和以前的同事提供的信息中得知，至少有几个大公司正在使用我们的框架，比如新浪微博商业后台管理、IBM电子商务解决方案、联通内务管理系统等等。

张慧华：现在jUI有8个1000人的QQ群，我大概从群里了解过，很多人在项目中使用了jUI。

jUI在移动平台上表现如何？或者是否有专门针对移动优化的版本？ Top

吴平：之前的版本在移动平台上的表现可能不及在PC上的表现那么好，我们也确实考虑过针对移动设备专门优化一个版本出来。

张慧华：计划以后开发一套HTML5移动App开发框架，可以参照Sencha Toucha的App设计思路，在提供App性能的同时，结合jQuery的简洁语法。

jUI未来的发展计划？ Top

张慧华：jUI 2.0 开发了一半，估计暂时放一放了，可以先考虑HTML5手机开发框架。
  • 大小: 60.4 KB


评论 共 29 条
29 楼 darkread 2015-02-01 10:02
j-ui至今IE6都有问题，错位啊
28 楼 不会游泳魚 2013-12-20 09:47
继续努力。支持。
27 楼 sniciq 2013-09-03 14:41
dongcb678 写道
woskyer 写道
sniciq 写道
dongcb678 写道
sniciq 写道
跟ExtJS没法比！不是一个级别的！

EXTJS就是一坨屎


呵呵！！


dongcb678：无知 傲慢

呵呵 extjs和dwz都在项目中用，extjs强大我不否认，不过我认为他这种开发模式就是一个错误，所以我个人认为是一坨屎

本来不想争的，也没啥好说的，明眼人一看 ExtJS和jqueryUI的界面，很明显就不是一个级别的，无论是美观、流畅、交互设计等方面；如果说EXTJS比jqueryUI大，其实用gzip压缩一下也就不到300K，而且当下浏览器越来越强大，客户端PC配置越来越高，使用EXTJS完全不会有卡的情况，当然系统设计也是很重要的一方面，不然再好的框架也没有用，但是同样的浏览器，同样的后台，EXT的渲染确实比jqueryUI快。当然了，EXTJS更适合做后端管理系统，组件丰富，可以实现快速开发，多功能都可以通过共用或者复制粘贴实现，这方面jqueryUI确实没有什么优势，EXTJS最大的缺点是结构庞大，真正精通EXTJS开发的比较少，学习周期较长；如果说你是想做网站，那当下就好的组合就是jquery+bootstrap。
26 楼 dongcb678 2013-09-03 08:59
woskyer 写道
sniciq 写道
dongcb678 写道
sniciq 写道
跟ExtJS没法比！不是一个级别的！

EXTJS就是一坨屎


呵呵！！


dongcb678：无知 傲慢

呵呵 extjs和dwz都在项目中用，extjs强大我不否认，不过我认为他这种开发模式就是一个错误，所以我个人认为是一坨屎
25 楼 woskyer 2013-09-03 08:50
sniciq 写道
dongcb678 写道
sniciq 写道
跟ExtJS没法比！不是一个级别的！

EXTJS就是一坨屎


呵呵！！


dongcb678：无知 傲慢
24 楼 sniciq 2013-08-30 14:17
dongcb678 写道
sniciq 写道
跟ExtJS没法比！不是一个级别的！

EXTJS就是一坨屎


呵呵！！
23 楼 dongcb678 2013-08-30 09:09
sniciq 写道
跟ExtJS没法比！不是一个级别的！

EXTJS就是一坨屎
22 楼 rodoke 2013-08-27 10:22
总体很好 但是页面加载渲染速度比较慢 如果页面数据量大 很容易出现假死状态 即使数据少加载速度也较慢
21 楼 sniciq 2013-08-27 09:37
跟ExtJS没法比！不是一个级别的！
20 楼 p2227 2013-08-26 23:38
主页的demo是不错，但拿下来看了一下源代码，还是有很多细致的地方没有做好的
19 楼 Lee_fannie 2013-08-26 20:21
放置了那么久的东西竟然是这个，这玩笑开发、大发了~~~~~
18 楼 xhui_init 2013-08-26 16:36
看了一下演示，感觉很不错，界面也很不错，相对比较全面的设计。
17 楼 wjpiao 2013-08-26 13:51
支持开源！!!
16 楼 keren021 2013-08-26 10:10
框架兼容性还行，至少我现在在ie6先没有碰到问题，但select组件默认选中有问题，网上有解决方案。不能在模式窗口上再弹出模式窗口。限制太多，文档比较少，需要专研。有的组件设计很有新意，特别喜欢：suggest组件
15 楼 zhuchao_ko 2013-08-26 09:35
开源吗？不开源那也是自己公司的自己的产品。
开源的话，记得补上文档。我很喜欢，支持。
14 楼 hxhnarkissos 2013-08-25 09:01
ahzzhen2 写道
很多组件是不成熟的，如select,button 原生的事件支持不好。如button disabled依然可以点击。总之，在一个项目中，用了一下，有点坑。

相当的坑，想拿来直接上手的某些基本功能都是没有的(如tree是没有方法返回已选择的列的)
13 楼 Dead_knight 2013-08-24 20:49
cuippan 写道
无语，这年头谁还TM的兼容ie6
Dead_knight 写道
首先鼓励一下，国内ui库开源出来的不多。
j-ui浏览器兼容性做的不好。ie6下面问题比较多。


是啊，我也是这么骂街的啊，关键是确实有一些政府、企业的内部项目都用IE6的……
12 楼 cuippan 2013-08-24 17:41
无语，这年头谁还TM的兼容ie6
Dead_knight 写道
首先鼓励一下，国内ui库开源出来的不多。
j-ui浏览器兼容性做的不好。ie6下面问题比较多。

11 楼 Dead_knight 2013-08-24 14:58
首先鼓励一下，国内ui库开源出来的不多。
j-ui浏览器兼容性做的不好。ie6下面问题比较多。
10 楼 vissalan 2013-08-24 14:33
新项目用了一下，卧槽，全是坑啊，建议专注一个大型项目试试，这样才能完善，自己拍脑袋想出来的功能是满足不了客户的需求的
9 楼 ahzzhen2 2013-08-24 13:07
很多组件是不成熟的，如select,button 原生的事件支持不好。如button disabled依然可以点击。总之，在一个项目中，用了一下，有点坑。
8 楼 guozhen_168 2013-08-24 10:49
我个人是很鼓励和喜欢开源的东西的，但目前这个框架的灵活性真的有待提高，代码也有待优化。
7 楼 osacar 2013-08-24 10:42
个人不喜欢这种框架啊。
6 楼 hardPass 2013-08-24 01:19
前段时间看到一个小伙子做的后台管理，不错，用bootstrap的
5 楼 hardPass 2013-08-24 01:18
非常务实，有效，实用，减少了大家的工作量！

但是缺少创新，或者说土。

4 楼 老钟在线 2013-08-23 21:13
看了一下演示，感觉很不错，界面也很不错
3 楼 obullxl 2013-08-23 20:58
这个框架不错。要是CSS能整合Bootstrap就好了。
2 楼 hoarhoar 2013-08-23 19:46
非常赞的框架，我用它开发了好几个项目了，现在有个问题点，就是pdf的文档是无法打开的，那个文档是坏了的，很久了，一直没人重新发一下。
1 楼 jerry 2013-08-23 18:43
鼓励！开源这种东西，最怕提死掉了，不维护了。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • dwz - 简单实用国产jQuery UI框架 - DWZ富客户端框架(jUI)

    dwz - 简单实用国产jQuery UI框架 - DWZ富客户端框架(jUI)

  • DWZ富客户端框架-其他

    DWZ富客户端框架(jQuery RIA framework)，是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。DWZ支持用html扩展的方式来代替...

  • 简单实用国产jQuery UI框架 - DWZ富客户端框架DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题)

    DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题) 修复使用xheditor插件IE下兼容问题：IE下打开一个含有编辑器的页面，然后关闭，再打开不能录入问题 修复多文件上传插件uploadify 的html扩展方式，java读取不...

  • DWZ富客户端框架使用手册

    资源名称：DWZ富客户端框架使用手册资源目录：概述. 4 学习DWZ 的建议...... 4 DWZ 区别于其它 JS 框架，最大的优点 4 设计思路 .... 4 版权声明 .... 5 DWZ 研发组介绍 ....... 5 HTML 扩展...... 6 Ajax 链接扩展...

  • DWZ富客户端框架(jQuery RIA framework) 1.5.2.zip

    DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架 1.5.2 更新日志：2016-01-14 调整DWZ插件注册和初始化机制；修复export插件bug；添加百度地图...

  • jQuery 富客户端框架 DWZ（jUI）培训视频

    2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

  • DWZ 富客户端框架

    DWZ 富客户端框架 jQuery RIA framework 是中国人自己开发的基于 jQuery 实现的 Ajax RIA 开源框架

  • DWZ富客户端框架dwz-ria-1.4.6

    DWZ富客户端框架dwz-ria-1.4.6,为你量身定做的，Web应用程序后台框架，非常漂亮，简单实用，不需要懂ajax,Jquery,就可以做出跟他们一样的效果喽

  • DWZ富客户端框架 v1.1.4稳定版本 (jQuery RIA framework) 国人开发.zip

    DWZ富客户端框架 v1.1.4稳定版本 (jQuery RIA framework) 国人开发.zip

  • dwz富客户端框架

    dwz富客户端框架使用指南，虽然用这个框架的应用不多了，但是许多老项目维护还是要用的

  • DWZ富客户端框架

    DWZ富客户端框架

  • DWZ富客户端框架，使用教程

    DWZ 富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery 实现的Ajax RIA 开源框架. DWZ 富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA 思路、轻量级 DWZ 框架支持用html 扩展的方式来...

  • DWZ富客户端框架v1.0.6(含源码)

    DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ 富客户端框架设计目标是简单实用, 让开发人员少写js甚至不写js的情况下, 也能用ajax做项目. 比较适合做二次开发...

  • DWZ富客户端框架(js源码)

    DWZ富客户端框架javascript源码 在线演示地址 http://dwz.duqn.com （若要下载其他部分，点击 标签“DWZ富客户端框架”，即可看到）

  • DWZ富客户端框架使用手册.zip,离线版

    DWZ富客户端框架使用手册,离线版,真正能用的离线版。找了好多都是离线不能看的，终于找到了，分享给大家。发现打包了上传能用，以前的人直接上传chm会坏掉

  • 简单实用国产jQuery UI框架 - DWZ富客户端框架(jUI)

    http://code.google.com/p/dwz/

  • 适合做网站后台的DWZ富客户端框架(jQuery RIA framework)

    DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ支持用html扩展的方式来代替javascript代码, 基本可以保证程序员不董javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也...

  • java+sql server项目之科帮网计算机配件报价系统源代码.zip

    sql server+java项目之科帮网计算机配件报价系统源代码

  • 【java毕业设计】智慧社区老人健康监测门户.zip

    有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上

Global site tag (gtag.js) - Google Analytics