前端技术框架切换之旅-WEB前端大作战

1、记一次难忘的前端技术框架切换之旅【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 W

2、ebsite和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.1Web前端发展简史 正式介绍React和前端工程化之前，先简单了解下Web前端发展史。如图2-1所示，Web前端发展主要经历5个关键时代。图2-1 Web前端发展简史 简单明快的早期时代：适合小项目，不分前后端，页面由JSP、PHP等在服务端生成，浏览器负责展现。

3、 后端为主的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.2React技术框架 从Web前端简史来看，React其实是前端为主的

4、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层（Reac

5、t）；将数据层分离管理（Redux）；使用面向对象或者函数编程的方式组织架构。 3）提高代码的可测试性，引入单元测试，提高代码质量。 4）通过使用各种自动化的工程工具(Gulp/Webpack)，提升整个开发、部署效率。 FMA进行React技术框架切换的同时，引入业界流行的前端工程化解决方案，以组件化、模块化、自动化、规范化等手段，提升开发及维护效率。 综上所述，分析此次前端技术框架切换将发生的变化，从+混搭到+相结合，再加上集成组件/模块的编译构建、规范检查、自动化持续集成、部署为一体的前端工程，实则是整个产品软件工程技术的转变与提升。2.2 游玩路线技术框架切换关键步骤2.2.1React项目工程搭建 1）React项目工程搭建：React官网提供了一套创建React项目的脚手架工程Create React App，可以快速创建出一个新的单页面的、且已经集成好标准前端构建流水线的React项目工程（可通过修改webpack等构建工具的参数配置，自定义打包、构建、调试工程）。 （1）先要安装Nodejs（一个javascript运行环境），上官网下载不同操作系统的版本，一键式安装即

6、可。 （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入口，此处可用

7、以注册中间件|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

《前端技术框架切换之旅-WEB前端大作战》由会员ji****81分享，可在线阅读，更多相关《前端技术框架切换之旅-WEB前端大作战》请在金锄头文库上搜索。