jQuery 富客户端框架 DWZ（jUI）开发团队专访
程序员文章站
2022-02-22 08:19:06
...
jUI（原DWZ）富客户端框架是DWZ团队开发的基于jQuery实现的Ajax RIA开源框架，支持用HTML扩展的方式来代替JavaScript代码，不懂JavaScript的程序员也能通过jUI来使用各种页面组件和Ajax技术。jUI基于jQuery，你可以非常方便地定制特定需求的UI组件，并以jQuery插件的形式发布。
jUI项目在“2013年度中国优秀开源项目评选”中获得较高票数，并被专家评审团评为“2013年度中国优秀开源项目”。
从左到右：杜权、张慧华、吴平、郑应海
jUI项目在“2013年度中国优秀开源项目评选”中获得较高票数，并被专家评审团评为“2013年度中国优秀开源项目”。
- DWZ团队官方微博：http://weibo.com/dwzui
- jUI（DWZ）项目在线演示地址：http://j-ui.com
- 项目托管地址：https://code.csdn.net/dwzteam/dwz_jui
从左到右：杜权、张慧华、吴平、郑应海
先介绍一下你们的团队吧！
杜权：从事UI/UE前端设计工作，有13年产品设计工作经验。jUI项目发起人，负责用户界面设计、用户体验设计，负责jUI组件HTML结构定义、CSS定义，并负责jUI组件开发完成后的验收工作。
吴平：一直从事Java开发工作，对前端开发也是有一定的兴趣，所以才会参与到这个项目中来。jUI创始人之一，在项目中主要负责jUI组件的JS开发工作。
张慧华：一直从事Java开发工作，对前端开发比较感兴趣，2013年开始从Java转到HTML5手机App开发。在项目中主要负责jUI组件JS开发，以及jUI和Java、PHP整合版本的开发。
DWZ团队目前除了3个创始人，还有几个核心开发人员：郑应海、张涛、冀刚。此外，还有一些没见过面的网友也参与到项目中。
吴平：一直从事Java开发工作，对前端开发也是有一定的兴趣，所以才会参与到这个项目中来。jUI创始人之一，在项目中主要负责jUI组件的JS开发工作。
张慧华：一直从事Java开发工作，对前端开发比较感兴趣，2013年开始从Java转到HTML5手机App开发。在项目中主要负责jUI组件JS开发，以及jUI和Java、PHP整合版本的开发。
DWZ团队目前除了3个创始人，还有几个核心开发人员：郑应海、张涛、冀刚。此外，还有一些没见过面的网友也参与到项目中。
jUI项目最初的名字为DWZ，这个名字是怎么来的？后来为什么又改为jUI？
杜权：DWZ取名为“杜权、吴平、张慧华”姓氏拼音首字母，起初由我和吴平用了两个月的业余时间开发了第一版，之后主要是张慧华维护和小步更新。我们想把这套界面框架做成完全*、开放、安全、不嵌入任何内码的一套界面框架，让它成为行业标准，所以我们重新选择了名字jUI作为框架名称。j的中文寓意很丰富，比如可以代表界面、简单、简洁、教导、焦点、角度等，从技术上可以理解为JavaScript、jQuery、JSON等。而我们三个人又是在Java项目的开发工作中结识，并成为朋友，合作伙伴。
吴平：DWZ这个名字更多的是代表我们这个团队。
张慧华：现在DWZ作为一个团队代号，jUI就是DWZ团队下的一个产品。在DWZ这个团队下还有Java企业级开发框架、ThinkPHP+jUI整合应用、ZendFramewark+jUI整合应用，以后还会有HTML5手机开发框架。
吴平：DWZ这个名字更多的是代表我们这个团队。
张慧华：现在DWZ作为一个团队代号，jUI就是DWZ团队下的一个产品。在DWZ这个团队下还有Java企业级开发框架、ThinkPHP+jUI整合应用、ZendFramewark+jUI整合应用，以后还会有HTML5手机开发框架。
jUI项目的开发初衷是什么？
杜权：在我职业生涯中有过多次跳槽经历，做过的大大小小的网站和软件有千余个，从中感觉到无论是大公司还是小公司做开发都存在着同样的问题——做设计的不懂代码，写代码的不懂设计。在整个界面实施的过程中频频遇到设计的界面无法实施到产品中，而我在学设计时对编程也有浓厚兴趣，对编程思想和代码结构都比较清楚，掌握的技术知识面比较广泛，所以对于一个功能呈现到界面上该如何表现，代码结构该怎么写，在这方面理解更深刻。在工作中不断总结方法，发现大多数界面在切割成独立的个体时，代码都可以重用，为了制作界面的工作更简单、更高效，我们尝试在一套HTML上采用不同的CSS来实现多种风格，基于这样的思路把界面代码片段化，分成一个个功能组件，而页面就可以由一个或几个这样的组件组合出来。我们想让JS编码能力稍弱的设计师或程序员学习和使用这种方法，从而提高工作效率，提升代码水平，缩短时间成本。
吴平：最开始我们在公司的项目中也用过市面上的一些组件框架，但始终觉得用起来都挺麻烦的，后来干脆就自己编写组件，后面凭着我们对前端开发的兴趣，决定更系统地开发出全套的组件。至于为什么会开源，应该说源于张慧华的一次尝试。
张慧华：jUI项目开源算起来快4年了，在这之前我们也没有做过开源项目。刚开始我把jUI打了个zip包上传到了CSDN，发现关注的人还挺多，后来就放到Google Code上。当时国内还没有Code平台，第八届开源大会后把代码迁移到CSDN Code平台后下载速度明显快多了。
我们几个属于技术*者，平时没事就会一起讨论一下技术问题。都是纯做技术的，没有任何营销经验。通过做开源项目可以认识各方面的人才，建立人脉关系，为以后的发展做准备。就这样慢慢走向了开源之路。
吴平：最开始我们在公司的项目中也用过市面上的一些组件框架，但始终觉得用起来都挺麻烦的，后来干脆就自己编写组件，后面凭着我们对前端开发的兴趣，决定更系统地开发出全套的组件。至于为什么会开源，应该说源于张慧华的一次尝试。
张慧华：jUI项目开源算起来快4年了，在这之前我们也没有做过开源项目。刚开始我把jUI打了个zip包上传到了CSDN，发现关注的人还挺多，后来就放到Google Code上。当时国内还没有Code平台，第八届开源大会后把代码迁移到CSDN Code平台后下载速度明显快多了。
我们几个属于技术*者，平时没事就会一起讨论一下技术问题。都是纯做技术的，没有任何营销经验。通过做开源项目可以认识各方面的人才，建立人脉关系，为以后的发展做准备。就这样慢慢走向了开源之路。
jUI的设计思路和具体实现是什么？如何使得开发人员不写JavaScript的情况下，也能用Ajax做项目和使用各种UI组件？
杜权：做界面首先要清楚地理解界面，相信大多数人对界面的理解只是好看不好看，而我对界面感官上的理解首先是把界面和内容分开，无论是产品经理还是界面设计师对界面的理解都是非常重要的，理解不清晰将无法做出一个高性能的产品，将直接影响到整个产品的质量。
那么什么是内容？什么又是界面呢？内容是一个页面要传达给我们的信息，包括文本、图片、媒体等；而界面就是布局和色彩，无论是布局和色彩都是修饰内容用的，包括宽高、位置、边框、投影、大小、颜色、字体等。从技术角度理解界面就是：
另外，我们针对不会写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开发经验的开发人员，可以非常方便地扩展其功能。
那么什么是内容？什么又是界面呢？内容是一个页面要传达给我们的信息，包括文本、图片、媒体等；而界面就是布局和色彩，无论是布局和色彩都是修饰内容用的，包括宽高、位置、边框、投影、大小、颜色、字体等。从技术角度理解界面就是：
- 用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的优势或特点是什么？
- 完全开源，源码没有做任何混淆处理，方便扩展
- CSS和JS代码彻底分离，修改样式方便
- 简单实用，扩展方便，轻量级框架，快速开发
- 仍然保留了HTML的页面布局方式
- 支持HTML扩展方式调用UI组件，开发人员不需写JS
- 只要懂HTML语法不需精通JS，就可以使用Ajax开发后台
- 基于jQuery，UI组件以jQuery插件的形式发布，扩展方便
你们也开发了一些整合项目，比如SSH+jUI、ThinkPHP+jUI、ZF+jUI、YII+jUI，这些项目的目的是什么？未来还会整合哪些项目（框架）？
吴平：这些整合的项目基本都是张慧华一个人的杰作，我跟杜权参与得很少，我们更多是在jUI项目本身上。
张慧华：目前的整合项目有：
还有一个原因是我们还想推广dwz4j企业级Java Web快速开发框架，现在该项目还没有相关文档，后续会把文档补上。
张慧华：目前的整合项目有：
- dwz4j企业级Java Web快速开发框架（Hibernate+Spring+Struts2）+ jUI整合应用
- dwz4j企业级Java Web快速开发框架（Mybatis + SpringMVC）+ jUI整合应用
- ThinkPHP + jUI整合应用
- Zend Framework + jUI整合应用
- YII + jUI整合应用
还有一个原因是我们还想推广dwz4j企业级Java Web快速开发框架，现在该项目还没有相关文档，后续会把文档补上。
jUI在浏览器兼容方面表现如何？
吴平：对于浏览器兼容方面我们通过两种途径来解决：一方面，杜权在CSS兼容方面做了大量的工作；另一方面，利用JS来处理一些CSS不太容易处理的兼容性问题。可以说当时在浏览器兼容性方面下了不少工夫，出来的效果至少对于我们自己来说，还算是满意的。
在jUI开发过程中，你们是如何分工的？又是如何协作的？你们平时使用的开发工具是什么？
由杜权设计好界面，并以HTML结构形式提交到内部的SVN服务器，然后再根据时间安排分别提交给吴平或张慧华开发具体的JS代码。
杜平在提交HTML时，分别把功能需求写在每个组件的独立页面中，并以注释的方式分别在代码行中描述当前要用的属性和要实现的效果应该怎么控制。JS编码完成后通过内部服务器直接测试，如果没有问题就可以上线。
我们使用的工具如下：
杜平在提交HTML时，分别把功能需求写在每个组件的独立页面中，并以注释的方式分别在代码行中描述当前要用的属性和要实现的效果应该怎么控制。JS编码完成后通过内部服务器直接测试，如果没有问题就可以上线。
我们使用的工具如下：
- Java开发工具：Eclipse
- PHP开发工具：Zend Studio
- 前端开发工具：Aptana Studio、JetBrains WebStorm
- HTML5移动开发工具：JetBrains WebStorm
- 设计工具：Photoshop、Illustrator
用户如何在自己的项目中整合jUI？
吴平：在自己的项目中整合jUI，我自己认为是比较简单的，因为一般只要按照文档中对组件的描述，正确写组件的HTML代码，并加上对应的扩展属性，基于就可以了。
但对于初次使用的用户来说，jUI的文档可能还不够详细，这里也希望在使用jUI方面有一定经验的朋友，可以分享一下使用心得，感谢不尽。
但对于初次使用的用户来说，jUI的文档可能还不够详细，这里也希望在使用jUI方面有一定经验的朋友，可以分享一下使用心得，感谢不尽。
据你们所知，目前大约有多少项目采用jUI？
杜权：我们没有刻意统计过用户量，从朋友和以前的同事提供的信息中得知，至少有几个大公司正在使用我们的框架，比如新浪微博商业后台管理、IBM电子商务解决方案、联通内务管理系统等等。
张慧华：现在jUI有8个1000人的QQ群，我大概从群里了解过，很多人在项目中使用了jUI。
张慧华：现在jUI有8个1000人的QQ群，我大概从群里了解过，很多人在项目中使用了jUI。
jUI在移动平台上表现如何？或者是否有专门针对移动优化的版本？
吴平：之前的版本在移动平台上的表现可能不及在PC上的表现那么好，我们也确实考虑过针对移动设备专门优化一个版本出来。
张慧华：计划以后开发一套HTML5移动App开发框架，可以参照Sencha Toucha的App设计思路，在提供App性能的同时，结合jQuery的简洁语法。
张慧华：计划以后开发一套HTML5移动App开发框架，可以参照Sencha Toucha的App设计思路，在提供App性能的同时，结合jQuery的简洁语法。
jUI未来的发展计划？
张慧华：jUI 2.0 开发了一半，估计暂时放一放了，可以先考虑HTML5手机开发框架。
上一篇： iOS7 人机界面设计指南