虚拟研讨会：HTML5的新JavaScript框架

去年一年中，HTML5的使用率不断增长，已经被广泛看做是传统的桌面和新兴移动web上的主要开发平台之一。与此同时，服务于此平台的全新JavaScript框架也已兴起，期望能够为Web开发设立一个新的范式。

InfoQ曾经举办过一次虚拟研讨会，会议邀请了一些最受欢迎的JavaScript架构和平台，例如Dojo、YUI、Prototype、script.aculo.us、MooTools和GWT的创始人或者首席开发人员，讨论的主题是他们如何看待自己的框架简化HTML5下的开发过程。

而这次研讨会的背景是新的HTML5特定框架的兴起，InfoQ以问答的形式采访了这些框架的创始人，请他们就这些框架的特别之处以及新特性发表看法。

参与者有：

• 来自Jo的Dave Balmer
• 来自Modernizr的Faruk Ates和
• 来自Simpli5的Jacob Wright

InfoQ：虽然现今已经有了一些JavaScript框架，但是是什么激励着你们去为HTML5开发新的框架的？相比传统的框架，它能够给我们带来哪些好处？

Dave（Jo）：当你思考“当浏览器引擎能够做更多工作的时候会发生什么？”的时候，这就意味着Jo大有用武之地。最终你会发现你手头上的框架是如此简单，这个框架和浏览器引擎没有太多的联系。它是一个全新的开始，而且体验非常好。

W3C的大量HTML5草稿和议案给JavaScript开发者展现了一幅新的图画，他们可以开发出完全和本地应用匹敌的世界级web应用。客户端持久化存储、底层文件访问、sockets、后台进程、使用硬件加速UI的展示和互动是HTML5最吸引我的部分。

虽然HTML5在桌面浏览器已有一席之地，但仍未占据统治地位。在我们等待Windows的用户使用Internet Explorer 9（这个浏览器将会支持HTML5规范中的许多非常酷的特性）的过程中，其他的平台已能支持这些特性了。Apple iOS、Google Android和Chrome、webOS以及RIM和Symbian近期都希望能够将HTML5的高级特性应用到智能手机、平板电脑和上网本上。

虽然HTML5离得到广泛的桌面支持还有一段距离，但是市场上最新的移动设备已经趋于认同HTML5将会是高度一致性的平台。

Faruk（Modernizr）：Modernizr始于这样一个问题，那就是在不同的浏览器中，即便页面代码是相同的，但是最终的视觉效果却千差万别──大多数著名的、陈旧的以及功能较少的浏览器都不是完美像素支持。我不是只停留在口头讨论上，而是开始着手解决这个问题。Web开发的建议就是一个：简化开发过程，高效的开发来自于简单且优秀的开发流程。我曾经尝试根据UserAgent来识别浏览器能支持的特性，但是这个不可靠的字段把我搞得灰心丧气（这也是一个反面例子）。这次经历也让我认识到需要有一个可靠的方法，来鉴别出HTML5和CSS3中哪些特性在各个浏览器中是否可用。

当我着手创建Modernizr的时候，很明显，由于精力的问题，我必须专注于少量核心特性。虽然有jQuery和其他的框架的存在，但是Modernizr能够支持它们不能支持的关键特性，因此我决定只有一件事情是Modernizr需要关注的，那就是浏览器特性支持检测。我并不希望Modernizr成为JavaScript库中的大型瑞士军刀，我只是希望它能够尽可能地小，而且成为每一名Web开发者装备库中最基础最重要的装备。他们使用的技术越前沿，Modernizr对他们就越有用。

Jacob（Simpli5）：我猜大概现有Javascript框架中一半代码都在解决跨浏览器的兼容性问题，或者手动为不合格的浏览器增加特性。如果我在开发HTML5应用，为什么我们需要下载（以及缓慢地）脚本来帮助兼容旧有浏览器呢？此外，有很多JavaScript特性这些框架都不能使用，因为并不是所有的浏览器都支持（例如隐式的getter/setter）。开发一个全新的HTML5的JavaScript框架而不是扩展现有的框架，我们能够得到一个更小更快更精致的框架，要知道这样我们并不会受到现有框架的各种规则的限制。

InfoQ：能不能从架构的角度大致描述一下你们的框架？它们的主要组件是什么？组件之间又是如何交互的？

Dave（Jo）：首先，整个框架使用了JavaScript的对象模型。这些用于构建Jo的技术和代码模式都在“JavaScript，The Good Parts”（Crockford / O'Reilly Press）中介绍过，这本书还介绍了一些不错的编程风格；尤其是Google的V8引擎的风格。

命名空间的实现方式是使用一致的命名标准，而不是使用嵌套对象命名（例如是joButton而不是JO.UI.Button）。这将节省下大量用于每次引用对象的时候遍历原型链（prototype chain）所需要的时间。更重要的是，例如V8这样的JavaScript引擎对对象字面量（object literal）的存储做了高度优化，但是，作为代价，给对象添加或者删除属性的方法性能将会下降。这就意味着如果一个框架使用嵌套对象命名空间，那么它的库将会庞大而且缓慢。

除了简单使用对象和方法，正式的Jo对象使用了重构过的“观察者模式”OOP标准。对象将消息发送给任何一名接受对象。这种对象间通信的方式非常灵活，并且容易“重新组合”。而且，因为对象间的接口非常“简洁干净”，这有助于优秀的单元测试实践。

UI元素有一个共同的基类叫做joView。在Jo中创建的每一个UI元素都需要使用一个或者更多HTML标签，而且通过改变.className属性来操控这些标签。这也就意味着所有的视觉展现和行为都是可以由CSS控制。与其在JavaScript中使用动态代码，我们使用CSS3就可以完成这些非常酷的效果。

joControl是输入框，按钮，选择框以及其他GUI控制组件的基类。joContainer是组织UI元素集合的基类。有些Jo的sugar可以在joContainer（或者其子类，例如joCard）中找到。例如：

var myui = new joCard([
    new joTitle("Hello World!"),
    new joGroup([
        new joLabel("Username"),
        new joInput(joPreference.bind("username")),
    ]),
    new joFooter([
        new joDivider(),
        new joButton("Goodbye")
    ])
]);

这样你就得到了一个简单的对话框，并且可以直接显示（通常是调用joStack.push()方法）。

仅仅有丰富的UI对象，Jo有自己的joDataSource和其子类。这类对象封装了例如XHR、SQLite、cookie以及其他获取异步数据的巧妙方法。有了这些对象，你的程序可以在不同的数据存储系统和数据获取方法中使用一致的接口。

Faruk（Modernizr）：Modernizr非常小巧简洁：我们运行了一系列测试，每一个测试都会检测浏览器中的特定特性。我们不会问浏览器你是哪个，我们只是简单地询问：你支持border-radius？你支持HTML5 video吗？你支持地理定位吗？诸如此类的问题。然后我们检查所有的测试结果，将其作为HTML元素的类在Modernizr对象中使用，你可以在JavaScript中和它们进行交互。以border-radius为例，HTML元素中的类可以简单地叫做“borderradius”或者“no-borderradius”，这取决于浏览器是否原生支持。如果所有的测试都通过的话，你甚至可以很严格规范地书写你的CSS代码。我们不关注浏览器的UserAgent字符串或者版本号，而是检测它能够支持什么样的特性。

所以我们真正拥有的组件就是各种测试，再加上一点处理程序。有些测试可能会导致较长的反馈，例如@font-face测试，它的特性不是即时可用的，所以这是一个异步检测。

Jacob（Simpli5）：我真的很喜欢jQuery和DOM的简单协同工作方式，但是我也一直希望需要的时候，我能够调用元素的方法，而不是需要使用jQuery来封装这些元素。所以Simpli5的核心特性便是加入了jQuery提供给HTMLElement原型的大部分功能。有些JavaScript开发者可能看不起这个框架，但是我觉得这个框架很好利用了JavaScript语言（而不是无法利用）的核心思想，它允许我们高效地开发生产，并且编写出更多高可读性的脚本。一个Simpli5对象和jQuery对象非常类似，也是一个元素数组，调用对象的方法实际上会调用这些元素的方法，例如，document.body.addClass('myclass')和$('div').addClass('myclass')实际上是将这个类加入到元素中去。

我已经加入了一个小型的类系统，因为结构化和易维护的组织形式对于健壮的HTML5应用是必不可少的。它和MooTools类看起来很像，而且能够很好地支持继承。

InfoQ：你们的框架和现有流行的客户端JavaScript框架（例如jQuery、Dojo和Prototype）之间的互操作性如何？它们能一起正常工作吗？

Dave（Jo）：Jo和其他程序库的兼容性非常好。事实上，它设计之初便是以例如PhoneGap这样的底层库一起工作为目标。我并不会尝试解决所有的核心问题，例如“加载浏览器URL”或者“告诉我什么时候我的应用能够运行”。Jo是一个相对来说比较高层的框架。

Faruk（Modernizr）：与其说Modernizr是一个框架，还不如说它是一个工具集，你可以放心地在大量其他的程序库和框架中使用它。虽然它和ie-css3.js不兼容，但这只是在某些特殊情况下才会触发（比如使用ARIA role属性的时候）。

Jacob（Simpli5）：在绝大多数情况下它们之间兼容性不错。Simpli5使用$作为变量前缀，这和jQuery是一样的。不过如果$已经被占用的话，可以重新指定另一个前缀符号。它的确和Prototype和MooTools一样使用Class，所以无论哪个最后被载入，你使用的类系统都是一样的。

InfoQ：你们能够举例说明一下这些框架的能力以及描述一下解决方案吗？

Dave（Jo）：Jo的目标是解决“我们如何能够让一个应用在大量平台上获得广泛支持？尽管这些平台的显示规格和特性各不相同。”Jo将所有UI的工作交付于了CSS3（在某些平台上是硬件加速），也就是说你的应用在任何平台上都是相同的。跨平台问题在CSS3中被弱化了，而且类似于PhoneGap这类底层库也较好地封装了跨平台问题。

Faruk（Modernizr）：我的个人网站（当前的）使用了一系列的标签特性，同一个鼠标行为在不同的浏览器中会出现不同的标签的展现方式。如果浏览器是功能强大并且遵循标准的话，那么会有很酷的动画效果，例如颜色渐变和宽度改变。浏览器本身的功能越少，那么这个特效就越缺少观赏的乐趣。Modernizr允许我能够安全且容易地找出浏览器的类型，然后根据不同的浏览器使用不同的CSS规则 - 如果没有的Modernizr的话，这些规则可能会互相冲突或者出现重载。

Jacob（Simpli5）：这个框架非常的新，也就大概一个月的年龄，但是我相信它会很快的成熟起来。我努力地使用更简洁方便的并且能够为HTML5浏览器支持的代码支持其他框架都能支持的功能。我想它的最大亮点是它的组件系统，你可以以一种非常简单易读的方式定义一个组件，这种方式有助于组件式开发。

InfoQ：你们是如何看待JavaScript框架通过改进来适应HTML5的？

Dave（Jo）：JavaScript库应该逐渐变得更小更高效。更多的底层UI和动画效果应该集成到CSS3之中，使得JavaScript的DOM代码更加简洁。像 同样例如构建入HTML5的worker进程意味着我们可以以一种更加自然的方式来编写后台任务，而不是需要写出一些非常荒谬且复杂的代码展示UI。

Faruk（Modernizr）：HTML5和CSS3越来越被广泛接受，这有很大一部分应该归功于Webkit浏览器引擎，这个引擎已经成为了现在几乎所有移动浏览器的事实标准。JavaScript框架运行于这个引擎之上，而且缓慢地进步到根据情况使用原生实现或者JavaScript驱动的后备计划。

Jacob（Simpli5）：我看大部分人都加入了HTML5扩展，而使得核心代码由于处理跨浏览器问题而变得臃肿，这个问题可能得到大多数站点都转向 HTML5之后才能解决。他们的代码不得不这样做，因为需要满足开发者在不同浏览器中运行脚本的需求。只有很少一部分人选择了只支持HTML5，从而享受到了剔除旧代码和浏览器的畅快感，而且项目也能进展顺利。老实说，对于更快的JS引擎和带宽来说，“臃肿”不是那么重要。

我也看到了很多服务于SQL，数据存储，Socket等的库不断地涌现。和这些库打交道应该是一件很有意思的事情。

InfoQ：你是如何看待近期HTML 5和浏览器的发展情况呢？有什么东西你认为是标准中缺少的呢？你对HTML5的部分技术有什么评价吗？

Dave（Jo）：现在Safari（以及iPhone和iPad上的mobile webkit）是唯一能够在CSS3中进行硬件加速3D变换的解决方案，不过也有一个很让人失望的地方。它的市场占有率使得这个效果在其余94%的平台上无法展示，或者不得不让我们编写一些不能在移动设备上运行的东西。

这个标准中最大的缺陷就是客户端数据持久存储。Webkit、Gecko和IE都有它们自己的本地存储方式，这让编码过程变得焦躁不安。

最激动人心的莫过于“web worker”后台进程。如此多的应用程序将任务分成无数个小片。使用一个后台进程无中断地展示一个列表，这个用户体验非常地酷。

Faruk（Modernizr）：关于HTML5，我有许多东西要说，例如浏览器以及市场的反应。Web开发者和标准拥护者有的时候可能会忘记有一件事情是用户根本不关注的，即用户不在意应用程序是使用Flash、Sliverlight、HTML5还是CSS3编写的，而是关注这个程序是如何工作得好（或者不好）。

我们很自然而然地去批评HTML5的进展以及厂商的态度，但是考虑到复杂程度，以及古往今来这样巨大的事情进展均是如此地混乱，我就释然了。我们现在终于可以在浏览器中做一些我们很多年前就一直在梦想做的事情了，创新的脚步和加入到浏览器中的新特性让人难以置信。作为web开发人员，这是最令人激动的时代，从社区对Modernizr强有力的支持就可以看出。即便它之前是完全开源的，世界各地的人们都在为它做贡献。

非常激动人心的是，人们对Modernizr的支持激励着我们继续开发和完善这个工具，我们希望能够将其变得更加有用，尤其是对于那些希望能够迅速构建自己站点的web开发者。

Jacob（Simpli5）：我看到了一些加入到video和audio组件的特性，例如皮肤功能，或者将其更好地组合到页面中。不过也有浏览器不打算支持Flash video。这个标准没有包括性能这一部分，但是这是我想在下一个版本中看到的东西。JS性能一直在提升，但是渲染的性能也需要提升。如果你希望使用HTML5编写一个游戏，那么性能将会限制你的发挥。

你可以在InfoQ找到更多关于HTML5、JavaScript和其他富Internet应用技术的信息。

查看英文原文：Virtual Panel: New JavaScript Frameworks Targeting HTML5