前端技術漫談

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層來適配不一樣前端須要的個性化數據，並能夠針對一些熱點數據進行緩存的操做來提升整個後端的吞吐率。