BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

书评和采访:ExtJS in Action

| 作者 Dio Synodinos 关注 3 他的粉丝 ,译者 崔康 关注 0 他的粉丝 发布于 2011年3月26日. 估计阅读时间: 15 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

Jesus Garcia 编写的《ExtJS in Action》是一本介绍跨浏览器JavaScript库ExtJS的书,ExtJS用于构建富互联网应用(Rich Internet Application)。ExtJS包含大量的组件、可扩展的组件模型,提供了易用的API来构建针对基于JavaScript的Web应用的完整、稳定的平台。

本书作者在IT和企业web应用开发领域拥有超过16年的经验。他在数个大公司部署过基于ExtJS的应用,如万豪国际、洛克希德马丁、摩根大通和美国金融监管局。业余时间,Jay喜欢帮助ExtJS社区,他是ExtJS非官方雇员中最活跃的发帖者之一(超过13000个帖子)。

本书包括如下内容:

  • 使用核心组件如布局面板构建动态UI
  • 创建动态表单,提交数据无需页面刷新
  • 使用树状组件、菜单和工具栏的有用组件
  • 创建定制的复合组件
  • 全面解析Ext JS 3.0

读者会了解ExtJS组件模型和布局,学习核心组件如Container类在构建复杂用户界面时作为构建模块的运行机制。本书覆盖了ExtJS常用类、AJAX、Observable (ExtJS事件模型l)、DOM辅助类和辅助函数,并介绍了如何使用JavaScript Object Notation (JSON)。它还探讨了定制或者扩展ExtJS组件的可行办法。

本书的出版商Manning为InfoQ读者提供了第三章试读《组件模型和生命周期》。

InfoQ采访了本书作者:

InfoQ:Hi Jesus,能否介绍一下自己,以及编写这本有关ExtJS书籍的初衷?

Jesus我从2006年初就开始使用ExtJS,当时它只是YUI库的一个扩展集。那时,它被称为“YUI-ext”,由一个名为Jack Solcum的家伙作为边缘项目开发。像许多刚接触该框架的新人一样,我最初被数据网格吸引。真正让我倾心该库的是文档,可能是最好最新的Ajax框架API。

在我接触该框架不久,我决定成为一名专家,专注我的事业,成为一名独立咨询顾问。做出决定之后,我开始活跃于早期社区,花费大量时间在帮助社区上,回答人们的提问解决他们的问题。通过这种方式,我学到了比只是应用开发更多的有关框架的知识。直到现在,通过帮助别人来回馈社区仍然是我学习大量知识的一种方式。

活跃于ExtJS社区使我赢得了一些声誉,因此被来自Manning的Michael Stephens看中。他联系我,还有其他活跃的社区成员,来审阅一本书的提案。在阅读了提案内容表格的前几行之后,我就意识到这本书不是“Ext JS in Action”。在提交了我的想法和推荐的目录之后,Michael举行了一个审查会议,在那里他问我是否愿意提交一个自己的目录,然后我就提交了。然后两年之后,现在我们有了这本书。

InfoQ:什么是ExtJS,它想解决什么问题?

JesusExt JS是一个针对Web的UI库。它是市场上的轻量级工具,因为它通过抽象,支持开发人员不必强制编写HTML的源代码,而且允许开发人员灵活地扩展组件库或者通过简单强大的插件架构创建真实的插件。

Ext JS解决了管理HTML和CSS的问题,提供了媲美桌面应用的UI外观。它支持开发人员在现有HTML网页中注入组件或者开发富企业级RIA,其中一些应用于关键任务应用,如实时监控和网络基础设施的管理。

框架也包含许多实用工具,如数据存储、模板和xTypes,进一步提高了应用开发能力。

InfoQ:在书中,你提到Ext JS遵循的组件和容器模型是它比其他Ajax库与众不同的主要原因,你能详细说说吗?

Jesus组件和容器模型(还有其他特点)使Ext JS在其他同类Ajax库中别具一格,因为它们使库的UI部分结构化。没有它,Ext JS不会这么与众不同。

组件模型为框架引入了“组件生命周期”,为组件带来了一套定义良好和可靠的行为。它分为三个阶段,初始化(Initialization)、渲染(Render)和销毁(Destruction)。初始化指组件新实例的初始化时刻。渲染阶段指组件被渲染或者绘制到屏幕上的时候。最后,销毁阶段支持组件执行清理任务,如所有注入的HTML节点的删除和清除事件监听器。

容器模型支持组件通过父子关系模式来管理其他模型。通过容器模型,开发人员可以轻松地创建动态UI——利用它的add()或者remove()来添加或者删除一个或几个子元素。为了管理子元素的视觉组织,容器使用了布局(Layout)。

InfoQ:你能透漏一下工作中如何使用Ext JS吗?你了解其他人如何使用它吗?是否存在RIA应用不适合采用Ext JS?Ext JS适合移动web应用吗?

Jesus我通常使用Ext JS为许多客户开发应用。我最近一个任务是为客户开发界面管理成员信息。因为Ext JS功能齐全,所以我可以利用它开发各种应用,比如定制UI从IBM的Tivoli Enterprise Console和HP Universal CMDB中合并数据、为EMC的Documentum产品开发前端界面。我已经开发了几个应用来帮助公司制定考试内容。

开发人员可以充分利用Ext JS来开发RIA中所需的功能。这几年,我已经看到了各种各样的应用,大部分是基于业务的。

Ext JS本身不是为移动web应用而定制的,但是它的兄弟Sencha Touch是。我已经看到并且实验了在iPad上运行有限功能的Ext JS应用。它不支持触摸功能,而且UI主题不是以移动为中心的。

InfoQ:Ext JS在各种浏览器平台上的运行情况如何?你想对那些由于当前的兼容性问题或者害怕因未来升级失去兼容性而惧怕使用Ext JS的朋友说些什么?

Jesus:这可是个老问题了。我想说Ext JS在最好的环境中运行最好。一般来讲,Ext JS在基于Webkit的浏览器中运行最好,在IE中最差。当然,浏览器还要更加努力解决这些问题,但是在Ext JS 3.0的最初版本中存在一些代码问题导致IE的缓慢性能。

众所周知,Ext JS 3.0的最初版本的性能比2.X差得多,但是在后续版本中好得多。Ext JS团队非常重视来自于客户和社区成员的反馈,并采取必要修改在不限制功能的情况下获得更好的性能。

我也提到框架的性能需要开发人员配合做大量的工作。 初级开发人员往往易犯简单错误,如所谓的“overnesting”。这种情况是指不必要的通过父组件包装子组件,并且为UI添加了不必要的层。另一个常见错误是加载数以千计的记录到视图中(GridPanel、DataView、ListView或者ComboBox),导致屏幕中出现“JavaScript is running too long”消息。

从2.x升级到3.x非常简单,在3.x不同版本中升级也是如此。以我的经验来说,大家遇到的大部分升级问题是他们存在代码依赖、使用或者重载了私有方法,这些方法标记为私有是有原因的。显然,这种做法不值得推荐给团队甚至资深的开发人员,你应该做些工作使升级更容易。

InfoQ:对于开发Ext JS应用,你喜欢哪种过程?你使用哪些工具?你觉得现在的JavaScript/HTML工具好用吗?

Jesus通常我在笔记本电脑上开发应用,这样可以尽可能快地收到反馈。我遵循框架模式来开发应用。例如,我喜欢根据类的命名空间在文件系统(和项目)中安排文件。这种做法能够快速访问文件。同样的模式适用于插件、用户扩展(ux)或者应用于框架的重载。

开发JavaScript代码有一些优秀的工具,但是我最喜欢使用Jetbrains’ Intellij IDEA开发应用。虽然它的运行速度不是最快的,但是我爱上了它。它支持比如动态代码补足和重构类成员等,还有自己的JavaScript调试器,虽然我一般不用它。

我听过开发人员喜欢使用NetBeans甚至Aptana(包装了Eclipse)。

InfoQ:使用大型的客户端框架如Ext JS会导致调试时有困难吗?代码遇到问题时,你如何调试?

Jesus困难有很多原因。首先,开发人员使用ext-all.js(框架的精简版)而不是ext-all-debug.js (保留了空格,删除了注释)。如果异常被JS解释器抛出,异常消息因为JS的简化通常晦涩难懂。如果在IE中查看错误,一般看不出任何意义,增加了难度。通常,为了解决问题,可以使用解压缩的ext-all-debug.js 来开发应用,这会使错误消息好懂些,至少可以找到异常抛出的准确行数。

一旦ext-all-debug.js抛出异常,我通常会查看异常发生的位置,从中找到异常对应的方法,然后找到该方法归属的类。绝大多数情况下,都是些低级错误。

因为我使用WebKit,所以查看ext-all-debug.js 文件成百上千的JS代码轻而易举。可悲的是,Firefox的当前版本妨碍了Firebug达到同样的性能水平,因此几个月之前我从Firefox转移到了WebKit。我也在IE8中尝试过,但是结果让我很崩溃。

InfoQ:在工作中使用功能测试方法吗?感觉如何?

Jesus答案是没有。我曾经想在客户的应用开发周期中加入单元测试,但时间是个问题。花费在编写测试的时间可以节省未来修补缺陷的更多时间,但是做出初始投资对客户很困难。

InfoQ:在书中,你描述了使用Ext JS时框架之外的若干组件,易于扩展吗?易于创建新组件吗?

Jesus我觉得易于扩展框架,因为我从2006年就开始使用它了。开发Ext JS的时候就被设计为可扩展的,存在针对它编写的插件,而且采用了一些最佳的JavaScript开发模式。

扩展组件的难度水平与开发人员对Object Oriented JavaScript模式和框架的经验有关。你必须熟悉OOJS(原型继承)才能够扩展组件。毕竟,如果你不理解原型继承,在JavaScript内扩展的概念会比较生疏。还需要能够理解例如执行上下文概念和关键字“this”的使用方法。

同样,你应该熟悉Component、Container和布局模式来正确的扩展组件同时避免例如overnesting的常见错误。熟悉框架的其他部分也有帮助。

我写这本书主要是因为看到很多初识框架的开发人员想要构建复杂的应用。然而,他们发现在完成简单任务时就磕磕绊绊,这都是因为没有必要的基础知识来完全理解和使用框架。

对于想提高JavaScript速度的人来说,我推荐Dustin Diaz的《Pro JavaScript Techniques》(Apress)。这本书会详述现代JavaScript编程,是你充分了解一些高级代码。

InfoQ:随着HTML5的出现,你认为Ext JS会如何发展?

JesusSencha团队的一个优点是向前看。他们努力使4.0兼容HTML5和CSS3。Ext JS 4.0与Sencha Touch共用同一个代码库,而Sencha Touch已经对这些技术有大量的支持。

InfoQ:你觉得本书对于那些初识Ext JS的人和想在Ext JS开发中更进一步的人有哪些帮助?

Jesus对于Ext JS的新手来说,我认为深入理解Component、Container和Layout模型非常有用。我尽可能清晰地讲解这些内容,并从读者中得到了好评。

对于老手来说,我认为本书最有价值的部分是后三章(15-17)。第15章介绍了创建Ext JS扩展的基本知识,并使用现实例子开发插件。最后两章构建了一个虚构应用,使读者了解核心的决策过程,如安排命名空间和开发抽象来减少冗余代码。

不同经验水平的开发人员在阅读完本书之后都给予了积极的反馈,他们表示其中一些概念在不同的方面提供了帮助。

你可以在InfoQ找到更多有关JavaScriptRich Internet Applications的内容。

查看英文原文:Book Excerpt and Interview: ExtJS in Action


给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家加入到InfoQ中文站用户讨论组中与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

New Wave Ext JS by 张 鑫

Ext 4变化幅度挺大,不妨瞧瞧源码来对比。

支持下 by 白 玉京

一直在用Jquery,ExtJs曾经作为一个参考选项,后来放弃了

Re: 支持下 by 谢 平

一直在用Jquery,ExtJs曾经作为一个参考选项,后来放弃了

为什么放弃了

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

3 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT