GPL v3

前端开发的历史和趋势

• 前端：针对浏览器的开发，代码在浏览器运行
• 后端：针对服务器的开发，代码在服务器运行

互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。

1. 后端收到浏览器的请求
2. 生成静态页面
3. 发送到浏览器

那时的网站开发，采用的是后端 MVC 模式。

• Model（模型层）：提供/保存数据
• Controller（控制层）：数据处理，实现业务逻辑
• View（视图层）：展示数据，提供用户界面

前端只是后端 MVC 的 V。

以 PHP 框架 Laravel 为例。

那时的前端工程师，实际上是模板工程师，负责编写页面模板。

后端代码读取模板，替换变量，渲染出页面。

Ajax 技术诞生，改变了一切。

• 2004年：Gmail
• 2005年：Google 地图

前端不再是后端的模板，可以独立得到各种数据。

Ajax 技术促成了 Web 2.0 的诞生。

前端通过 Ajax 得到数据，因此也有了处理数据的需求。

前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC 框架的诞生。

• 2010年，Backbone.js

Backbone 将前端代码分成两个基本部分。

• Model：管理数据
• View：数据的展现

Backbone 只有 M 和 V，没有 C。因为，前端 Controller 与后端不同。

• 不需要，也不应该处理业务逻辑
• 只需要处理 UI 逻辑，响应用户的一举一动

所以，前端 Controller 相对比较简单。Backbone 没有 C，只用事件来处理 UI 逻辑。

  var AppView = Backbone.View.extend({
    // ...
    events: {
      "keypress #new-todo":  "createOnEnter",
      "click #clear-completed": "clearCompleted",
      "click #toggle-all": "toggleAllComplete"
    },
  });

前端还有一种天然的方法，可以切换视图，那就是 URL。

通过 URL 切换视图，这就是 Router（路由）的作用。以 Backbone 为例。

另一些框架提出 MVVM 模式，用 View Model 代替 Controller。

• Model
• View
• View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。

本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。

前端可以做到：

• 读写数据
• 切换视图
• 用户交互

这意味着，网页其实是一个应用程序。

SPA = Single-page application

2010年后，前端工程师从开发页面，变成了开发”前端应用“（跑在浏览器里面的应用程序）。

传统的架构

Google 公司推出的 Angular 是最流行的 MVVM 前端框架。

它的风格属于 HTML 语言的增强，核心概念是双向绑定。

浏览器打开demos/angular-demo/index.html，可以看到一个输入框。

Vue.js 是现在很热门的一种前端 MVVM 框架。

它的基本思想与 Angular 类似，但是用法更简单，而且引入了响应式编程的概念。

Vue 的模板与数据，是双向绑定的。

• Ajax -> 前端应用兴起
• 智能手机 -> 多终端支持

这两个原因，导致前端开发方式发生根本的变化。

前端不再是后端 MVC 中的 V，而是单独的一层。

前后端分离以后，它们之间通过接口通信。

后端暴露出接口，前端消费后端提供的数据。

后端接口一般是 REST 形式，前后端的通信协议一般是 HTTP。

2009年，Node 项目诞生，它是服务器上的 JavaScript 运行环境。

Node = JavaScript + 操作系统 API

• JavaScript 成为服务器脚本语言，与 Python 和 Ruby 一样
• JavaScript 成为唯一的浏览器和服务器都支持的语言
• 前端工程师可以编写后端程序了

• Node 环境下开发
• 大量使用服务器端工具
• 引入持续集成等软件工程的标准流程
• 开发完成后，编译成浏览器可以运行的脚本，放上 CDN

前端工程师正在转变为全栈工程师

• 一个人负责开发前端和后端
• 从数据库到 UI 的所有开发

怎样才能称为全栈工程师？

• 传统前端技能：HTML、JavaScript、CSS
• 一门后端语言
• 移动端开发：iOS / Android / HTML5
• 其他技能：数据库、HTTP 等等

历史演变：前后端不分 -> 前后端分离 -> 全栈工程师

动力：更加产业化、大规模地生产软件

• 效率更高
• 成本更低

通用性好、能够快速产出的技术最终会赢，单个程序员的生产力要求越来越高。

为什么 H5 技术会赢得移动端？

• 开发速度快：Native 需要重新编译才能看到结果，H5 是即时输出
• 开发成本低：Native 需要两个开发团队，H5 只要一个
• 快速发布：安卓 Native 新版本需要24小时，iOS 需要 3 ～ 4 天，H5 可以随时更新

• 联网
• 高并发
• 分布式
• 跨终端

现在基于 Web 的前端技术，将演变为未来所有软件的通用的 GUI 解决方案。

• 端工程师
  • 手机端
  • PC 端
  • TV 端
  • VR 端
  • ……
• 云工程师

React 技术栈

React 是目前最热门的前端框架。

• Facebook 公司2013年推出
• 现在最好的社区支持和生态圈
• 大量的第三方工具

• 组件模式：代码复用和团队分工
• 虚拟 DOM：性能优势
• 移动端支持：跨终端

• 学习曲线较陡峭
• 全新的一套概念，与其他所有框架截然不同
• 只有采用它的整个技术栈，才能发挥最大威力

总结：React 非常先进和强大，但是学习和实现成本都不低

React 使用 JSX 语法，JavaScript 代码中可以写 HTML 代码。

let myTitle = <h1>Hello, world!</h1>;

（1）JSX 语法的最外层，只能有一个节点。

// 错误
let myTitle = <p>Hello</p><p>World</p>;

（2）JSX 语法中可以插入 JavaScript 代码，使用大括号。

let myTitle = <p>{'Hello ' + 'World'}</p>

JavaScript 引擎（包括浏览器和 Node）都不认识 JSX，需要首先使用 Babel 转码，然后才能运行。

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
  // ** Our code goes here! **
</script>

React 需要加载两个库：React 和 React-DOM，前者是 React 的核心库，后者是 React 的 DOM 适配库。

Babel 用来在浏览器转换 JSX 语法，如果服务器已经转好了，浏览器就不需要加载这个库。

React 允许用户定义自己的组件，插入网页。

组件可以从外部传入参数，内部使用this.props获取参数。

组件往往会有内部状态，使用this.state表示。

React 为组件的不同生命阶段，提供了近十个钩子方法。

• componentWillMount()：组件加载前调用
• componentDidMount()：组件加载后调用
• componentWillUpdate(): 组件更新前调用
• componentDidUpdate(): 组件更新后调用
• componentWillUnmount()：组件卸载前调用
• componentWillReceiveProps()：组件接受新的参数时调用

我们可以利用这些钩子，自动完成一些操作。

组件可以通过 Ajax 请求，从服务器获取数据。Ajax 请求一般在componentDidMount方法里面发出。

componentDidMount() {
  const url = '...';
  $.getJSON(url)
    .done()
    .fail();
}

React 的一大优势，就是网上有很多已经写好的组件库，可以使用。

View 是 State 的输出。

view = f(state)

上式中，f表示函数关系。只要 State 发生变化，View 也要随之变化。

React 的本质是将图形界面（GUI）函数化。

const person = {
  name: "michel",
  age: 31
}

const App = ({ person }) => <h1>{ person.name }</h1>

ReactDOM.render(<App person={person} />, document.body)

React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。

如果开发大应用，还需要解决两个问题。

• 架构：大型应用程序应该如何组织代码？
• 通信：组件之间如何通信？

React 只是视图层的解决方案，可以用于任何一种架构。

• MVC
• MVVM
• Observer
• Reactive
• ...

到底哪一种架构最合适 React ？

组件会发生三种通信。

• 向子组件发消息
• 向父组件发消息
• 向其他组件发消息

React 只提供了一种通信手段：传参。对于大应用，很不方便。

通信的本质是状态的同步。

React 同步状态的基本方法：找到通信双方最近的共同父组件，通过它的state，使得子组件的状态保持同步。

Facebook 提出 Flux 架构的概念，被认为是 React 应用的标准架构。

• 不同组件的state，存放在一个外部的、公共的 Store 上面。
• 组件订阅 Store 的不同部分。
• 组件发送（dispatch）动作（action），引发 Store 的更新。

Flux 只是一个概念，有30多种实现。

React 架构的最重要作用：管理 Store 与 View 之间的关系。

• MobX：响应式（Reactive）管理，state 是可变对象，适合中小型项目
• Redux：函数式（Functional）管理，state 是不可变对象，适合大型项目

MobX 的核心是观察者模式。

• Store 是被观察者（observable）
• 组件是观察者（observer）

一旦Store有变化，会立刻被组件观察到，从而引发重新渲染。

const {observable, computed} = mobx;
const {observer} = mobxReact;

const person = observable({name: "张三", age: 31});

const App = observer(
  ({ person }) => <h1>{ person.name }</h1>
);

ReactDOM.render(<App person={person} />, document.body);
person.name = "李四";

代码：demos/mobx-demo/browser-demo目录

Redux 的核心概念

• 所有的状态存放在Store。组件每次重新渲染，都必须由状态变化引起。
• 用户在 UI 上发出action。
• reducer函数接收action，然后根据当前的state，计算出新的state。

• UI 组件与后台数据无关，可以由设计师负责
• 容器组件只负责数据和行为，一旦 Store 的数据结构变化，只要调整容器组件即可
• 表现层和功能层脱钩，有利于代码重用，也有利于看清应用的数据结构和业务逻辑

reducer是一个纯函数，用来接收action，算出新的state。

function reducer(state = {
  text: '你好，访问者',
  name: '访问者'
}, action) {
  switch (action.type) {
    case 'change':
      return {
        name: action.payload,
        text: '你好，' + action.payload
      };
  }
}

• Store由 Redux 提供的createStore方法生成，该方法接受reducer作为参数。
• 为了把Store传入组件，必须使用 Redux 提供的Provider组件在应用的最外面，包裹一层。

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.body.appendChild(document.createElement('div'))
);

Node 应用开发

Node 是服务器的 JavaScript 运行环境，提供 API 与操作系统互动。

主要用途：

• 开发前端应用
• 快速搭建服务
• 架设网站

安装 Node 的时候，会同时安装 npm。

$ npm -v

它是 Node 的模块管理器，开发 Node 项目的必备工具。

1. 模块机制
2. 版本管理
3. 对外发布
4. 持续集成的标准开发流程

REST 是浏览器与服务器通信方式的一种设计风格。

它的全称是“REpresentational State Transfer”，中文意为”表现层状态转换“。

• Resource：资源
• Representation：表现层
• State：状态
• Transfer：转换

1. 互联网上所有可以访问的内容，都是资源。
2. 服务器保存资源，客户端请求资源。
3. 同一个资源，有多种表现形式。
4. 协议本身不带有状态，通信时客户端必须通过参数，表示请求不同状态的资源。
5. 状态转换通过HTTP动词表示。

URL 是资源的唯一识别符。

• /store/1
• /store/2
• /store/1/employee/2

查询字符串表示对所请求资源的约束条件。

• GET /zoos/1/animals?limit=10
• GET /zoos/1/animals?limit=10&offset=10
• GET /animals?zoo_id=1

GET /v1/stores/1234
PUT /v1/stores/1234
POST /v1/stores
DELETE /v1/stores/1234

Express 是最常用的 Node 框架，用来搭建 Web 应用。

前端开发转移到后端环境，意味着可以适用标准的软件工程流程。

1. 本地开发（developing）
2. 静态代码检查（linting）
3. 单元测试（testing）
4. 合并进入主干（merging）
5. 自动构建（building）
6. 自动发布（publishing）

Continuous integration（简称 CI）：

开发代码频繁地合并进主干，始终保持可发布状态的这个过程。

优点

• 快速发现错误
• 防止分支大幅偏离主干
• 让产品可以快速迭代，同时还能保持高质量

• 发现语法错误
• 发现风格错误
• 自动纠正错误

Web 应用越来越复杂，意味着更可能出错。测试是提高代码质量、降低错误的最好方法之一。

• 测试可以确保得到预期结果。
• 加快开发速度。
• 方便维护。
• 提供用法的文档。

对于长期维护的项目，测试可以减少投入时间，减轻维护难度。

• 单元测试（unit testing）
• 功能测试（feature testing）
• 集成测试（integration testing）
• 端对端测试 (End-to-End testing）

• TDD：测试驱动的开发（Test-Driven Development）
• BDD：行为驱动的开发（Behavior-Driven Development）

它们都要求先写测试，再写代码。

思考题：测试导向的开发模式有明显的优点，为什么现实生活中采用的人不多？

两者侧重点不一样

• TDD：基于开发者角度，重点测试函数的输入输出
• BDD：基于使用者角度，重点测试对用户行为的反应

比如，有一个计数器函数counter，TDD 测试的是输入1，输出的应该是2；BDD 测试的是用户访问以后，计数器应该增加一次。

Mocha 是目前最常用的测试框架。

功能测试指的是，站在外部用户的角度，测试软件的某项功能。

与内部代码实现无关，只测试功能是否正常。

很多时候，单元测试都可以通过，但是整体功能会失败。

功能测试必须在真正浏览器做，现在有四种方法。

• 使用本机安装的浏览器
• 使用 Selenium Driver
• 使用 PhantomJS
• 使用 Electron

目前，最常见的方案是使用 Appium。

• 基于 WebDriver
• 采用 客户端/服务器架构
• 可以在模拟器运行，也可以在真机运行

1. WebDriver 客户端发出测试请求和测试内容
2. Appium 服务器转发到相应的测试运行器（Driver）
3. iOS 设备是 UIAutomation，安卓设备是 UiAutomator
4. 测试运行器将运行结果，返回给 Appium

代码合并进主干以后，就可以进行自动构建和发布了。

网上有很多 PaaS 平台，提供持续集成服务。

Travis CI 就是其中最著名的一个，它可以根据你提供的脚本，自动完成构建和发布。