前端技术漫谈

0x01 前言

擅长于Java后台开发，来前端探探路。
软件开发大体上可以分为前端、客户端、后端，这三大类。本片主要带大家来初探下前端一些相关的技术，主要围绕一直争论不断的React（因为还有很多人会认为angular、vue会是比React更好的前端开发技术）。

本篇主要漫谈的React体系技术有：redux + react-router + redux-saga + g2 + antd

0x02 React

React是什么？

React是DOM的一个抽象层，其并不是一个web应用的完整解决方案。

其实React直白的理解就是一个js库，它通过组件的方式将js、css、html封装形成一个最小单元--组件。这个库能够操作html（jsx）、css（css in js，只是目前的js操作css还在pk中未有一个胜出的解决方案）。问题来了，浏览器只能识别原生的js+css+html，React如何被浏览器解析并执行呢？

1. 后端打包工具对React语法进行翻译成js文件，浏览器直接加载js文件。

2. 浏览器中引入React语法解析器，目前比较不错的有babel。但是一般不推荐这么用，前端渲染有点重、影响用户体验。

React优点

React采用虚拟节点->真实DOM节点的映射，根据diff算法来进行局部组件的更新操作（最小力度组件），极大的优化了前端显示渲染的时间复杂度。
React是如何感知到组件需要进行更新操作的，其每个组件内部都维护着一个组件状态参数（state），state的变化会直接渲染（render）给用户。
涉及到组件，对应一个前端应用来说肯定会存在非常多的组件，React在组件之间通过props来进行传参操作。

0x03 redux

在React小结介绍过其不是一个web应用的完整解决方案，如果你的前端流足够复杂，这个时候就可能会要redux登场了。
这里要怎么开始介绍呢？redux可以简单理解为一个框架将React组件的状态（state）变化进行规范化，只要按照这个规范化进行开发框架帮你进行了复制的数据流的控制。比如：sping帮你管理好了bean的生命周期一样，屏蔽掉了bean的管理操作，而给使用者提供了方便的接口扩展来实现个性化。

redux对react组件state change管理工作流。

下面我们根据这个工作流、redux api来构建一个demo。

import React, {Component} from 'react';
import ReactDOM, {render} from 'react-dom'
import { applyMiddleware, createStore } from 'redux';
import {createLogger} from 'redux-logger';

class Counter extends Component{
    render() {
        return (
            <div>
                <h1>{this.props.value}</h1>
                <button onClick={this.props.onIncrement}>+</button>
                <button onClick={this.props.onDecrement}>-</button>
            </div>
        )
    }
};

const reducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
};

const logger = createLogger();

const store = createStore(reducer, applyMiddleware(logger));


const renders = () => {
    render(
        <Counter
            value={store.getState()}
            onIncrement={() => store.dispatch({type: 'INCREMENT'})}
            onDecrement={() => store.dispatch({type: 'DECREMENT'})}
        />,
        document.getElementById('root')
    );
};

renders();
store.subscribe(renders);

0x04 redux-saga

上面的demo可以看到都是通过view发起action就直接更改了state，但是在现实场景中会出现很多需要进行异步处理的情况，如：页面对大数据量的请求，不能因为一次请求就将整个页面都阻塞到等到所有response，redux既然是给复杂应用提供基础的框架能力，这种情形肯定也有自己的解决方案，redux-saga是一个异步处理包，针对异步处理逻辑见下图。

0x05 react相关技术

react-router：这个包主要是根据用户的请求不同去映射渲染不同的component。
react-rudex：为React封装的rudex专用库，换了一种方式针对React实现了redux的工作流专用库，作用主要涉及开发更加规范标准化，复制项目之间的合作效率等。
antd：蚂蚁金服通过React封装的前端组件库。
g2：由纯 JavaScript 编写、强大的语义化图表生成工具。

蚂蚁金服开源的前端开发框架 dva = redux + react-router + redux-saga

0x06 web应用构建

一般说到web应用的构建，大家应该都会想到MVC的开发模式。

controller、model都是构建在服务端。view的实现存在多种实现方案：

view如果是通过模板引擎来时实现（如velocity等），这种前后端的开发对于开发前后端开发工程师之间的协作非常不便，如后端的model的任意修改都可能会要求前端工程师去修改他的view模板文件。最终由服务端调用模板引擎去解析模板文件渲染出html文件给到浏览器和用户进行交互。

view通过restApi的方式来和后端交互，拿到数据后由前端自己去解析渲染，这种实现方式确实做到了前后端工程师都各尽其责，对于api接口的返回类型是来自于领域建模，而前端作为数据的消费者，所想要的数据其实是 ui数据，无论是数据的含义、还是需要的数据种类、数据结构都往往有巨大的改变，所以也同样是需要前端进行修改适配。另一方面如果存在多个终端的情况下H5、Native、PC端可能需要显示的数据不尽相同，此时需要再各个不同的前端去做适配。

针对上面提到的传统的MVC方案在构建web应用的一些缺陷，提出了BFF（backend for frontend）的概念来完全解耦掉前后端的联系。

web server层提供通用数据结构，而不干涉过多的前端业务逻辑的筛选数据的逻辑，Js server作为BFF层来适配不同前端需要的个性化数据，并可以针对一些热点数据进行缓存的操作来提高整个后端的吞吐率。