前端技术框架切换之旅-WEB前端大作战
记一次难忘的前端技术框架切换之旅【WEB前端大作战】 【摘要】 记一次难忘的前端技术框架切换之旅1 旅行之始 2020年初，某个普通的工作日，正在聚精会神“搞事情”的我，接到MAE-Access前端技术专家的espace语音，被告知MAE-Access域使用的前端技术框架需要从AngularJS1.x切换到React，要求2020年底完成。接到消息的我，忧喜交加，机会与挑战并存，这次前端技术框架切换之旅在所难免，但该如何开始，又该如何结束.记一次难忘的前端技术框架切换之旅1 旅行之始 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 前端技术框架切换原因2 旅行攻略2.1 目的地React技术框架及前端工程化2.1.1 Web前端发展简史 正式介绍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）、时代，前后端职责清晰；前端开发复杂度可控，通过合理的分层，让项目更可维护；部署相对独立，产品体验可以快速改进。2.1.2 React技术框架 从Web前端简史来看，React其实是前端为主的MVC、MV* 时代的产物，为降低前端开发复杂度而生。 React官方解释React是一个用于构建用户界面的JavaScript库，可以使创建交互式UI变的轻而易举。通过使用React，可以创建拥有各种状态的组件，再由这些组件构成更加复杂的UI，组件逻辑使用javascript编写而非模板(此处不同于JSP、PHP)，可以轻松地在应用中传递数据，使得状态与DOM分离。 FMA废除原本jQuery+AngularJs1.x混搭的多页面iframe嵌套实现，进行React技术框架的切换，重新划分并组织各个UI组件为SAP，需要对整个前端进行“换血”式重写。2.1.3 前端工程化 为了高效高质量完成Web应用的迭代上线，出现了前端工程化解决方案及相关架构如图2-1所示。图2-2 前端工程化架构 工程化解决的问题是，如何提高编码、测试、维护阶段的生产效率。前端工程化要解决的问题包括： 1）制定各项规范，让工作有章可循：编码规范统一、开发流程规范、前后端接口规范等。 2）使用合适的前端技术和框架，提高生产效率：采用模块化的方式组织代码(ES6 Module)；采用组件化的编程思想，处理UI层（React）；将数据层分离管理（Redux）；使用面向对象或者函数编程的方式组织架构。 3）提高代码的可测试性，引入单元测试，提高代码质量。 4）通过使用各种自动化的工程工具(Gulp/Webpack)，提升整个开发、部署效率。 FMA进行React技术框架切换的同时，引入业界流行的前端工程化解决方案，以组件化、模块化、自动化、规范化等手段，提升开发及维护效率。 综上所述，分析此次前端技术框架切换将发生的变化，从+混搭到+相结合，再加上集成组件/模块的编译构建、规范检查、自动化持续集成、部署为一体的前端工程，实则是整个产品软件工程技术的转变与提升。2.2 游玩路线技术框架切换关键步骤2.2.1 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中可以自行进行修改或扩展。2.2.2 开发视图设计及组件目录规划 业界比较主流的相对通用的目录结构如下表所示。具体业务开发时，需按照下述结构进行业务本身的目录及文件划分，基本上自定义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
