说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【开源专访】DWZ团队:致力打造最简单的Web前端开发方式

HTML文档下载 WORD文档下载 PDF文档下载
jUI是DWZ团队开发的基于jQuery的Ajax RIA开源框架,支持用HTML扩展的方式来代替JavaScript代码,使不懂JavaScript的程序员也能使用各种页面组件和Ajax技术。CSDN记者采访了DWZ团队,请他们来详细介绍。

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

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

  • DWZ团队官方微博:http://weibo.com/dwzui
  • jUI(DWZ)项目在线演示地址:http://j-ui.com
  • 项目托管地址:https://code.csdn.net/dwzteam/dwz_jui

CSDN记者采访了DWZ团队,请他们来详细介绍一下jUI框架的由来及他们的开发、开源心得。


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

CSDN:先介绍一下你们的团队吧!

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

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

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

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

CSDN:jUI项目最初的名字为DWZ,这个名字是怎么来的?后来为什么又改为jUI?

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

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

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

CSDN:jUI项目的开发初衷是什么?

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

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

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

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

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

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

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

  • 用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开发经验的开发人员,可以非常方便地扩展其功能。

CSDN:相比其他前端框架,jUI的优势或特点是什么?

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

CSDN:你们也开发了一些整合项目,比如SSH+jUI、ThinkPHP+jUI、ZF+jUI、YII+jUI,这些项目的目的是什么?未来还会整合哪些项目(框架)?

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

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

  • dwz4j企业级Java Web快速开发框架(Hibernate+Spring+Struts2)+ jUI整合应用
  • dwz4j企业级Java Web快速开发框架(Mybatis + SpringMVC)+ jUI整合应用
  • ThinkPHP + jUI整合应用
  • Zend Framework + jUI整合应用
  • YII + jUI整合应用

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

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

CSDN:jUI在浏览器兼容方面表现如何?

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

CSDN:在jUI开发过程中,你们是如何分工的?又是如何协作的?你们平时使用的开发工具是什么?

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

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

我们使用的工具如下:

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

CSDN:用户如何在自己的项目中整合jUI?

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

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

CSDN:据你们所知,目前大约有多少项目采用jUI?

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

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

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

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

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

CSDN:jUI未来的发展计划?

张慧华:jUI 2.0 开发了一半,估计暂时放一放了,可以先考虑HTML5手机开发框架。

CSDN:你们如何看待国内的开源环境?对于国内开源领域,你们希望CSDN做些什么?

我觉得国内开源一般都是从非盈利的兴趣爱好项目开始的,很难通过捐赠获利。想要实现盈利可能需要一个全新的盈利模式,比如做技术支持、培训、定制化开发、政府资助、风险投资等。

CSDN可以通过社区的力量共同推进开源软件发展,希望CSDN开源社区能够适应国内开源环境,提供一些特殊功能,能够让开发者、参与者、使用者和社区都能有所收获。比如,社区最好有一个完善的积分系统,来激励大家回答问题,解决问题。针对每个开源项目提供社区版块,方便集中管理开源项目中遇到的各种问题。

【开源专访】系列文章致力于对国内外优秀开源项目作者、团队的专访,挖掘项目背后的故事和更多技术细节,以及对项目的宣传、推广。同时,我们也希望广大开源开发者和爱好者自荐或推荐更多优秀的开源项目。欢迎留言或@CSDN研发频道。

开发响应用户输入的数据库web Server-Delphi资料 利用Delphi编程发送E-mail 利用Delphi编写Socket通信程序 利用Delphi开发网络数据库应用 在许多系统中,出于安全或其它原因,常常要求随时对键盘进行监控,一个专-Delphi资料 链接的视觉效果-Delphi资料 如何从域名名得到IP?-Delphi资料 如何动态改变/添加网络设置中的 TCP/IP 的 DNS 地址-Delphi资料 如何获取CapsLock 、 Insert 等键的状态?-Delphi资料 如何在程序中动态取得Win95/98的网络邻居中的工作组及计算机名?-Delphi资料 提高客户机/服务器应用系统性能的一些方法-Delphi资料 网络和通讯编程-Delphi资料 WebBrowser流程讲解及如何判断下载网页成功-Delphi资料 用Delphi 3.0实现运行于浏览器内的客户 用Delphi编写ASP的ActiveX 用Delphi编写CGI程序(五) 用Delphi编写CGI程序返回图象 用Delphi程序获取拨号连接的动态IP地址 用Delphi创建Internet快捷方式 用Delphi实现NetBIOS广播收发 用Delphi实现网络驱动器的映射和断开 用Delphi实现远程屏幕抓取 用DELPHI制作留言板 再谈用Delphi程序获取拨号连接的动态IP地址 在DELPHI程序中拨号上网 在DELPHI程序中获取网络资源信息 在Delphi程序中应用IE浏览器控件 在Delphi中调用NetscapeNavigator 在Delphi中使用flash控件 在Delphi中使用IP控件 在程序中动态取得Win95/98网络邻居中工作组及计算机名-Delphi资料 改变光驱盘符?很急很急 在Oracle中怎样加已经存在的数据文件? 我想请高手帮忙 !! 请问目前那一本参考书对DELPHI初学者有很大提高? 一个关于udp重发的问题 如何在delphi程序里调用vc写的exe执行文件。 如何将query中的内容输出到文本文件,然后还能将该文本文件再导入进来?急急急!!!!!!!!!!! 急急急!!我的计算机找不到硬盘了45分 如何求任意多边形的重心 紧急求助:请问java有没有比较丰富的多媒体控件?比如录音的控件??? 急急急!!!我的计算机找不到硬盘了,45分 如何把一个字段的内容求和,然后把结果存入另一表! 请教,怎样把一个记录数组用VB读入ACCESS 2000数据库中? 关于货币类型的问题? the script too large ????????我快疯了。 什么地方有Sybase与Oracle的比较资料? 急急急!!!我的计算机找不到硬盘了,40分 问一下大家 复活节彩蛋 win2000 professional下如何配置weblogic6.0 jsp和javasript如何通讯? 急!!!如何把'¥100'字串转化为浮点型100.00 用OleContainer1将一个WORD文档存进数据库后如何将它从数据库中取出??? 关于SNMP的问题(请高手回答,送40分) 谁想过要戒水?戒成了吗?又渴了吗? 我用在各种机器上使用Win2000,从来没有down过, 真是太奇怪了??? 请问如何确定操作系统系统是中文的还是英文的? 向外国用户发注册码时候应该说些什么,才能让别人觉得你比较专业? 如何捕获ADO的异常信息 struct结构的数据存储是用的什么顺序方式呀? 能介绍几本关于BCB的适合初学者阅读的书吗? 高手进来,struct结构的数据存储是用的什么方式呀 高分!高手请进!!! Newton 有关StoredProc的 各位大虾进来看看,Debug时的错误~~~~~~~ First-chance exception 和 User breakpoint ,帮帮我啊!!! 虽然我也回复没有分,但有意思的帖子,但我对分数高的帖子更有热情,我是不是很势利?? 我的服务器是unix 哪位提供最简单的图片存入库中的代码 谁能得到拨号上网所使用的电话的号码? 关于视中图形(非图像)的缩放问题! 想不通啊~~ 谁来帮帮我~~~?? 哪里可以宕到:Robohelp Office(亚洲版),急!! 谁能告诉我PWS怎么用 小弟刚下载了j2sdkee1.2.1 ,但不知道如何配置,那位大哥愿意帮忙,详细讲一讲如何配置。 TOleContainer怎么没有滚动条呀 在哪里可以找到mschart5.cab? 明天在莫斯科将产生2008年奥运主办国,请猜是哪个城市主办!答对者有分!(可加到204) 请问有没有做电力系统方面开发的? IIS是什么 如何用VB向串行口发送一个数据? 英语翻译材料:紫菜 2包 青瓜 2条 蟹柳 1包 蛋 3只 白饭 大量 白醋 2汤匙 萝卜 1条 1)先把青瓜,蟹柳,材料:紫菜 2包青瓜 2条蟹柳 1包蛋 3只白饭 大量白醋 2汤匙萝卜 1条1)先把青瓜,蟹柳,萝卜清洗 请帮我把“一切因你而存在、一切因你而精彩”用英语翻译一下!急、简洁点就行、 英语翻译我梦想中的房子是要建在山水环绕的地方,那里山清水秀.采用中西,故现代结合的建筑风格.房子的主体部分用的材料以玻璃木材为主.房子外形与大自然融为一体,给人以赏心悦目的感 英语翻译SPACE APPLICATIONInternational Organizer:CP EXHIBITION Rm 1703,Tung Wai Comm'l Bldg109 Gloucester Road,Wanchai,Hong KongPlease fill up the followingdetail:Company (ExhibitorAddress I/We the undersigned wish to participate inthe above exhi 英语翻译大连老菜菜谱1.\x05 溜肝尖 2.\x05 鸡里蹦 3.\x05 猪里蹦 4.\x05 溜鱼片 5.\x05 苏杨大烤 6.\x05 滑溜肉 7.\x05 糖醋小黄花鱼 8.\x05 炒肉拉皮 9.\x05 红油肉 10.\x05软炸虾仁11.\x05 辣肥肠 12.\x05溜肚 你永远是我最美好的曾经 英语翻译 英语翻译The Seller agrees to hold the Buyer harmless against liability and direct (not consequential) cost resulting from infringement of any unexpired United States patent now issued,involving any equipment exclusively designed and manufactured 英语翻译 太棒了!(英文翻译) 英语翻译1.上周末,我和朋友去隔壁县的一个村寨旅游 2.当我们接近那里时,发现它是模仿古代某个城堡而建的.3.它以养鸟而闻名 英文翻译“多谢你的巧克力” 我认为我英语很棒.英语翻译 英语翻译我已经打电话向中国西联汇款咨询过了,叔叔在汇款单上填写我的姓名顺序还是错误的,所以导致汇款现在还是取不到;这是中国西联汇款向我提供的美国西联汇款免费专线:800-325-600 用英语翻译:在书包后面有一些巧克力吗? 英语翻译:我认为他们很棒. 英语翻译Well,here we are.About half a year into our relationship.But as to me,it just feels like we have spent many many years together already for I feel I am a part of you.I can clearly remember our first time together,the way you kissed me,the 巧克力对你的健康有利的英语翻译 英语翻译(你们的孩子永远是最棒的) 英语翻译Don't be sorry,I have loved my life.I have a lovely wife,4 children who will do anything for me and 7 grandchildren that are the loves of my life.I just want to say one thing.I am not sure how experienced you are with the internet but don 巧克力包装盒的英文翻译 英语翻译 你本来看上去很棒 英语翻译我很希望能为你做点什么,同时我也想成为你的笔友.请尽快给我回信.我也想了解关于你更多的情况. 英语翻译One of the few foods which appeals to people all over the world is chocolate.Developed by the Aztecs in South America,chocolate was brought to Europe by Spanish explorers around 1500 and soon became a fashionable drink.By the 19th century 英语翻译This movie __is __ .He is __ it,__. 英语翻译你们好!昨天已经在西联取到了汇款,共:$400美元,谢谢大家对我们的关心,奶奶非常感谢simeona,新年假期完了,现在我也回工厂正常上班了,夏威夷的冬天不冷吧?现在家乡的温度只有8℃ 英语翻译 中国的北京故宫真的很棒!用英语翻译 “xx省xx市人民医院”正规英文翻译 这些美味的蛋糕是给我们的吗用英语翻译 英语翻译1.to show how much we're going to miss her,let's have a surprise party for her next Friday the 28th.2.bring Ms.Steen to the party without telling her so that she can be surprised.3.I look forward to hearing from you all. 英语翻译:对XX来说这个太大了 我从不吃像蛋糕这样的甜食英语翻译怎么说 我将要离开你,希望你要过的很好用英语翻译怎么讲 英语翻译 给他买个生日蛋糕就足够了 英语翻译 我不是寄生虫,离开你我也会活的很好的英语翻译 “吃一个有葡萄的蛋糕.”用英文翻译? 玛丽正在等待她的生日蛋糕.英语翻译! 有真厉害 用英语翻译 喜欢吃蛋糕用英语怎么说 生日蛋糕用英语怎样说 也许单身很好 怎么用英语翻译 我们吃些蛋糕好吗?英语翻译 我想要一个插着蜡烛的生日蛋糕英文翻译 希望你过得好点用英语翻译 用英语说出果仁巧克力蛋糕制作方法 英语翻译they _____ the birthday of their motherland _____ _____ songs 英语翻译The teacher tries many ways to ____ ____ not difficult for us ____ ____ ____. "制作巧克力蛋糕的食谱"用英语怎么说 英文翻译 "祝愿所有11月生日的朋友生日快乐" 这是学英语的好机会 英语翻译 黑樱桃巧克力蛋糕用英文怎么写? 英语翻译注意是将要. 英语翻译:“学英语是很好的,但得慢慢来,循序渐进” 巧克力 蛋糕 巧克力蛋糕英语 翻译 最后,人们吃了她妈妈亲手做的生日蛋糕 英语翻译“你经常犯什么样的错误呢?”和“你认为学英语的最好建议是什么?” 英语翻译You’ll need four eggs three tomatoes one onion a little oil salt and pepper first slice the onion and tomatoes next in a frying pan fry the sliced onions and oil until it turns light brown then add the tomatoes after frying the tomatoes 其实大家都知道,我们都不是彼此的那杯茶 上句求英文翻译..麻烦了 有什么很好学英语的方法?对女孩子来说.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn