本节书摘来自异步社区《单页Web应用&＃xff1a;Javascript从前端到后端》一书中的第1章&＃xff0c;第1.1节&＃xff0c;作者&＃xff1a;【美】Michael S. Mikowski , Josh C. Powell 译者&＃xff1a; 包勇明 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第1章 第一个单页应用
单页Web应用&＃xff1a;Javascript从前端到后端
本章涵盖的内容
定义单页应用
比较最流行的单页应用平台&＃xff1a;Java、Flash和Javascript
编写第一个Javascript单页应用
使用Chrome开发者工具查看单页应用
探讨单页应用对用户的好处
本书是为Web开发人员、架构师和产品经理而编写的&＃xff0c;他们至少要有些Javascript、HTML和CSS的经验。如果你从来没有涉猎过Web开发&＃xff0c;本书就不适合你&＃xff0c;但不管怎样还是欢迎购买。有很多非常不错的教初学者开发和设计网站的书&＃xff0c;但这一本不是。
希望本书成为很好的设计和构建大规模单页应用的指南&＃xff0c;这些应用从前端到后端都使用Javascript。如图1-1描述&＃xff0c;实际上数据库、Web服务器和浏览器应用都使用Javascript语言。
我们花费了最近的6年时间&＃xff0c;主导开发了很多大规模的商业级和企业级单页应用。在这期间&＃xff0c;我们不断变更方法以便战胜遭遇的挑战。我们在本书中分享了这些方法&＃xff0c;它们帮助我们更快速地进行开发&＃xff0c;提供了更好的用户体验&＃xff0c;保证了质量&＃xff0c;提升了团队的沟通效率。
1.1 定义、一些历史和一些关注点
单页Web应用&＃xff1a;Javascript从前端到后端
单页应用是指在浏览器中运行的应用&＃xff0c;在使用期间页面不会重新加载。像所有的应用一样&＃xff0c;它旨在帮助用户完成任务&＃xff0c;比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。
1.1.1 一些历史
单页应用已经出现了很长一段时间。我们来看一些早期的示例。
井字棋——嗨&＃xff0c;我们没说这游戏会很好玩。这个应用是在井字棋游戏中挑战强大无情的电脑对手。为了能运行这个小程序&＃xff08;applet&＃xff09;&＃xff0c;你可能需要对浏览器进行授权。
Flash空间登陆器——这是早期的Flash游戏&＃xff0c;大约在2001年由Duncan Robertson编写。需要安装Flash插件。
Javascript按揭计算器——这个计算器几乎和Javascript自己一样古老&＃xff0c;但计算完全没问题。不需要插件。
机灵的读者&＃xff08;甚至一些懒散的人1&＃xff09;会注意到我们展示了三种最流行的单页应用平台示例&＃xff1a;Java小程序、Flash/Flex和Javascript。上述这些读者可能已经注意到&＃xff0c;只有Javascript单页应用不需要第三方插件就能运行&＃xff0c;没有什么开销和安全方面的顾虑。
如今&＃xff0c;Javascript单页应用通常是这三个平台之中的最佳选择。但是Javascript花了一段时间才变得具有竞争力&＃xff0c;或者说是适用于绝大多数单页应用。我们来看下这是为什么。
1.1.2 是什么导致Javascript单页应用姗姗来迟
在2000年以前&＃xff0c;Flash和Java小程序发展得很不错。Java被用来在浏览器中运行复杂的应用&＃xff0c;甚至是完整的办公套装软件2。Flash成了运行富浏览器游戏的选择平台&＃xff0c;还有后来的视频。另一方面&＃xff0c;Javascript主要致力于的&＃xff0c;仍旧不过是按揭计算器、表单验证、翻转特效和弹窗而已。问题在于我们无法依靠Javascript&＃xff08;或者是它使用的渲染方法&＃xff09;在所有流行的浏览器上提供一致的关键功能。尽管如此&＃xff0c;Javascript单页应用还是比Flash和Java小程序拥有很多引人入胜的优势。
不需要插件——用户不用关心插件的安装和维护以及操作系统的兼容性&＃xff0c;就能访问应用。开发人员也同样不用为单独的安全模型而担心&＃xff0c;这能减少开发和维护时令人头痛的问题3。
不臃肿——使用Javascript和HTML的单页应用&＃xff0c;所需的资源要比需要额外运行环境的插件少得多。
一种客户端语言——Web架构师和大多数开发人员需要知道很多种语言和数据格式&＃xff0c;HTML、CSS、JSON、XML、Javascript、SQL、PHP/Java/Ruby/Perl等。当我们已经在页面上的其他地方使用了Javascript&＃xff0c;为什么还要用Java编写小程序、或者是用ActionScript编写Flash应用呢&＃xff1f;在客户端上的所有东西只使用一种编程语言&＃xff0c;可以大大地降低复杂性。
更流畅和更具交互性的页面——我们已经看过了网页上的Flash和Java应用。应用通常只显示在某个小方盒内&＃xff0c;小方盒周围的很多东西和HTML元素不同&＃xff1a;图形widget不一样、右键不一样、声音不一样、与页面的其他部分交互也受到限制。而Javascript单页应用的话&＃xff0c;整个浏览器窗口都是应用界面。
随着Javascript的成熟发展&＃xff0c;它的大部分缺点不是被修复了&＃xff0c;就是被缓解了&＃xff0c;它的价值优势也水涨船高。
Web浏览器是世界上最广泛使用的应用——很多人会整天开着浏览器窗口并一直使用着。访问Javascript应用只不过是在书签栏上点击一下罢了。
浏览器中的Javascript是世界上分布最广的执行环境之一——到2011年12月&＃xff0c;每天激活的Android和iOS移动设备差不多有一百万台。每台设备的系统都内置了稳健的Javascript执行环境。最近三年&＃xff0c;在世界各地的手机、平板、笔记本电脑和台式机上&＃xff0c;发布了超过十亿个稳健的Javascript实现。
部署Javascript应用很简单——把Javascript应用托管到HTTP服务器上后&＃xff0c;就能被超过十亿的Web用户使用。
Javascript对跨平台开发很有用——现在可以使用Windows、Mac OS X或者Linux来创建单页应用&＃xff0c;部署了一个单独的应用&＃xff0c;不但可以在所有的台式机设备上使用&＃xff0c;而且可以在所有的平板和智能手机上使用。我们得感谢趋于一致的跨浏览器标准实现&＃xff0c;还有诸如jQuery以及PhoneGap这样成熟的库消除了不一致性。
Javascript的运行速度变得惊人的快并且有时能和编译型语言匹敌——它的快速发展得益于Mozilla Firefox、Google Chrome、Opera和Microsoft之间持续不断的激烈竞争。现代Javascript实现利用了诸如即时编译&＃xff08;JIT&＃xff09;成本地机器码、分支预测、类型推断和多线程的高级优化技术4。
Javascript逐渐引入了高级功能——这些功能包括JSON原生对象、本地jQuery风格的选择器和更加一致的AJAX功能。使用成熟的库&＃xff0c;如Strophie和Socket.IO&＃xff0c;推送消息要比以往容易得多。
HTML5、SVG和CSS3的标准和支持已向前推进——这些进步可以完美地渲染像素级别的图形&＃xff0c;这是可以和Java或Flash的生成速度和质量相媲美的。
整个Web项目从头到尾都可以使用Javascript——现在我们可以使用卓越的Node.js Web服务器&＃xff0c;使用诸如CouchDB或者MongoDB来保存数据&＃xff0c;它们都用JSON来通信&＃xff0c;JSON是一种Javascript数据格式。我们甚至可以在服务器和浏览器之间共享代码库。
台式机、笔记本甚至移动设备都越来越强大了——多核处理器的普及和G级别的内存&＃xff0c;意味着过去在服务器上完成的处理工作&＃xff0c;现在可以分给客户端的浏览器了。
有了这些优势&＃xff0c;Javascript单页应用已变得相当流行&＃xff0c;对有丰富经验的Javascript开发人员和架构师的需求也日益旺盛。曾经为多种操作系统&＃xff08;或者是为Java或Flash&＃xff09;开发的应用&＃xff0c;如今只需运行一个Javascript应用即可。创业公司选择使用Node.js作为Web服务器&＃xff0c;移动应用开发人员使用Javascript和PhoneGap为多种移动平台创建“原生的”应用&＃xff0c;这只需要一份代码库。
Javascript并不完美&＃xff0c;我们轻而易举就能发现遗漏的、不一致的和其他不喜欢的东西。但所有的语言都一样。一旦适应了它的核心思想&＃xff0c;采取最佳方法并学会了哪些部分应该避免使用&＃xff0c;Javascript开发就会变得愉悦和高效。
生成式的Javascript&＃xff1a;殊途同归
我们发现直接使用Javascript开发单页应用更加容易。我们把这些应用叫做原生的单页应用。另外一种出人意料的流行方法是使用生成式的Javascript&＃xff0c;开发人员使用另一种语言来编写代码&＃xff0c;然后再转换成Javascript。这种转换要么发生在运行时&＃xff0c;要么发生在单独的生成阶段。著名的Javascript生成器有以下几个。
Google Web Toolkit(GWT)——GWT使用Java来生成Javascript。
Cappuccino——Cappuccino使用Objective-J&＃xff0c;Objective-J是Mac OS X上的Objective-C的副本。Cappuccino自身是从Cocoa应用框架移植过来的&＃xff0c;Cocoa也源自OS X。
CoffeeScript——CoffeeScript将一种自定义的语言转换成Javascript&＃xff0c;它提供了一些语法糖。
考虑到Google在Blogger、Google Groups和其他许多网站上使用了GWT&＃xff0c;我们可以放心地说生成式的Javascript单页应用已被广泛地使用了。这就有个问题&＃xff1a;何苦要用一种高级语言来编写代码&＃xff0c;然后把它转换成其他语言&＃xff1f;这儿有很多生成式的Javascript仍然很受欢迎的理由&＃xff0c;以及为什么这些理由已经没有原来那么令人信服了。
熟悉度——开发人员可以使用更熟悉或者更简单的语言。有了生成器和框架&＃xff0c;他们不用学习Javascript的古怪语法就能进行开发。问题在于&＃xff0c;在转换的过程中&＃xff0c;最终还是会丢失一些东西。当发生这样的情况时&＃xff0c;开发人员不得不查看生成的Javascript并弄懂它&＃xff0c;从而使之正常工作。我们觉得使用抽象层级的语言&＃xff0c;还不如直接使用Javascript来得 高效。
框架——开发人员明白&＃xff0c;在服务端和客户端使用一致的构建库GWT&＃xff0c;使得整个体系结构紧密地结合在了一起。这是一个很有说服力的论据&＃xff0c;尤其当团队已经具备了很多专业知识和有很多正在研发中的产品。
多目标——开发人员可以用生成器为多个目标编写代码&＃xff0c;比如一个文件给Internet Explorer使用&＃xff0c;另一个文件给其余的浏览器使用。尽管为不同的目标生成代码听起来很不错&＃xff0c;但是我们认为&＃xff0c;为所有的浏览器只部署一份Javascript源代码更加高效。幸亏是趋于一致的浏览器实现和成熟的跨浏览器库&＃xff08;如jQuery&＃xff09;&＃xff0c;现在编写复杂的单页应用要简单得多了&＃xff0c;无需修改就能在所有主流的浏览器上运行。
成熟度——开发人员认为开发大规模应用&＃xff0c;Javascript没什么结构化可言。然而Javascript还是逐渐地成为一种更好的语言&＃xff0c;有令人印象深刻的优势和容易控制的缺陷。从强类型语言&＃xff08;比如Java&＃xff09;转来的开发人员&＃xff0c;有时候觉得类型安全的缺失是不可饶恕的。还有些从有配套框架&＃xff08;比如Ruby on Rails&＃xff09;转来的开发人员&＃xff0c;则对结构化的明显缺失而有所不满。令人欣慰的是&＃xff0c;可以结合代码验证工具、代码标准和使用成熟的库来缓解这些问题。
今天&＃xff0c;我们相信原生的Javascript单页应用通常都是最佳选择。这也是我们在本书中要设计和构建的单页应用。
1.1.3 我们的关注点
本书演示了如何从前端到后端都使用Javascript5来开发有吸引力的、稳健的、可扩展的和易于维护的单页应用。除非另有说明&＃xff0c;否则从这一刻起&＃xff0c;当提到单页应用时&＃xff0c;我们指的就是原生的Javascript应用&＃xff0c;业务和显示逻辑直接使用Javascript编写&＃xff0c;由浏览器执行。Javascript利用浏览器技术来渲染界面&＃xff0c;如HTML5、CSS3、Canvas或者SVG。
单页应用可以使用许多服务端技术。自从这么多的Web应用转移到了浏览器端&＃xff0c;通常对服务器的要求就大大地降低了。图1-2展示了业务逻辑和HTML的生成是如何从服务端迁移到客户端的。
在第7章和第8章&＃xff0c;我们会重点讨论后端&＃xff0c;所使用的Web服务器和数据库的语言都是Javascript。你可以不选择这种方式或者可能喜欢另一种后端。这没关系&＃xff0c;不管后端使用的是什么技术&＃xff0c;本书中使用的大部分单页应用的思想和技术都是有效的。但是如果你想从前端到后端都使用Javascript&＃xff0c;那我们已经为你代劳了。
我们在客户端使用的库&＃xff0c;包括用来操作DOM的jQuery&＃xff0c;还有历史管理和事件处理的插件。我们使用TaffyDB2来提供高性能的、以数据为中心的模型。使用Socket.IO提供在服务端和客户端之间无缝的、近实时的消息传输。在服务端&＃xff0c;使用Node.js作为基于事件的Web服务器。Node.js使用Google V8 Javascript引擎&＃xff0c;擅长处理成千上万的并发连接。在Web服务器上也使用了Socket.IO。使用的数据库是MongoDB&＃xff0c;它是一种NoSQL数据库&＃xff0c;使用Javascript原生的数据格式JSON来保存数据&＃xff0c;也有Javascript API和命令行接口。所有这些都是久经考验和流行的解决方案。
开发单页应用所需要编写的Javascript代码&＃xff0c;在规模上至少要比传统网站大一个数量级&＃xff0c;这是因为应用的很多逻辑从服务端转移到了浏览器端。开发一个单页应用&＃xff0c;可能需要很多开发人员同时编写代码&＃xff0c;最终的代码量可能远远超过100 000行。以前为服务端开发而保留的约定和规范&＃xff0c;在这种规模下工作是必需的。另外一方面&＃xff0c;服务器软件已被简化&＃xff0c;只和认证、验证和数据服务相关。在演示示例的过程中&＃xff0c;请记住这一点。
京公网安备 11010802041100号