过去，前端开发不像现在这么复杂，也不像现在这么令人兴奋。毕竟每天都有新工具、新框架和新插件出现，需要我们不断学习。所幸，我们Grab的网页设计团队一直都走在前端开发的前沿，已经在自家网页应用中融入了现代JavaScript系统。

但是，新员工和后端工程师可能还不太了解现代JavaScript系统。因此，在研发新功能或者修复漏洞时，会有些吃力。这时，公司就必须指导他们学习前端开发知识，帮助他们减少使用系统时遇到的问题，以最快的速度把代码介绍给用户。

在这份学习指南中，我们以Grab目前使用的工具为基础，从前端开发的每个方面出发，向大家推荐了几种值得学习的库和框架。

使用须知

1.熟练掌握核心编程概念；

2.熟悉基本命令行操作和Git这类源代码本版控制系统；

3.拥有网页开发经验，利用Ruby on Rails和Django这类框架开发过服务器端渲染的网页应用；

4.了解网页运作过程，熟悉HTTP这类网络协议。

下面，我们就开始详细介绍：

NO.1 单页面应用程序（即Single-page App，以下简称SPA）

现如今，网页开发人员不再把所开发的产品叫做网站，而是叫做网页应用。虽然二者没有严格区分，但后者的交互性和动态性更强，能让用户自行操作并且收到特定回应。

以前，浏览器会收到来自服务器的HTML。当用户访问另一个URL地址时，需要全页刷新，服务器也会发送全新HTML。这就是所谓的服务器端渲染。

但是，在现代SPA中，客户端渲染已经取代了服务器端渲染。浏览器会先从服务器上加载出最初图像，和包括框架、库和应用代码在内的脚本，以及整个应用所需的样式表。当用户访问其他页面时，页面将不会进行整体刷新，而是通过HTML5 History API对页面地址进行更新。以JSON形式呈现出来的新页面所需的新数据，将会通过向服务器发出的AJAX请求，由浏览器检索进行检索。接着，SPA会通过原先在页面中下载好的JavaScript，来对页面数据进行动态更新。

SPA的优点

1.应用针对用户操作给出的反应更加灵敏，不会由于页面整体刷新而出现闪退；

2.向服务器发送的HTTP请求减少，无需在每一页进行重复下载；

3.用户和服务器划分明确，无需修改服务器代码就可以轻松为新用户创建不同平台。另外，只要不违背API规则，还可以分别对用户和服务器的技术堆栈进行修改。

SPA的缺点

1.最开始的加载任务较重，包括框架和应用代码等；

2.需要对服务器进行额外的配置操作，让它将所有请求汇集到同一个进入点；

3.SPA依靠JavaScript来呈现内容，但并不是所有搜索引擎都能够在爬虫过程中执行JavaScript。这一点，无疑会对应用的搜索引擎优化带来负面影响。

NO.2 新时代JavaScript

在深入研究开发JavaScript网页应用的各个方面之前，首先要熟悉网络语言，即JavaScript或者ECMAScript。JavaScript用途非常广泛，可以用来开发网页服务器、本机移动应用和桌面应用。

在2015年之前，最近的一次网络语言更新，是2011年的ECMAScript 5.1。但是最近几年，JavaScript突然取得了不少进展。2015年，ECMAScript 2015（之前叫做ECMAScript 6）问世。与此同时，大量全新句法结构的出现，也使得代码编写更加简单。当然了，也不是所有浏览器都全面引入了ES2015。

因此，正式开始研发应用之前，一定要熟悉掌握ES5和ES2015。目前，ES2015是相对较新的。不少开源代码和Node.js应用还是用ES5写的。所以说，如果你想在浏览器控制台中进行漏洞调试，那应该还不能使用ES2015句法。不过，下面我们即将要介绍的，不少现代库中的文件编制和代码示例，却是用ES2015写的。在Grab，我们选择使用ES2015来享受JavaScript句法更新升级之后，所带来的超高生产能力。

简单地说，在开发应用之前，你至少需要花上一两天的时间，来回顾ES5、探索ES2015。当然了，最好是能够花上三四天的时间，来进一步研究其中的句法。

NO.3 用户界面——React

如果非要说出近年来前端系统引入频率最高的JavaScript 项目，那应该是React。React是由Facebook工程师创建并且开源的一个库。开发人员可以在这个库中，为自家网页界面编写不同组件并且进行结合。

React带来了不少激进创意，鼓励开发人员从各个角度重新思考，以便找到最佳方式。多年来，网页开发人员一直认为，HTML、JavaScript和CSS应该分开来写。但React却是恰恰相反，它鼓励你在JavaScript当中编写HTML和CSS。虽然一开始听上去，这是个疯狂的想法，但尝试过后就会有全新的发现。具体说来，React有如下几个特征：

1.阐述性：说白了，就是你只需要描述自己的想法，不需要落实。以往开发人员都必须要通过一系列步骤，来操控DOM才可以让应用从一种状态变为另一种状态。但在React当中，你只需要简单地在各个组件中改变状态就行。因为整个呈现出来的结果，会根据各个组件的状态，自动进行更新和升级。

2.可维护性：通过改变各个组件来改变整体，能够保证重复使用。我们发现，定义一个组件的属性和部类，能够让React代码自行完成文件编制。这样一来，读者就能够清楚地知道使用该组件都需要些什么。

3.高效能性：我们只知道React使用的是虚拟DOM，却不知道它为什么要使用虚拟DOM。现代JavaScript引擎的运行速度非常快，无论是从DOM中读取内容，还是向DOM写内容，都需要花费很长时间。但是，React却提供了一种速度较快的虚拟表现形式。

4.易学习性：React学起来非常简单，需要掌握的API比较少，而且这些API基本都是保持不变的。作为最大的社区之一，React拥有众多能够灵活使用的工具和开源用户界面组件，而且可以直接在网上找到大量学习资源。

NO.4 状态管理——Flux或Redux

随着应用中的内容越来越多，你会发现应用的结构也变得越来越乱。有可能应用中的各个组件需要分享和显示共同数据，但上面介绍的React却无法找到一种合适的方式来解决这个问题。毕竟，React只负责处理视图层面的问题，并不能处理其他层面的结构问题，比如说在MVC模式当中，除了视图以外的模型和控制器层面的问题。为此，Facebook就开发了一套叫做Flux的应用架构。它在充分利用单向数据流的基础之上，补充和完善了React的可组合视图组件。简单说来，Flux架构有以下几个特征：

1.单向数据流：提高应用的可预测性，能够轻松掌握更新升级的具体进度；

2.职责和范围的分离：Flux架构中的每一部分都有特定的责任，彼此之间是丝毫不挂钩的；

3.能够与表述性编程完美配合：无需特别明示不同状态之间的转换视图就可以针对视图进行升级。

鉴于从本质上来讲，Flux并不是一个框架，所以开发人员已经尝试过各种方法，以便将Flux模式付诸实践。因此，Redux就诞生了。Redux结合了Flux、Command模式和Elm架构的创意，事实上就是一个状态管理库。现如今的开发人员，都习惯性地将其与React配套使用。具体说来，Redux有以下几个核心概念：

1.应用的状态都是利用单一的旧式JavaScript对象来描述的；

2.可以通过调度某一行为操作来改变状态；

3.缩减器或者折叠器能够利用当下的状态和行为操作，来生产新的状态。

当然了，虽然概念听上去比较简单，但功能却非常强大，它们能够让应用：

1.由用户提出在服务器上完成状态改变；

2.在应用当中追踪、登录和回溯所有变化；

3.更加便利地使用撤销和重做功能。

NO.5 带有风格的编码——CSS Module

所谓CSS就是层叠样式表，专门指用来描述HTML元素样式的规则。想要写出比较好的CSS，是件很困难的事情，一般需要多年经验和不断尝试。其实，一开始，CSS是专门为网页文件设计的，并不是为网页应用设计的，更别说偏向于组件架构的网页应用了。因此，经验丰富的前端开发人员就想尽一切办法，希望能够指导人们利用SMACSS和BEM来为那些比较复杂的项目写出组织性和条理性较强的CSS。

如果在此之前，你从来没有接触过CSS，那么Codecademy网站上的HTML & CSS课程，可以在很大程度上帮助你学习入门知识。随后，你可以了解有关Sass预处理程序的知识。Sass预处理程序是CSS语言的延伸，在之前的基础之上进行了句法完善。总而言之，你可以花上三四天的时间，先去了解CSS方法，再去学习CSS模块，尽量综合利用SMACSS或BEM方法以及CSS模块，来开发出带有自己风格的应用。

NO.6 可维护性

与编写代码相比，人们用眼睛看代码的次数更多。在Grab这种规模较大的公司更是如此，各位工程师都在忙着不同的项目。因此，我们非常看重编程代码的可读性、可维护性和稳定性。当然了，想要同时保证这三点，也是有方法可以利用的，比如说广泛测试、一致的编程风格，以及类型检查。

NO.7 测试——Jest + Enzyme

Jest是由Facebook开发的一个测试库，主要目的就是减少测试过程中可能出现的问题。在Facebook进行的项目当中，它提供了非常顺畅的使用体验。不同测试可以同时进行，以便缩短拿到结果的时间。在默认情况和监测模式下，只会运行那些针对发生了改变的文件的测试。而其中，我们特别喜欢的一个功能，叫做Snapshot Testing，即快照测试。Jest能够将React组件和Redux状态生成的结果保存下来，并且还能够以序列化文件的形式保存下来。这样一来，就避免了手动操作。

虽然React也有测试功能，但是Facebook开发的Enzyme能够通过一个类似jQuery的API，让你更加方便地生成、维护和操作React组件的产出结果。经验丰富的开发人员，会推荐你使用Enzyme来测试React组件。

总之，Jest和Enzyme能够在简化前端测试代码编写过程的同时，为开发人员带来更多乐趣。这样一来，开发人员也就会更加愿意编写测试代码。不仅如此，由于职责和界面定义明确，React组件以及Redux的行为操作和缩减器，测试起来也就会更加容易。

NO.8 检查JavaScript出现的问题 — ESLint

所谓linter，就是一种对编程代码进行静态分析并且及时找出问题的工具，能够在预防错误出现的同时，保证同一种编码风格。而ESLint就是其中一种检查JavaScript编码问题的工具，具有比较明显的扩张性和定制性。如果开发团队想要编写带有个别风格的代码，那也可以自行编写查错规则。

在大多数情况下，使用ESLint就像在项目文件夹里修改配置文件一样简单。如果你不自己写的话，那要学的知识并没有多少。你只要在出错时及时发现，然后找到合适的解决方法。