全栈工程师培训材料

最新推荐文章于 2022-07-17 01:05:00 发布

天意pt

最新推荐文章于 2022-07-17 01:05:00 发布

阅读量1.6k

点赞数

分类专栏： Javascript html html5 Nodejs Angular backbone.js jquery.js underscore.js swiper3.js CSS

CSS 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Javascript

24 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

From: https://github.com/ruanyf/jstraining

全栈工程师培训材料，帮助学习者掌握全栈开发的基本知识，承担简单 Web 应用的前后端开发。

一共四讲，适合两天的训练营，请先阅读《培训准备》。培训时，需要完成课堂练习。

第一讲：前端开发的历史和趋势

前端开发的历史演变
前端 MVC 框架的兴起
前后端分离
全栈工程师
前端开发的未来

第二讲：React 技术栈

React 的基本用法
React 应用的架构

第三讲：Node 应用开发

Node 的基本用法
Restful API
Express 框架搭建 Web 应用

第四讲：前端工程简介

持续集成
静态代码检查
单元测试
功能测试
持续集成服务 Travis CI

License

GPL v3

前端开发的历史和趋势

什么是前端

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

前后端不分的时代

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

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

后端 MVC 的开发模式

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

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

前端只是后端 MVC 的 V。

以 PHP 框架 Laravel 为例。

前端工程师的角色

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

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

典型的 PHP 模板

<html>
  <head><title>Car {{ $car->id }}</title></head>
  <body>
    <h1>Car {{ $car->id }}</h1>
    <ul>
      <li>Make: {{ $car->make }}</li>
      <li>Model: {{ $car->model }}</li>
      <li>Produced on: {{ $car->produced_on }}</li>
    </ul>
  </body>
</html>

Ajax

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

2004年：Gmail
2005年：Google 地图

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

Web 2.0

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

Web 1.0：静态网页，纯内容展示
Web 2.0：动态网页，富交互，前端数据处理

从那时起，前端变得复杂了，对前端工程师的要求越来越高。

前端 MVC 框架

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

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

2010年，Backbone.js

Backbone.js

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

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

前端 Controller

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"
    },
  });

Router

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

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

App.Router = Backbone.Router.extend({
  routes: {
    '': 'index',
    'show': 'show'
    },
  index: function () {
    $(document.body).append("调用了 Index 路由");
  },
  show: function () {
    $(document.body).append("调用了 Show 路由");
  },
});

示例：Backbone Router

打开demos/backbone-demo/index.html，按照《操作说明》，查看示例。

MVVM 模式

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

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

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

SPA

前端可以做到：

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

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

SPA = Single-page application

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

传统的架构

单页应用的架构

多了一个前端 MVC 层

Angular

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

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

示例：Angular 的双向绑定

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

<div ng-app="">
  <p>
    姓名 :
    <input
      type="text"
      ng-model="name"
      placeholder="在这里输入您的大名"
    >
  </p>
  <h1>你好，{{name}}</h1>
</div>

Vue

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

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

示例：Vue 的双向绑定

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

打开demos/vue-demo/index1.html，按照《操作说明》，查看示例。

HTML 代码

<div id="journal">
  <input type="text" v-model="message">
  <div>{{message}}</div>
</div>

JS 代码

var journal = new Vue({
  el: '#journal',
  data: {
    message: 'Your first entry'
  }
});

前后端分离

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

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

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

REST 接口

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

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

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

Node

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

Node = JavaScript + 操作系统 API

Node 的意义

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

前端开发模式的根本改变

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

全栈工程师

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

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

全栈技能

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

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

软件行业的发展动力

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

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

效率更高
成本更低

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

H5 就是一个最好的例子

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

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

未来软件的特点

联网
高并发
分布式
跨终端

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

未来只有两种软件工程师

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

React 技术栈

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

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

React 的优点

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

React 的缺点

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

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

JSX 语法

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

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

JSX 语法解释

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

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

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

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

Babel 转码器

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 语法，如果服务器已经转好了，浏览器就不需要加载这个库。

课堂练习：JSX 语法

浏览器打开demos/jsx-demo/index.html，按照《操作说明》，完成练习。

ReactDOM.render(
  <span>Hello World!</span>,
  document.getElementById('example')
);

示例：React 组件

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

浏览器打开demos/react-component-demo/index1.html，按照《操作说明》，仔细查看源码。

class MyTitle extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
};

ReactDOM.render(
  <MyTitle/>,
  document.getElementById('example')
);

课堂练习：组件的参数

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

打开demos/react-component-demo/index2.html，按照《操作说明》，完成练习。

class MyTitle extends React.Component {
  render() {
    return <h1
      style={{color: this.props.color}}
    >Hello World</h1>;
  }
};

<MyTitle color="red" />,

示例：组件的状态

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

浏览器打开demos/react-component-demo/index3.html，按照《操作说明》，仔细查看源码。

课堂练习：React 组件实战

浏览器打开demos/react-component-demo/index4.html，按照《操作说明》，完成练习。

组件的生命周期

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

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

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

课堂练习：组件的生命周期

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

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

打开demos/react-lifecycle-demo/index.html，按照《操作说明》，完成练习。

React 组件库

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

React-Bootstrap：https://react-bootstrap.github.io/

示例：ReCharts

ReCharts 是一个 React 图表组件库。http://recharts.org/

浏览器打开demos/recharts-demo/index.html，按照《操作说明》，仔细查看源码，体会 JSX 语法对表达复杂组件的优势。

<LineChart width={1000} height={400} data={data}>
  <XAxis dataKey="name"/>
  <YAxis/>
  <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
  <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>

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 没有解决的问题

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

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

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

架构问题

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

MVC
MVVM
Observer
Reactive
...

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

通信问题

组件会发生三种通信。

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

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

状态的同步

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

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

Flux 架构

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

最大特点：数据单向流动。与 MVVM 的数据双向绑定，形成鲜明对比。

Flux 的核心思想

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

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

目前最流行的两个 React 架构

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

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

MobX 架构

MobX 的核心是观察者模式。

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

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

MobX 的最简单例子

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目录

示例：MobX

进入demos/mobx-demo目录，按照《操作说明》，理解 MobX 框架。

UI 层是观察者，Store 是被观察者。

Store 所有的属性，分成两大类：直接被观察的属性和自动计算出来的属性。

class Store {
  @observable name = 'Bartek';
  @computed get decorated() {
    return `${this.name} is awesome!`;
  }
}

UI 会观察到 Store 的变化，自动重新渲染。

Redux 架构

Redux 的核心概念

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

Redux 应用的架构

Redux 层保存所有状态，React 组件拿到状态以后，渲染出 HTML 代码。

示例：Redux

进入demos/redux-demo目录，按照《操作说明》，理解 Redux 框架。

Redux 将组件分成 UI 组件和容器组件两类。
UI 组件是纯组件，不包含 state 和生命周期方法，不涉及组件的行为，只涉及组件的外观。

<div className="index">
  <p>{this.props.text}</p>
  <input
    defaultValue={this.props.name}
    onChange={this.props.onChange}
  />
</div>

容器组件正好相反。

不涉及组件的外观，只涉及组件的行为。
负责订阅 Store，将 Store 的数据处理以后，再通过参数传给 UI 组件。
用户给出配置以后，由 Redux 生成。

// MyComponent 是纯的 UI 组件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

mapStateToProps: 定义 UI 组件参数与 State 之间的映射
mapDispatchToProps：定义 UI 组件与 Action 之间的映射

拆分 UI 组件和容器组件的好处

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

Reducer 函数

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 简介

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

主要用途：

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

npm

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

$ npm -v

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

课堂练习：Node 的简单应用

进入demos/simple-app-demo目录，参考《操作指南》，自己动手在 Node 里面，编写并编译一个前端脚本。

Node 开发前端脚本的好处

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

REST API

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

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

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

REST 的核心概念

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

URL 设计

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

HTTP 动词

操作	SQL方法	HTTP动词
CREATE	INSERT	POST
READ	SELECT	GET
UPDATE	UPDATE	PUT/PATCH
DELETE	DELETE	DELETE

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

课堂练习：REST API

打开demos/rest-api-demo，按照《操作指南》，熟悉 REST API 的基本用法。

Express

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

课堂练习：Express 搭建 Web 应用

进入demos/express-demo目录，按照《操作指南》，学习使用 Express 搭建 Web 应用。

定义一个 Web 应用实例，并且启动它。

var express    = require('express');
var app        = express();

var port = process.env.PORT || 8080;

app.listen(port);
console.log('Magic happens on port ' + port);

定义一个路由

var router = express.Router();

router.get('/', function(req, res) {
  res.send('<h1>Hello World</h1>');
});

app.use('/home', router);

中间件：对 HTTP 请求进行加工。

router.use(function(req, res, next) {
  console.log('There is a requesting.');
  next();
});

前端工程简介

持续集成流程

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

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

持续集成的概念

Continuous integration（简称 CI）：

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

优点

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

ESLint：静态代码检查工具

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

课堂练习：ESLint 的用法

进入demos/eslint-demo目录，按照《操作指南》，完成练习。

为什么写测试？

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

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

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

测试的类型

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

以测试为导向的开发模式

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

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

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

TDD vs. BDD

两者侧重点不一样

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

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

Mocha

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

课堂练习：Mocha 的用法

进入demos/mocha-demo目录，按照《操作指南》，练习写单元测试。

功能测试

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

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

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

前端的功能测试

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

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

Nightmare

使用 Electron 模拟真实浏览器环境
提供大量人性化、易用的 API
官网：nightmarejs.org

示例：Nightmare

打开demos/nightmare-demo/，按照《操作说明》，完成操作。

移动平台的自动化测试

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

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

Appium 测试流程

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

持续集成服务平台

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

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

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

课堂练习：Travis CI

按照《操作说明》，完成练习。

天意pt

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
全栈工程师培训材料

From: https://github.com/ruanyf/jstraining全栈工程师培训材料，帮助学习者掌握全栈开发的基本知识，承担简单 Web 应用的前后端开发。一共四讲，适合两天的训练营，请先阅读《培训准备》。培训时，需要完成课堂练习。第一讲：前端开发的历史和趋势前端开发的历史演变前端 MVC 框架的兴起前后端分离全栈工程师前端开发的未来第二讲
复制链接

扫一扫

专栏目录