前端技术漫谈

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数据，不管是数据的含义、仍是须要的数据种类、数据结构都每每有巨大的改变，因此也一样是须要前端进行修改适配。另外一方面若是存在多个终端的状况下H五、Native、PC端可能须要显示的数据不尽相同，此时须要再各个不一样的前端去作适配。

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

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