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

【开源专访】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研发频道。

“2013年度中国优秀开源项目征集”活动最后三天 为什么开发者倾向于使用杂乱无章的免费工具 EMC合作伙伴销售经理杜术清:实现云的三种途径 开发者想走向海外:你融入老外的圈子了吗? 前微软工程师:美国监控和直接访问服务器?这不太可能 代码、TDD速查表 如何选择前端架构:服务器端HTML vs. JS部件 vs.单页Web应用 世界上最高深的Android特洛伊病毒 招聘iOS开发,老板必问的5个问题 护航科技吴伟湘:IT离线安全体检服务将带来颠覆 百度王继平:移动互联网时代云平台思路 “第八届开源中国开源世界高峰论坛”火热开启 微软发布SQL Server 2014预览版,展示内存数据库技术 帮助软件开发者提高效率的10个小窍门 我想做个程序员:Technovation Challenge圆女孩编程梦想 未来我们开发的Google Glass应用将会是什么样? 独家:前RIM大中华区总经理刘征宇,加入Appconomy 用一个API搞定一切 Segment.io为移动开发者提供便利的分析数据分发服务 TIOBE 6月编程语言排行榜:JavaScript回归前十 《Kingdom Rush Frontiers》上线后 迅速抢占27个国家游戏榜首 移动周报:85后程序员,iOS开源项目,细数7天大事件! Instagram:从Redis到Cassandra 成本节省1/4 乐元素CTO凌聪访谈:游戏引擎技术选型之王道 iOS 7的新设计并非止于外表 WWDC 2013大会10大启示:正向开发者支付大量现金 云计算大会微软专场成功举办 Windows Azure公众预览版上线 IBM全球大裁员 在美国裁员已经开始 动动鼠标,决定“中国十大优秀开源项目”的归属 为改善Flickr 雅虎收购拍照应用开发商GhostBird 让你轻松学习新代码库的六个步骤 RESTful API 设计最佳实践 代理Type分别为transparent,anonymous,high anonymity,优劣? 为感谢computersim在大力相助,特奉送100分,快来拿啊 请教网上书店系统的设计思想和例子。 VC中使用FLASH的OCX控件如何取得Movie的原始大小,且如何按指定比例缩放?问题解决后必给分。 有关“隐藏”,“覆盖”的一些问题: 如何把A库中A表原样复制到B库中去? 怎样取得鼠标点击DataGrid控件时是哪一行,哪一列呢?(C#) ISA 2K发布多个WEB 服务器问题,(我都要疯了)高分求救 这个问题怎么办?? (ADO OPEN) Up 有分! 母亲生日,你觉得送什么礼物为好? 用c++ 写的 hello 程序在unix g++ 编译通过后,运行出错 如下几个初级问题要问,高手们请进-> SQLSERVER高手进来聊聊........ 怎样用代码实现两台电脑之间的文件传输? 哪位知道Microsoft Firewall Client 的下载地址? 关于RECORDset的问题,求教 如何在web页面使用 Windows 窗体控件,最好有例子! 使用DOM的XMLHttpRequest对象来发送xml请求,但当返回的响应带有中文时候,在PDA上无法正常显示,我使用MultiByteToWideChar也没用。有人 请问在窗口中放置控件时,PB是否有靠近格线对齐的功能。如果有,在哪设置? DELPHI中FASTNET组件使用方法 请问在SELECT查询中怎样娶得行号? 在一般的类中如何得到当前文档的指针? 巨菜问题:重装xp后grub启动菜单消失,怎么办? FIP上传问题,非常着急,在线等,解决就结贴, 用javaScript打开窗口后,原窗口的gif动画不动了 FindWindow的用法 反正没几个人能回答,发来玩玩。 在当前文档中如何实现刷新操作? 构造sql语句时,表名或字段有可能是sql的保留字段,如何解决? 小弟急需文件操作和线程管理方面方法技巧的资料,望各位英雄赐教 怎么将power point打包成exe 如何恢复execl中vba的密码 怎样在ISA中设置带宽限制? 如何实现数据库的更新?? 搜胡首页是<<美英百架战机空袭伊拉克 攻伊序幕已拉开>>,但... string 读取的问题。 正在看c++primer的请看(高手当然也能看拉) 有哪位高手用过bcp_exec导入数据吗? vb数据库安全问题 大学新生师弟师妹们很快要来报告了,大家能不能帮我想想一些迎新的宣传标语? 数据窗口中dddw下拉前触发的事件是哪一个(使用pbm_dwndropdown无效)? 有关的vs.net的简单问题! 下周可能要去勞動局!矛盾激化! 博士,硕士,教授等请进,关于前途的问题: 如果明天csdn也被封了,我们还能做什么???? 请问SQL SERVER区分大小写吗 关于lcc-win32 winme下如何调整显示器的刷新率 大家练练手,征集下面这个小程序的算法!!!(很有趣的阿!!) 消失的古代王朝---亚述 Web services 的应用。 请问大一无机化学中电动势为何一定要这样表示:E(Cu离子/Cu),有什么含义吗? 连词成句.We,music,on,have,and,P.,E.,Wednesdays(.) 奥运五环为什么红色代表美洲,蓝色代表欧洲请看清楚问题. 环太平洋里面提到机甲,会说像是“也噶”一样的音,单词是怎么拼写的? 影响铁吸收的因素有哪些? 减法运算的意义是什么? “冧”字噶拼音系?.. 磷化膜很光滑会对喷塑涂层的附着力有影响吗?划格试验还没有用胶布,涂层一吹就脱落了,脱落涂层下面钢材很干净,无油无锈.烘烤温度也加高了还是不行,影响因素有哪些?钢材、磷化、塑粉、 有理数减法的定义 先回24字的采纳,要是一句话. 喷塑附着力问题附着力差 关于中国历史上所签署的各个不平等条约的时间,地点,原因,以及影响在中国18世纪中后期到辛亥革命时签署的所有条约都对中国造成了很大的影响,那么他们的时间,地点,原因,影响分别是什么 先回23字的采纳,要是一句话. 有哪个兄弟知道,测量喷塑漆层附着力的工具是什么啊?以前见过,不知道叫什么名字,类似螺纹塞规的样子. 英语翻译刚开始进公司的时候,我协助经理组建销售部门,我的主要工作是收集市场信息,走访相关企业,了解市场供求信息,并写市场分析报告.之后我开始负责公司项目推广工作,主要是定期召开 Cu在化学中代表什么 一定量的Na2CO3和NaHCO3的混合物跟足量的盐酸反应,共耗酸0.8摩,生成CO20.5摩,求Na2CO3`NaHCO3的质量各多 ‘升’字的英文翻译? 先回先采要有15个字的一句话. 吸盘式挂钩只能挂在玻璃上的原因 铁元素在食品中生理功能 化学式Cu能否表示分子? 为什么NaHCO3 ,Na2CO3与酸反应时,NaHCO3反应的更剧烈? 影响Fe吸收的主要因素有哪些? 晟 这个字的拼音是什么?这个字的拼音是什么? 这幅图你能看到几个字?听说最多的能看到18个字. 这个用系统命名法怎么念?为什么不念做3,5-二甲基-5-乙基庚烷? ‘晟’这个字怎么念?拼音和几声?不好意思,我身边没有字典,又遇到这个平时不用的字,谢谢帮助者. 求一张写着字的图片.上面写着一句话的就是张爱玲的那一句"明明不相干的,也会在心中拐好几个弯想到你"把图片贴出来或者把网址交出来~额.是手写的. 系统命名法问题2-二甲基戊烷对吗?是不是应该写成2,2-二甲基戊烷 Na2CO3和NaHCO3与酸的化学反应速率那一个快一些? 如果这幅图旁边要配上一句话或一个词,大家认为配什么好一些?最好是偏现代些的,不要太长,一句话或一个词,也可以是小说动漫电影各种各种的语录什么的,也可以是原创的,只要合适意境, 关于系统命名法的问题命名时-CH2C(CH3)3和-CH(CH3)CHCH3哪个在前面?前一个更大,后一个取代基的取代基更靠前打错了,是-C(CH3)2CH2CH3和-CH2CH(CH3)CH3 这个字“晟”读什么? 图像PS,一句话前面加几个字,急帮PS一下,把请你吃哈根达斯改成请全班吃哈根达斯,急 噶的读音 Na2CO3和酸反应生成等质量CO2消耗的酸一定比NaHCO3多吗?除了盐酸外,还有其它酸可以和NaHCO3和Na2CO3反应? 准噶尔盆地和塔里木盆地的成因是什么? 噶的读音为 请用下列两个词各写一句话造就;练就; 几个字或者一句话加上一个美女的图,叫什么像这个 准噶尔盆地 怎么读 为什么淋巴细胞所处的内环境是淋巴和血浆,毛细淋巴管壁细胞的内环境是淋巴和组织液 请用下列两个词各写一句话.急造就;练就; 奥运五环中的绿环代表的是澳洲还是大洋洲?越详细越好,最好把国际规定也弄上来. 淋巴细胞生活液体环境是淋巴血浆,为什么不像毛细淋巴管壁细胞液体环境内有组织液?毛细淋巴管壁细胞和淋巴细胞有什么关系?淋巴细胞生活液体环境是淋巴,血浆,却没有组织液,而毛细淋巴 Cu 可不可以表示 铜元素但我觉得可以 三个不平等条约的签订对近代中国社会性质的影响是什么 组织液是怎样进入淋巴管的?淋巴为何又是单向到血浆的? Cu是什么元素 电磁吸盘吸在玻璃上为什么要排干空气 雅鲁藏布江,该河谷地处 板块和 板块交界处,因此 资源雅鲁藏布江,该河谷地处 板块和 板块交界处,因此 资源丰富.这里农业发展类型属于 农业 4Cu4Nb是什么意思,cu,nb,是代表什么元素的 ps中ctrl+shift+6什么意思? 雅鲁藏布江流域处于板块交界处,但火山活动较少,其原因可能是 近代中国第一批不平等条约 名称和内容 ps里ctrl+a+c+v是什么意思? 化学名称Sb、Cu、Mn、Zn各代表什么金属 列举近代签订的不平等条约的名称 有理数减法概念谁能给我一些有理数减法的概念,越多越好,
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘