James Ward谈使用HTML5和Java开发客户端/服务器应用

谈到应用开发,不管是客户端/服务器类应用、传统的Web应用还是移动Web应用,最近的趋势是使用像流式网格布局(Fluid Grid Layout)和响应式网页设计(Responsive Web Design)这样的模式,以及像HTML5、CSS3和JavaScript(客户端和服务器都支持)这样的技术。

此外,用于构建客户端现代Web应用(包括桌面应用和移动应用)的工具发展和变化都非常迅速。十年之前为了在服务器端处理HTML UI而构建的一切,现在都在客户端重新实现了,如MVC框架、模板库和组件库等。jQuery是大多数现代应用的基础,因为从某种程度上说,它有点像 JavaScript标准库。MVC我们有很多选择,但是像Backbone.js这样的框架是越来越引人注目了。客户端模板库也有很多。其中有些技术既 可以工作于客户端,又可以工作于服务器端;如果有的用户的浏览器中没有现代或快速的JavaScript引擎,这些技术是派得上用场的。

在今年的JavaOne 2012会议上,来自TypeSafe的James Ward做了一个讲座,内容就是使用HTML5和Java技术开发客户端/服务器类应用。

InfoQ采访到了James,探讨了他在这次会议上的讲座以及这种新的应用开发趋势。

InfoQ:请问开发者对基于Java的HTML5框架有哪些要求?

James:现代Web应用的新模型与老式的客户端/服务器架构类似,不过这时客户端变成了支持JavaScript、CSS和HTML的浏览器,而服务端则是RESTful JSON服务。在寻找现代Java Web框架时,你需要关注以下三个方面:

  1. 这一Web框架是不是对构建客户端和服务器都有帮助?现代Web框架通常会提供“Asset Compilers”或“Asset Pipelines”,辅助开发者编写JavaScript、CoffeeScript和LESS。例如,Play Framework所带的Asset Compiler,将服务端代码(Java或Scala)和客户端代码(JavaScript、CoffeeScript和LESS)的编写体验统一起 来。
  2. 能否像管理服务端依赖一样管理客户端依赖?越来越多的代码正在移向客户端(JavaScript和CSS等)。这意味着jQuery、 Bootstrap和Backbone等客户端库的使用也会越来越多。因此,我们需要像管理服务端依赖一样管理客户端依赖(及其传递依赖)。我创建了 “WebJars”项目(www.webjars.org),把常见的客户端库打包成Jar文件,这样就可以将其包含到Maven(或其他构建工具)依赖 列表中了。
  3. 创建RESTful JSON服务是不是很容易? RESTful JSON是目前向客户端暴露数据和服务的事实标准;不需要考虑客户端是移动应用还是现代Web应用(包括桌面或移动应用)。从HTTP动词和路径向后端服 务的映射应该非常简单,而且是声明式的。大多数现代Web框架(如JAX-RS、Play Framework、Spray和BlueEyes等)都支持这一点。

InfoQ:你能否谈一下在使用Java和HTML5开发客户端/服务器或移动Web应用时,在设计方面应该考虑哪些因素?

James:新的现代Web架构与传统的Web应用是非常不同的。要理解这些新架构所考虑的因素,最好是听一听那些已经成功地以这种方式构建过应用的人是怎么说的。下面是两个很好的资源,它们就是由成功构建过现代Web应用的人提供的:

InfoQ:你的讲座中提到了无状态Web层架构。你能否更多地讨论一下,它对移动Web应用有何帮助?

James:现代Web应用的优势是,UI状态从服务器移到了客户端。无状态的Web层使如下四个方面得以简化:

  1. Web层不包含状态时,水平伸缩很容易。这使Web层可以独立并即时地伸缩。
  2. 在无状态的Web层中,持续交付也更容易了,因为部署新版本时无需担心会话状态。
  3. RESTful服务应该是无状态的。每个请求都是原子的,不依赖于前面的任何请求。
  4. 不管是采用自动化测试(如单元测试或功能测试),还是开发者在其浏览器中通过点击刷新的方式测试新代码,无状态Web应用测试起来都要容 易得多。在构建Play Framework应用时,我的典型开发周期很简单:编辑代码,保存,然后重新加载浏览器或重新运行自动化测试。这种开发过程非常有效,部分原因就是 Play Framework应用是无状态的。

InfoQ:请问当使用Java和HTML5创建移动Web应用时,开发者有哪些需要注意的地方?

James:在做出技术决策之前一定要理解用户。如果用户的浏览器不支持比较现代的功能,你可能需要退一步,使用特定的API和库。你的用户是哪些人,他们的设备和客户端能提供哪些功能,技术上你可能需要根据这些信息折中一下。

InfoQ:你的讲座中也谈到,浏览器就是新的平台。你能否讨论一下这种新趋势?这种趋势对客户端/服务器或者移动Web应用的开发和部署方式有何影响呢?

James:Web浏览器是通用的客户端平台。当然,它并不完美,但是它无处不在,而且一直处于发展之中。大约 十年前,我们将UI移到了浏览器中,但只是将浏览器用做渲染标记(UI+数据)的非智能终端,而标记仍是在Web服务器上生成的。这种方式的优点是,用户 什么都不需要安装,即可使用任何应用。缺点是每次用户交互UI都需要重新加载页面。Ajax这种革命性的技术出现之后,这种局面有所改观,部分UI逻辑移 向了客户端。现代Web和移动应用走得更远,将整个UI都移到了客户端。此举提供了最好的用户体验和性能。对于可能需要离线工作或者使用原生UI的移动应 用而言,这也非常合适。

InfoQ:对于响应式设计和流式网格布局等移动Web设计理念,请问你有什么看法?

James:过去,我们的Web应用主要是针对一种设备配置而设计的,也就是台式机/笔记本。这些设备大多具有 相似的屏幕尺寸,所以Web应用开发人员不需要考虑其他设备配置。移动和平板设备的增长改变了这一切。开发者需要确保其应用支持种类繁多的设备配置。响应 式设计和流式网格布局就是根据设备配置修改应用布局和外观的策略。其中有些策略用到了CSS Media Queries,让浏览器基于设备配置(如屏幕尺寸)选择不同的CSS文件。使用这些策略时,主要还是根据你构建的是什么以及用户需要什么。在不同的设备 配置之间,如果只是UI和布局有轻微变化,这些方式可以工作地很好。否则,你可能需要查看其他更为重型的策略了。

InfoQ:移动Web开发作为一种新趋势,也使其他技术——如Rest Web服务和用于服务器和客户端之间交换数据的JSON——更为流行了。你能否谈一下这些技术?在整个移动Web开发中,这两种技术是如何互补的?

James:传统的Web应用结合了UI和数据。在只有一种客户端,而且UI 和数据的聚合发生在服务器上时,传统的Web应用表现良好。而在现代Web和移动应用中,可能有多个客户端使用同样的数据。RESTful服务提供了一种 简单方法,动词和路径可以通过HTTP协议映射到资源或数据。JSON是一种数据序列化方法(将内存中的对象转变为可传输的数据)。XML是另一种数据序 列化方法。多数现代应用都选择了JSON,因为它极为简单,而且大多数技术对它都有良好地支持。REST和JSON组合起来非常简单,还能支持大量的服务 器和客户端技术。

InfoQ:请问JavaScript在哪方面比较适合这种新的客户端/服务器与移动开发范型?

James:JavaScript是现代Web应用的客户端编程语言。但是JavaScript并不完美,所以 出现了很多可以编译为JavaScript的语言,如CoffeeScript、TypeScript和Dart等。不管怎样,在现代Web应用中,在客 户端实际运行UI的代码都是JavaScript。

他也谈到了Web与移动应用开发的未来。

James:使用HTML5和Java开发Web和移动应用,未来是非常光明的。客户端和服务器端都有大量的技术可供选择,而且这些技术都发展得非常快。所有这一切最终将帮助我们更容易且更快速地构建更好的应用。对Web开发者而言,这是激动人心的时刻。

关于受访人:

James Ward是 Typesafe的一名技术推广者。目前,他主要关注的是教给开发者如何将Java、Play! 和Scala应用部署到云中。James经常出席全世界的各种技术会议,如JavaOne、Devoxx,以及很多其他的Java聚会。James与 Bruce Eckel合著了《First Steps in Flex》一书。他也发布了大量的教学视频、博客和技术文章。从上个世纪80年代使用Pascal和汇编语言编程开始,James发现了他对编写代码的热 情。之后在90年代初,他开始使用HTML、Perl/CGI和Java进行Web开发。在2004年为Pillar Data Systems构建了一个基于Flex和Java的客户服务门户系统之后,他成了Adobe的一名Flex技术布道者。你可以发现他在通过@JamesWard这个ID玩Twitter,他也在StackOverflow回答问题,还在这里提交代码。

 

查看英文原文:James Ward on Client Server Application Development with HTML5 and Java

This entry was posted in ASP.NET. Bookmark the permalink.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s