单页应用开发权威指南

第1部分 单页应用开发基础

这一部分介绍单页应用框架所依赖的基础技术和原理。经过这一部分的学习,你应该可以了解到一个单页应用,或者说一个单页应用框架是如何运作的。掌握一个单页应用各个组成部分,在平时开发时可以更好地甄别框架和组件,游刃有余地进行开发。

第1章 何为单页应用?

单页应用的出现不可考。从 Wikipedia 上可以看到,起源很早,甚至可以追溯到2002年。你可能会说,这不是什么新概念,Google 的 Gmail 就是一个单页应用,可追溯到2004年到2005年。但这个概念火热起来在2010年,Backbone 问世之后。随着后来的 Knockout、Ember.js、AngularJS 的兴起,单页应用开始家喻户晓起来。2015年 React 的出现,Virtual DOM 横扫了各种 MV* 框架,单页应用框架甚至进入到了一个新的时代,甚至与函数式编程结合到了一起。比如 Angular 2 与 RxJS 的结合React 与 Redux 的结合等等。

传统的网页应用

为了说清楚什么是单页应用,我们先来看看传统的网页应用是什么样子的。

浏览器服务器刷新、超链接、表单提交HTML 页面浏览器服务器

目前绝大部分的网站都还采用这种形式。单个 HTML 页面作为功能元件,通过刷新,超链接、表单提交等方式,组合排列这些 HTML 页面,来为用户提供服务。作为网页应用的传统形式长久不衰,很多流行的开发框架都以之作为范式设计的。比如 Ruby on RailsSpring MVCExpress 等等。

浏览器 服务端前端展示控制器视图数据服务

在传统的网页应用中,浏览器更多的是充当一个展示层,路由处理、服务调用、页面跳转流程都由服务端来处理。即 MVC 都放在服务器端,而 V 作为用户界面则通过网络发送到浏览器端,作为 UI 与用户交互。

这样的范式有以下特点:

  • 重服务端,由于 MVC 都存在于服务器上,因此这类应用在开发资源和开发的重心都偏向后端,往往是后端工程师来主导整个项目开发;
  • 页面频繁刷新,由于浏览器端只是一个展现层,当页面功能有所变化的时,页面就刷新,这会导致资源的浪费,用户需要花费额外的时间等待页面刷新,用户体验不佳。

当然,上面表达的是一种普遍的范式,而 Ajax 则是这个范式的异类。Ajax 的出现使得网页可以局部更新,使得网页上的一部分可以作为一个功能元件来为用户提供服务。这种形式的网页应用已经具备单页应用的雏型,但并不是标准的单页应用。

单页应用的特点

相较于传统网页应用,单页应用将 MVC 前置到了浏览器端:

服务端 浏览器数据层数据服务控制器视图

  • 控制器前置,单页应用将路由处理放在浏览器端,即在浏览器端直接响应浏览器地址的变化,分发到对应的路由,向用户呈现对应的界面。
  • 以小块组件为功能元件,类似于传统网页中的 Ajax 组件,单页应用以小的组件为功能元件,在路由变化时,不再刷新整个页面,而是组合这些小的组件,替换变化的部分。
  • 数据层前置,与 Ajax 组件一个明显的区别是,单页应用在浏览器端通常有一层实实在在的数据层,而服务端则退化成了完全的数据 API。浏览器端的数据层会封装服务端 API,供上层的视图层调用。

看上去有点类似于客户端(Android、iOS)开发,交互全都放在客户端,服务端仅仅提供 API。

单页应用的好与坏

每种技术都有其利弊,单页应用也是如此。我们先说说好的地方:

  • 无刷新体验,这个应该是最显著的有点,由于路由分发直接在浏览器端完成,页面是不刷新,对用户的响应非常及时,因此提升了用户体验;
  • 完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;
  • API 共享,如果你的服务是多端的(浏览器端、Android、iOS、微信等),单页应用的模式便于你在多个端共用 API,可以显著减少服务端的工作量。容易变化的 UI 部分都已经前置到了多端,只受到业务数据模型影响的 API,更容易稳定下来,便于提供鲁棒的服务;
  • 组件共享,在某些对性能体验要求不高的场景,或者产品处于快速试错阶段,借助于一些技术(HybridReact Native),可以在多端共享组件,便于产品的快速迭代,节约资源。

单页应用的优点有时候也是缺点:

  • 首次加载大量资源,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长;
  • 较高的前端开发门槛,MVC 前置,对前端工程师的要求提高了,不再是『切切图,画画页面这么简单』;同时工作量也会增加数倍,开发这类应用前端工程师的数量往往多于后端;
  • 不利于 SEO,单页页面,数据在前端渲染,就意味着没有 SEO,或者需要使用变通的方案。

总结

在笔者看来,单页应用是对原来 Ajax 组件的一种延伸,相较于传统的网页应用,将 MVC 前置到了浏览器端,浏览器就相当于 iOS 系统,单页应用就像是应用,与服务端仅仅通过 API 来沟通。每种技术方案都有利弊,是否要使用单页应用技术,需要通过对产品需求(跨平台、SEO、性能、用户群属性?)、资源(工程师配比,能力?)时间要求等的评估来做出选择。

接下来,我们先从单页应用的视图开始学习,看看前端工程师最熟悉的组件,在单页应用中是什么样子的!