关于前端:耗时1年的前端技术框架切换之旅

摘要： 一个电话，我便开启了为期 1 年的前端技术框架切换之旅。

本文分享自华为云社区《记一次难忘的前端技术框架切换之旅【WEB 前端大作战】》，原文作者：一颗白菜。

2020 年初，某个一般的工作日，正在目不转睛“搞事件”的我，接到 MAE-Access 前端技术专家的 espace 语音，被告知 MAE-Access 域应用的前端技术框架须要从 AngularJS1.x 切换到 React，要求 2020 年底实现。接到音讯的我，忧喜交加，机会与挑战并存，这次前端技术框架切换之旅在劫难逃，但该如何开始，又该如何完结。

问：MAE-Access 切换前端技术框架，基站产品三部的 FMA LTE，为何也“在劫难逃”？

起因大体能够总结为以下三点，图示如图 1 -1：

1）FMA LTE 以 FMA LTE Website 和 FMA LTE Service 两个微服务，集成在 MAE-Access 上，与整个 MAE-Access 域对立构建。

2）MAE-Access 域对立为各 Website 微服务提供前端工程化解决方案，各 Website 微服务对立应用 Cloudsop 平台自研的前端 UI 组件 —eview。一方面对立网管各 UI 界面风格；另一方面不便对立治理前端相干的开源及三方件，同时也便于对立构建。

3））Cloudsop 提供的 eview 组件，有基于 angularJs 前端开源框架和 react 前端开源框架两个版本的。angularJs 版的 eview 因应用 angularJs1.X，21B 后便不再满足开源三方件生命周期治理要求，须要对立切换为 react 版的 eview。

图 1 -1 前端技术框架切换起因

正式介绍 React 和前端工程化之前，先简略理解下 Web 前端发展史。如图 2 - 1 所示，Web 前端倒退次要经验 5 个要害时代。

图 2 -1 Web 前端倒退简史

① 简略明快的晚期时代：适宜小我的项目，不分前后端，页面由 JSP、PHP 等在服务端生成，浏览器负责展示。

② 后端为主的 MVC 时代：为了升高复杂度，当前端为出发点，有了 Web Server 层的架构降级，比方 Structs、Spring MVC 等。

③ Ajax 带来的 SPA 时代：2005 年 Ajax 正式提出，前端开发进入 SPA（Single Page Application 单页面利用）时代。

④ 前端为主的 MVC、MV* 时代：为了升高前端开发复杂度，Backbone、EmberJS、KnockoutJS、AngularJS、React、Vue 等大量前端框架涌现。

⑤ Node 带来的全栈时代：随着 Node.js 的衰亡，为前端开发带来一种新的开发模式。

纵观 5 个时代的变迁，每个后时代都在尝试解决前时代的痛点。

1）①、②时代，前端开发重度依赖开发环境；前后端职责仍旧纠缠不清，可维护性越来越差。

2）③时代，SPA 利用大多以性能交互型为主，存在大量 JS 代码的组织，与 View 层的绑定等，都不是容易的事件，须要进行前端负责度管制。

3）④、⑤时代，前后端职责清晰；前端开发复杂度可控，通过正当的分层，让我的项目更可保护；部署绝对独立，产品体验能够疾速改良。

从 Web 前端简史来看，React 其实是前端为主的 MVC、MV* 时代的产物，为升高前端开发复杂度而生。

React 官网解释 React 是一个用于构建用户界面的 JavaScript 库，能够使创立交互式 UI 变的轻而易举。通过应用 React，能够创立领有各种状态的组件，再由这些组件形成更加简单的 UI，组件逻辑应用 javascript 编写而非模板 (此处不同于 JSP、PHP)，能够轻松地在利用中传递数据，使得状态与 DOM 拆散。

FMA 破除本来 jQuery+AngularJs1.x 混搭的多页面 iframe 嵌套实现，进行 React 技术框架的切换，从新划分并组织各个 UI 组件为 SAP，须要对整个前端进行“换血”式重写。

为了高效高质量实现 Web 利用的迭代上线，呈现了前端工程化解决方案及相干架构如图 2 - 1 所示。

图 2 -2 前端工程化架构

工程化解决的问题是，如何进步编码、测试、维护阶段的生产效率。前端工程化要解决的问题包含：

1）制订各项标准，让工作有章可循：编码标准对立、开发流程标准、前后端接口标准等。

2）应用适合的前端技术和框架，进步生产效率：采纳模块化的形式组织代码 (ES6 Module)；采纳组件化的编程思维，解决 UI 层（React）；将数据层拆散治理（Redux）；应用面向对象或者函数编程的形式组织架构。

3）进步代码的可测试性，引入单元测试，进步代码品质。

4）通过应用各种自动化的工程工具 (Gulp/Webpack)，晋升整个开发、部署效率。

FMA 进行 React 技术框架切换的同时，引入业界风行的前端工程化解决方案，以组件化、模块化、自动化、规范化等伎俩，晋升开发及保护效率。

综上所述，剖析此次前端技术框架切换将产生的变动，从③+④混搭到④+⑤相结合，再加上集成组件 / 模块的编译构建、标准查看、自动化继续集成、部署为一体的前端工程，实则是整个产品软件工程技术的转变与晋升。

玩耍路线—技术框架切换关键步骤

1）React 我的项目工程搭建：React 官网提供了一套创立 React 我的项目的脚手架工程 Create React App，能够疾速创立出一个新的单页面的、且曾经集成好规范前端构建流水线的 React 我的项目工程（可通过批改 webpack 等构建工具的参数配置，自定义打包、构建、调试工程）。

（1）先要装置 Nodejs（一个 javascript 运行环境），上官网下载不同操作系统的版本，一键式装置即可。

（2）再通过 Nodejs 的包管理器工具 npm，装置 create-react-app 脚手架工具（npm install -g create-react-app）

（3）在须要创立我的项目的地位关上命令行，输出 create-react-app + 项目名称的命令（create-react-app myProject），进行我的项目创立。

（4）至此，我的项目曾经创立胜利，能够进入我的项目 (cd myproject)，间接启动（npm start）。如果须要构建出包，则执行（npm build）。须要留神的是，npm 脚本在创立好的我的项目的 packge.json 文件 script 中能够自行进行批改或扩大。

业界比拟支流的绝对通用的目录构造如下表所示。具体业务开发时，需依照下述构造进行业务自身的目录及文件划分，基本上自定义 components 及 contaniners 以下的目录，进行组件划分即可。

|   index.js // 入口 js
|   router.js // 路由入口
|   base.css // 全局款式文件
+---store  //redux
|   |    store.js // redux store 入口，此处可用以注册中间件
|   |    reducers.js // reducers 入口
+---services  // 数据拜访（通常为 api）各域按需应用，不做对立要求
+---contexts    //contexts
+---utils   // 公⽤用⽅办法逻辑  
+---assets  // 资源文件
|   +---i18n  // 多语言
|        images  // 图片
|        fonts   // 字体资源
|        media    // 媒体资源
+---constants  // 专用常量（通常为后端各种枚举）+---components // 通用展现组件目录
|   +---Header
|   |       index.js
|   |       Header.less
|   \---NotFound
|           index.js
\---containers // 容器组件目录
|   +---Todo // 申明页面的目录
|   |       |---index.js // 页面入口
|   |       +---components // 页面通用组件
|   |       |   +---Button
|   |       |           index.js
|   |       |           Button.jsx // 举荐用法
|   |       |           Button.less
|   |       |           Button.stories.js
|   |       |   +---Input
|   |       |           index.js
|   |       |           Input.jsx
|   |       |           Input.less
|   |       |           Input.stories.js
|   |       +---containers
|   |       |       Search.js
|   |       |       Body.js
|   |       +---store
|   |              types.js
|   |               action.js
|   |                  reducer.js
 \---test // 测试目录  和 src 目录的后果保持一致
     +---components // 通用展现组件目录
     |   +---Header
     |   |       index.spec.js // 对 index.js 的测试文件
     \---containers
         +---Todo 
         |       +---components
         |       |   +---Button
         |       |           Button.spec.js // 对 Button.jsx 的测试文件
         |       |   +---Input
         |       |           Input.spec.js // 对 Input.jsx 的测试文件
         |       +---store
         |               reducer.spec.js // 对 reducer.js 的测试文件

1）组件划分准则

（1）规范性：任何一个组件都应该恪守一套规范，能够使得不同区域的开发人员据此规范开发出一套规范对立的组件

（2）独立性：形容了组件的细粒度，遵循繁多职责准则，放弃组件的纯正性，属性配置等 API 对外开放，组件外部状态对外关闭，尽可能的少与业务耦合。

（3）复用与易用：UI 差别，消化在组件外部（留神并不是写一堆 if/else），输入输出敌对，易用。防止裸露组件外部实现，防止间接操作 DOM，防止应用 ref。

2）组件分类及档次关系

（1）根底组件：为了更关注业务逻辑的实现，能够联合本身业务，抉择适宜的成熟的 UI 组件库，作为整个我的项目的根底组件库。如，FMA 抉择了平台提供的 eview UI 组件。

（2）容器型组件（Container）：一个容器性质组件，个别作为一个业务子模块的入口，如 FMA 的故障总览组件；容器组件内的子组件通常具备业务或数据依赖关系；集中 / 对立进行状态治理，向其余展现型 / 容器型组件提供数据（充当数据源）和行为逻辑解决（接管回调）；如果应用了全局状态治理，那么容器外部的业务组件能够自行调用全局状态解决业务；充当子级组件通信的状态中转站，进行业务模块内子组件的通信兼顾，如故障总览组件，保留总览剖析的接口响应数据向子组件传递，同时也会保留子组件以后的交互状态，已协调与其它子组件之间的交互联动；模版根本都是子级组件的汇合，很少蕴含 DOM 标签。

（3）展现型组件（stateless）：次要体现为组件是怎么渲染的，就像一个简略的模版渲染过程；只通过 props 承受数据和回调函数，不充当数据源；可能蕴含展现和容器组件并且个别会有 Dom 标签和 css 款式；通常用 props.children(react) 或者 slot(vue) 来蕴含其余组件；能够有状态，只在其生命周期内操纵并扭转其外部状态，职责繁多，将不属于本人的行为通过回调传递进来，让父级组件去解决。

（4）业务组件：通常是依据最小业务状态形象而出，有些业务组件也具备肯定的复用性，但大多数是一次性组件。

（5）通用组件：能够在一个或多个 APP 内通用的组件。

（6）逻辑组件：不蕴含 UI 层的某个性能的逻辑汇合，比方 FMA 中的工夫解决组件、字符串解决组件等。

（7）高阶组件（HOC）：类比函数式编程中的组合，能够看做一个接管其它组件作为参数，并返回一个性能加强的组件的函数。如 FMA 中的 ErrorBoundry 组件。

（8）少数 Web 利用的组件档次关系，如下图所示的树状关系。

3）FMA 组件划分

通常可依据业务进行划分，或依据技术进行划分。FMA 依据业务设计并开发利用中的组件树。

（1）切割模版（页面构造模块化）：主界面为入口容器组件；其次，分左右两个面板容器组件；左面板依据业务性能，分为主 topo 业务组件和自定义 topo 业务组件；右面板依据业务性能，分为故障总览、疾速故障匹配等业务组件。以此类推，从外到内、从大到小、分层进行组件划分，如下图所示。

（2）设计并开发通用业务组件，或根底组件，使得组件尽可能复用，如 FMA 特有的表格组件、画图组件等。

（3）明确各个组件的边界，外部 state 的设计，props 的设计以及与其余组件的关系

（4）明确各个组件的定位与职能划分，设计好父子组件、兄弟组件的通信机制

（5）搭架子，并开始填充

理解了前端发展史、搭建好了 React 我的项目工程、划分好了组件，那么如何写一个 React 的组件？

首先，对于单个组件来说，规范的组件目录要有，但可通过组件分类进行目录裁剪。创立一个组件，须要建一个独自的文件夹。文件夹通常蕴含主文件入口 index.js(视图层的逻辑)；款式采纳的是 scss 或 less css 预编译语言，写在 module.scss/module.less 中，webpack 会主动把 scss 或 less 编译成 css 文件，并且会解决掉浏览器兼用的差别；常量的定义为 type.js；逻辑解决调用接口函数写在 actions.js 中；如果须要应用 redux, 定义在 reducers.js 文件中；如果该组件蕴含其它业务组件，可间接嵌套一个新的组件文件夹。如，上面的辅助复原业务组件目录。

Line 01：import React, {Component} from 'react';
Line 02：import Spinner from '@huawei/eview-react/Spinner';
Line 03：import {injectIntl} from 'react-intl';
Line 04：import './module.css';
Line 05：import {getTotalPrice} from './actions'

Line 06：class LeftPanel extends Component {Line 07：constructor(props) {Line 08：super(props);
Line 09：this.state = {
Line 10：message: '',
Line 11：totalPrice: 0,
Line 12：appleNumber: 0
Line 13：}
Line 14：this.applePrice = 2;
Line 15：}

Line 16：componentWillMount() {Line 17：this.setState({message: '右边组件初始化实现！'});
Line 18：}

Line 19：getDom = (dom) => {Line 20：}

Line 21：onBuyApple = (value) => {Line 22：const totalPrice = getTotalPrice(value, this.applePrice);
Line 23：this.setState({appleNumber: value, totalPrice});
Line 24：}

Line 25：render() {
Line 26：return (Line 27：<div className={"ev_layout_fix left-panel"} ref={this.getDom}>
Line 28：<p>{this.state.message}</p>
Line 29：<p> 苹果的单价:{this.applePrice}￥</p>
Line 30：<p> 购买的苹果的数量:<Spinner
Line 31：value={this.state.appleNumber}
Line 32：min={0}
Line 33：max={100}
Line 34：step={1}
Line 35：onChange={this.onBuyApple}/></p>
Line 36：<p> 共花去：{this.state.totalPrice}￥
Line 37：</p>
Line 38：</div>
Line 39：)
Line 40：}
Line 41：}

1）line01-05 引入 react 库：import React, {Component} from ‘react’; 包含引入的须要的第三方的组件，本人定义的组件、函数、常量、css 文件、图片等动态资源文件等。

2）line06-41 进行组件类申明实现：javascript 其实是没有类的概念的，es6 的 class 其实是一种语法糖，实质是构造函数 Function。Constructor 能够省略，不写也会默认存在，倡议在有状态组件下中增加，而后在 Constructor 做初始化的性能。

3）line25-40 render 函数相当于咱们 angularjs 中的 template, 用来渲染到浏览器下面的视图。须要留神的是，这里应用的是 React jsx 语法，款式定义应用 className 属性而非 class，style 的定义格局为 style={{marginLeft:’2rem’}}，最终 return 的元素有且仅有一个 Element。

4）view 层变量的定义与更新是固定的。分为主动触发视图层更新和不触发视图层更新两种。主动触发视图层更新相干的 state 变量，初始化定义如 line09-13，state 变量从新赋值如 line17，必须应用 setState 函数。其余不触发视图层更新的变量间接定义即可。

5）react 提供了组件在进行初始加载，参数变更，登记等动作时的钩子函数（亦称生命周期函数），相似 angularjs 中的 $onInit、$onChange、$postLink。其中，componentWillMount 办法在 mounting 和 render() 之前调用，因而在此办法中 setState 不会触发从新渲染，所以能够在这个周期应用 setState 来更改 state 值；componentWillReceiveProps 办法在一个 mounted 的组件接管到并赋值新 props 前被调用，如果咱们须要通过 prop 来更新 state，能够在此办法中比拟 this.props 和 nextProps 不相等时，再应用 this.setState 来更改 state，以此缩小组件的不必要渲染次数，达到性能优化的目标。

6）图片等动态资源的援用和组件的援用是一样的，通过 import 关键字进行导入，通过属性变量进行援用。如 Import iconImg from‘图片门路’；<img src={iconImg} alt=””/>。图片资源倡议间接寄存到以后的组件目录上面，防止援用目录太深。

1）应用第三方插件 react-intl

2）资源配置：创立 i18n 目录，配置国际化资源文件。

3）资源初始化与利用：在我的项目入口的 index.js 文件中引入 import {injectIntl} from ‘react-intl’; 在 render 中增加 <IntlProvider locale={lang.locale} messages={lang.messages}> </IntlProvider>。Locale 采纳的是语言，messages，须要国际化的语言配置。

Line 01：import {lang, messages} from './asserts/i18n/index';
Line 02：import App from './containers/MainContainer';
Line 03：const rootNode = document.getElementById('root');
Line 04：ReactDOM.render(Line 05：<IntlProvider locale={ lang.locale} messages={lang.messages}>
Line 06：<Provider store={store}>
Line 07：<div style={{ height: '100%', width: '100%'
Line 08：<App />
Line 09：</div>
Line 10：</Provider>
Line 11：</IntlProvider>,
Line 12：rootNode
Line 13：);
4）导出国际化组件 export default injectIntl(组件名);
5）在组件的具体函数中，应用国际化资源项如 line01-02
Line 01：const {intl} = this.props;
Line 12：const loadingWaitLabel = intl.formatMessage({id: 'loadingWait'})

后盾数据申请应用第三方组件 axios（一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中）。

1）axios 个性：从浏览器中创立 XMLHttpRequests；从 node.js 创立 http 申请；反对 Promise API；拦挡申请和响应；转换申请数据和响应数据；勾销申请；主动转换 JSON 数据；客户端反对进攻 XSRF。

2）axios 申请实例：

（1）get

// 为给定 ID 的 user 创立申请
axios.get('/user?ID=12345')
  .then(function (response) {console.log(response);
  })
  .catch(function (error) {console.log(error);
  });

（2）Post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {console.log(response);
  })
  .catch(function (error) {console.log(error);
  });

（3）执行多个并发申请

function getUserAccount() {return axios.get('/user/12345');
}

function getUserPermissions() {return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {// 两个申请当初都执行实现}));

Redux 的作用就是为了解决平行组件，或者没有父子关系组件的之间的通信。因而，当两个组件无奈通过状态晋升，将通信音讯通过父组件进行直达时，就须要应用 Redux 技术进行音讯通信。

1）定义 store 文件并进行 store 树挂接。

import {combineReducers} from 'redux';
import {routerReducer} from 'react-router-redux';
import leftPanelReducer from './containers/Home/LeftPanelContainer/reducers';

export default combineReducers({router: routerReducer, leftPanel: leftPanelReducer});

2）利用入口 index.js 全局 store 上下文配置，<Provider store={store}></Provider>

3）leftPanelReducer.js 定义：types.js+reducers.js+actions.js

（1）types.js

const ACTION_TYPE = {SET_CAT_NAME: 'SET_CAT_NAME'};

export {ACTION_TYPE};

（2）Reducers.js

import {ACTION_TYPE} from './types';
const initState = {catName:“ketty”}
};
export default (state = initState, action) => {switch (action.type) {
        case ACTION_TYPE.SET_CAT_NAME: {
            return {
                ...state,
                catName: action.data
            };
        }
        default: {return state;}
    }
};

（3）actions.js

import {ACTION_TYPE} from './types';
export const setCatName= catName => dispatch => {
    dispatch({
        type: ACTION_TYPE.SET_CAT_NAME,
        data: catName
    });
};

4）应用 redux 传递全局数据，告诉所有接管方全局数据的更新

（1）首先在传递数据组件中引入 redux 相干组件，及批改全局数据的函数 setCatName

import {combineReducers} from 'redux';
import {connect} from 'react-redux';
import {setCatName} from './actions;

（2）导出组件时，应用 connect 中间件进行组件属性和全局 store 关联，此时 setCatName 函数相当于挂在 this.props 上，应用时间接调用 this.props.setCatName (name)，进行全局数据的批改更新，告诉动作则由整个 Redux 机制执行。

const mapDispatchToProps = dispatch => bindActionCreators({setCatName}, dispatch);

export default connect(null, mapDispatchToProps)(injectIntl(LeftPanel))

5）应用 redux 监听全局数据的更新，承受最新值，相似于数据传递。

（1）首先在组件中引入 redux 相干组件，

import {combineReducers} from 'redux';
import {connect} from 'react-redux';

（2）导出组件时，应用 connect 中间件进行组件属性和全局 store 关联，此时全局数据 catName 挂在了 this.props 上，应用时间接调用 this.props.catName，数据的及时性由整个 Redux 机制保障。


const mapStateToProps = state => ({catName: state.leftPanel.catName});
export default connect(mapStateToProps)(injectIntl(LeftPanel))

1）AngularJs(不满足生命周期治理要求)/ jQuery 框架混搭；

2）在线剖析模式和导出报告离线剖析模式源码分居两个代码仓；

3）多个功能模块 400+ 函数小函数堆积成“上帝类”，代码反复率 44%，雷同业务逻辑的减少、删除、批改等扩大保护工作，存在重复劳动、批改脱漏引入缺点等问题。

在切换前端技术框架（React、单页面、UI 组件化）的背景下，进行以下几点重构，在线导出源码共仓、雷同业务性能共用业务组件，代码反复率从 44% 升高到 4.8%，缩小反复代码 1W+。

1) 利用“MVC 分层准则”，将数据封装保留（model）、业务逻辑（controller）、界面显示（controller）进行开发视图分层归类，如图 2 - 1 所示；

2) 利用“繁多职责准则”以及“起码晓得”准则，对“上帝类”进行梳理拆分，将平铺沉积的性能函数，按性能职责，抽取封装成一个个高内聚低耦合的可插拔的组件类。同时依照组件性能，进一步分组归类为偏底层的根底组件、偏下层的业务组件、以及用来进行数据处理的工具组件。下层业务组件可按需“组合”应用其余业务组件或根底组件。在线剖析和导出报告组件，同理按需组合应用各业务组件或根底组件，如图 2 -1、2- 2 所示。

图 2 -1 开发视图分层

图 2 -2 组件划分

3）为使导出和在线最大限度地通用业务组件，对起源不同、数据结构不同的数据，传入业务组件前进行数据标准化、归一化。

图 2 -3 组件数据标准化、归一化

本次前端技术框架切换，事务自身比拟被动，好在可能被动辨认交付难点。提前梳理工作量，被动治理切换过程。最终，及时、无效、高质量实现交付，确保 FMA 前端开源组件满足生命周期治理要求的同时，晋升 FMA 组前端软件技术，从无到有建设 FMA 前端工程化能力。

1）联合交互界面框图，将功能模块的业务逻辑及交互界面，进行组件化封装后，在线和导出剖析模式可高度通用业务组件，不再须要同时对两套代码，进行雷同或类似性能点的开发保护，防止反复“造轮子”，进步开发效率，晋升可维护性、易维护性，同时，防止因代码批改漏合，引入性能缺点。

2）业务组件的设计开发，可高度内聚，使其性能繁多，易保护。且多人协同开发同一功能模块时，可按小粒度的 UI 组件进行工作划分，并行开发，源码上库也不易造成抵触，进步开发品质及效率。

https://juejin.cn/post/684490…
https://zhuanlan.zhihu.com/p/…
https://segmentfault.com/a/11…

点击关注，第一工夫理解华为云陈腐技术~

关于前端:耗时1年的前端技术框架切换之旅

一、旅行之始

二、旅行攻略

2.1 目的地—React 技术框架及前端工程化

2.1.1Web 前端倒退简史

2.1.2React 技术框架

2.1.3 前端工程化

2.2 玩耍路线—技术框架切换关键步骤

2.2.1React 我的项目工程搭建

2.2.2 开发视图设计及组件目录布局

2.2.3 前端组件梳理划分

三、不一样的风光

3.1 单个组件目录

3.2 组件主文件 index.js 的根本构造

3.3 组件国际化

3.4 后盾数据申请

3.5 Redux 应用

3.5.1 什么时候 Redux

3.5.2 Redux 配置应用

四、达到起点后的意外播种

4.1 历史债权

4.2 无债一身轻

五、后记

参考链接