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

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

英特尔推出基于WebRTC的协同通讯方案 凸显本土创新“软”实力 一周消息树:不同设备不同界面的Windows 9正在逼近! 乐卓网络CEO李澄澄:移动游戏IP是把双刃剑 高性能动画!HTML5 Canvas JavaScript框架KineticJS Swift最酷炫的七大功能 微信开发者大会讲师介绍:柳峰与你一起玩转公众平台应用开发 TIOBE 2014年7月编程语言排行榜:仅发布1月,Swift进Top 20! 艾格拉斯CEO王双义:手游自研引擎的荣耀之路 以招行为例,深圳云软黄榕振谈微信公众帐号企业应用高级开发 来自前苹果高管Heidi Roizen的经验之谈 【短讯】Dropbox、微软OneDrive打不开,国内用户该如何应对? 5分钟弄懂Docker! RakNet:被OculusVR收购的跨平台游戏网络引擎 Qualcomm业务拓展副总裁沈劲:智能终端的延伸 苹果发布Xcode 6 Beta 3,Swift迎来重大更新! Linkedln技术高管Jay Kreps:Lambda架构剖析 《近匠》极光推送:聚焦巨头无法快速转身的领域 Babylon.js:拥有微软背景的开源3D游戏引擎 EMC 2014存储布局及十大新技术要点 腾讯推出零流量地图 离线实现公交步行导航 Atmel 1.4亿美元收购Newport Media 巩固物联网产品线 微信大会首批议程出炉 深度解析招行服务号是如何炼成的? 指尖上的阅读:MIT开发盲人专用设备FingerReader 从桌面到移动:异构计算翻天覆地的技术变革 《近匠》Blueware何晓阳,不做中国的New Relic 全球最杰出的14位程序员 Microsoft、RedHat、IBM、Docker等公司加入Kubernetes社区 Intel携手三星、博通等 建立物联网联盟OIC 一周消息树:微软半年内将终止对Win 7、Office 2010 SP1等产品的支持 深度神经网络DNN的多GPU数据并行框架 及其在语音识别的应用 浪潮通软GSP将打造开放平台 吸引更多ISV加入生态系统 问一个简单的问题,关于初始化 请问谁有动态树状目录的原码啊,急需!! 什么问题,怎么解决? 西瓜:有人要求我贴你的没穿外套没穿鞋子的照片 就是你说生气的那张 贴不贴啊? 怎样将一个十进制数转换为二进制数,并将二进制数中的每一位单独取出来? GetProcAddress在VB中的使用? excel单元格格式问题 用按钮保存网页的问题 用c++ builder和access.数据表中的记录多了之后,应用什么方案将之备份以及恢复? 以下ASP在Win2000server上运行报错请问大家为什么??? 在指定位置输出文本 怎么办? 如何启动和终止一个NT服务 .Net——又一个起跑线 怎么样注册jsp上的jdbcoracle驱动 什么问题,怎么解决? 我的爱情大结局----失败爱情原闯文章 在学习了2个月的delphi后,总结四大问题! OnPaint()的问题?为什么我的程序要刷很多次才能得到正确的结果? win2000 Server中的终端服务问题,急,所有的终端都趴下了! 深入浅出MFC 100分﹕vs.net正式版的產品密鑰 怎样动态改变下拉框中的值? 如何将已有的程序(有源程序)封装成ActiveX控件? 讨论一个数据库建模的使用工具问题? 关于Flash的Action的小问题 怎样为xslt中的超联接加上参数? 问题 如何设置datagrid行背景颜色? 安装程序安装完运行显示“运行时错误'380':无效属性值”是怎么回事? win2000+ms proxy 2.0问题 API函数 ReadFile的pb的中文说明谁有,告诉我好吗? 在线求助 在线等待,急 关于计算字段,急! datawindow的scrollvertical.setrow,不能触发rowfocuschanged事件,why? help:can you tell me how can i get the IDE of WinSDK? 有些人的言论很具有误导性,根据今年的就业形势,软考证书还是比较值钱的 请看这段代码?谢谢 怎样删除session变量?? 求购POS机!!! 请问应该怎样学习COM技术? 求购POS机 my_storeproc返回一个结果集,能否对这个结果集进行子查询? 如何将MSFlexGrid1中内容导入Access数据库中 讨论:文件编辑,web方式 出现这样一个问题怎么办? Delphi 中统计量数据量大的时候。。程序报EDBEngineer Error With.....大家帮忙。。救急!! 今天是愚人节 , 老天在玩我啊 !受到刺激了,开骂 !!! 请教3d编程高手:如何生成Lightmap? 计算字段和检索字段的用法的讨论 设集合A=1,2 则满足A∪B=1,2,3的集合B的个数为为什么会是四个而不是八个 {2,3}为什么不是集合B?TMD 教材有错误!误人子弟! 今天尽快回答, 若干堆围棋子每堆棋子同多且每堆中白子都占28%从某堆拿走1半棋子都是黑子现所有棋子白子占32%有几堆棋子火速啊””””哪位大哥能做.用方程解.还要列出方程式...赐教了.. 若集合A={1,2,3},则满足A∪B=A的集合B的个数,方法 方法注意是方法 (根号5+根号5分之1)的平方 根号3(根号12-3根号75) 3根号18+5分之1根号50-4根号2分之1 根号32-4根号2分之1+2根号8 罐中有12颗围棋子 其中8颗白子 4颗黑子 若从中任取3颗 求3颗棋子颜色相同的概率取得3颗棋子中至少有一颗黑子的概率取得3颗棋子中至少有一颗黑子的概率 这种怎么算呢 聪聪在一百货花了他全部钱的3分之2在二百货话了余下钱的3分之1这时还剩下4元聪聪原有多少钱 A={x|1.2} B={1.2.3.4} 满足A包含C包含B 的集合 C的个数为? 5题数学二次根式求解!最好写过程!急 在图中剪去1个小正方形,使得到的图形经过折叠能够围成一个正方体,先想一想,再试一试! 请您帮我把所有情况都列出并画下来!写完整给40分呢! 八年级上册物理第一章机械运动知识梳理图最好是图,{大括号也行不要太多,总结的 已知√x+1/√x=2,求√【x/(x的平方+3x+1)】-√【x/(x的平方+3x+1)】的值. 如图所示,将给图形折叠后可以围成一个正方体,折叠后:(1)点P与哪些点重合?点C与哪些点重合?点A与哪些点重合 点B与哪些点重合 求书虫系列牛津英汉语双语读物中至少两部书中的经典句子每部至少两句,要英文的~1.威廉·莎士比亚 William Shakespeare2.一个国王的爱情故事 The Love of a King3.亡灵鸟 Dedd Man's Island4.哈克贝利·费 少年宫有甲、乙两两个美术班,乙班人数占两班总人数的十二分之七,如果从乙班调3人到甲班,甲乙两班人数的比是4:5,甲乙两班原来各有多少人? 如图所示,将该图形折叠后可以围成一个正方体,折叠后:(1)点P与哪些点重合?点C与那 人教版初二物理上册第一章机械运动第一节长度与时间的测量第15页答案动手动脑学物理第一题答案 少年宫有甲、乙两两个美术班,乙班人数占两班总人数的十二分之七,如果从乙班调3人到甲班,甲?少年宫有甲、乙两两个美术班,乙班人数占两班总人数的十二分之七,如果从乙班调3人到甲班,甲 空集与A的交集是什么?1.空集与集合A(非空集)的交集是什么?2.为什么{x|x>2}∪{x|x2,或x 外研社出版的英汉双语读物小说怎么样?我想提高英语,想读读小说,带有翻译的,但不知道质量怎么样? 学校体育组买了3个篮球和5个足球共花221元,已知一个篮球比一个足球贵7元,那么篮球和足球各多少钱一个? A和空集的交集是什么 telephone 的中英文歌词,先是英文的,然后是中文的 学校体育组买足球花了240元,比买篮球花的钱数的3倍少84元,买篮球花了多少钱?算式列出来哦, 集合A和集合B交集 设集合M=(1,2,3m-6),N=(-1,3),M交集N=(3),求m. 一个瓶子的容积为1升,瓶内装着一些溶液,当瓶子正放时,瓶内溶液的高度为20cm,倒放时,空余部分的高度为5cm.现把瓶内的溶液全部倒在一个圆柱形的杯子里,杯内的溶液高度为10cm,求:(1)瓶内 A与A的交集是空集吗 m的集合元素有0,1,2,3,4.;n的集合元素有1,3,5,已知N的集合是m与n的交集,求N的子集有几个? 八上浙教版数学书,全部的课内练习答案,不要收费的帮帮忙啊 谁能帮我总结一下沪科版物理八下期中知识点? 设集合m={1,2,5}.N={2,3,4,5,6},则M∩N= 某校六年级有150名学生,期末体育成绩是:得优的45人,得良的90人,得及格的15人.各占全班人数的半分之几是百分之几 宇航服质量为120kg,抗压能力超过120kpa,当穿着它在太空中行走时,他周围气压是多少 3和4题~ 课时作业.八年级数学.上(浙教国标.第2版)-电子书谁有答案 围棋盒中有x枚黑色棋子,y枚白色棋子,现从盒子中取出一枚棋子,如果它是白色棋子的概率为七分之二,则...围棋盒中有x枚黑色棋子,y枚白色棋子,现从盒子中取出一枚棋子,如果它是白色棋子的 电机厂生产了一批电机,合格率是95%,合格电机比不合格电机多7500台,这批产品合格电机有多少台? 六年级一班有50名学生,年末体育测试成绩是:得优的10人,得良的25人,得中的15人,各占全班人数的百分之几? 若集合A={x|-2-2},A和B的交集={x|1 六年级数学题; 电机厂生产一批电机,合格率是98.5%,合格电机比不合格的电机多6790台,这批厂品合格电机 我英语勉强有四级水平,能否推荐几本适合我水平的英语泛读读物? 已知全集A=AUB={X属于N|0 浙江湖州南浔有哪些电机厂,那家电机厂规模最大如果本人是从事电机工作请说明, 1.聪聪和明明共给四川雅安地震灾区捐款300元,其中聪聪和明明捐款钱数的比是2:3.聪聪比明明少捐多少元?2.一根铁丝长62.8cm,把它围成一个正方形,面积是多少?如果围成一个圆,面积又是多少? 已知集合A={x|1 某电机厂在四天内制造一批电动机,第一天完成总数的1/5,详细答```某电机厂在四天内制造一批电动机,第一天完成总数的1/5,第二天完成20台,第三天完成的是前两天的和,还剩8台到第四天完成,这 英语6级水平,求推荐好点的英文读物... 若集合A={x|-2-2},A和B的交集={x|1 电机厂要生产一批发电机,原计划每天生产20台,12天完成,实际多生产10台,实际用多少天完成?(用比例解)注意:一定要用比例解,不用比例解,不给财富悬赏. 书虫的英文读物提高阅读水平怎么样?我现在上大学.连四级的文章都看不懂 在围棋盒中有x颗黑色棋子和 y白色棋子,从盒子中随机抽取一颗棋子为是黑色棋子概率3/8,求x/y之间的关系式x、y的关系式,x=——y 学校买了单价50元的篮球和单价80元的足球工10个,一共付了710元.足球买了()个小明把720毫升果汁倒入6个小杯和1个大杯,正好都倒满.小杯的容量是大杯的三分之一.小杯和大杯的容量各是多少 2014年8年级下册数学书答案 若{1、2}包含于A包含于{1、2、3、4、5}则满足条件的集合A的个数是 中英文对照读物怎样读?是先看英文还是先看中文?那本书翻译的不太好中英文有点对不上号.要怎样看才能提高英语水平? 在体操比赛中,某班没行12人后16人都正好站成整行,这个班的人数不超过50人,请问这个班有多少人? 集合A={1.2.3},则满足A并B=A的集合B的个数是几个?为什么? 什么英语读物好?最好中英对照!纯英文的也可以!很快就要读大学了!想提高英语水平!想找找英语读物读读哪些好?请推荐! 求青岛版九上数学电子书
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘