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

资源描述

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

1、记一次难忘的前端技术框架切换之旅【WEB前端大作战】【摘要】记一次难忘的前端技术框架切换之旅1旅行之始 2020年初，某个普通的工作日，正在聚精会神“搞事情”的我，接到MAE-Access前端技术专家的espace语音，被告知MAE-Access域使用的前端技术框架需要从AngularJS1.x切换到React，要求2020年底完成。接到消息的我，忧喜交加，机会与挑战并存，这次前端技术框架切换之旅在所难免，但该如何开始，又该如何结束.记一次难忘的前端技术框架切换之旅1旅行之始 2020年初，某个普通的工作日，正在聚精会神“搞事情”的我，接到MAE-Access前端技术专家的espace语音

2、，被告知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微服务提供前端工程化解决方

3、案，各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和前端工程化之前，先简单了

4、解下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、Angul

5、arJS、React、Vue等大量前端框架涌现。 Node带来的全栈时代：随着Node.js的兴起，为前端开发带来一种新的开发模式。纵观5个时代的变迁，每个后时代都在尝试解决前时代的痛点。 1）、时代，前端开发重度依赖开发环境；前后端职责依旧纠缠不清，可维护性越来越差。 2）时代，SPA应用大多以功能交互型为主，存在大量JS代码的组织，与View层的绑定等，都不是容易的事情，需要进行前端负责度控制。 3）、时代，前后端职责清晰；前端开发复杂度可控，通过合理的分层，让项目更可维护；部署相对独立，产品体验可以快速改进。2.1.2React技术框架从Web前端简史来看，React其实是前端为主的

6、MVC、MV*时代的产物，为降低前端开发复杂度而生。 React官方解释React是一个用于构建用户界面的JavaScript库，可以使创建交互式UI变的轻而易举。通过使用React，可以创建拥有各种状态的组件，再由这些组件构成更加复杂的UI，组件逻辑使用javascript编写而非模板(此处不同于JSP、PHP)，可以轻松地在应用中传递数据，使得状态与DOM分离。 FMA废除原本jQuery+AngularJs1.x混搭的多页面iframe嵌套实现，进行React技术框架的切换，重新划分并组织各个UI组件为SAP，需要对整个前端进行“换血”式重写。2.1.3前端工程化为了高效高质量完成We

7、b应用的迭代上线，出现了前端工程化解决方案及相关架构如图2-1所示。图2-2前端工程化架构工程化解决的问题是，如何提高编码、测试、维护阶段的生产效率。前端工程化要解决的问题包括： 1）制定各项规范，让工作有章可循：编码规范统一、开发流程规范、前后端接口规范等。 2）使用合适的前端技术和框架，提高生产效率：采用模块化的方式组织代码(ES6 Module)；采用组件化的编程思想，处理UI层（React）；将数据层分离管理（Redux）；使用面向对象或者函数编程的方式组织架构。 3）提高代码的可测试性，引入单元测试，提高代码质量。 4）通过使用各种自动化的工程工具(Gulp/Webpack)，提升

8、整个开发、部署效率。 FMA进行React技术框架切换的同时，引入业界流行的前端工程化解决方案，以组件化、模块化、自动化、规范化等手段，提升开发及维护效率。综上所述，分析此次前端技术框架切换将发生的变化，从+混搭到+相结合，再加上集成组件/模块的编译构建、规范检查、自动化持续集成、部署为一体的前端工程，实则是整个产品软件工程技术的转变与提升。2.2 游玩路线技术框架切换关键步骤2.2.1React项目工程搭建 1）React项目工程搭建：React官网提供了一套创建React项目的脚手架工程Create React App，可以快速创建出一个新的单页面的、且已经集成好标准前端构建流水线的Re

9、act项目工程（可通过修改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

10、)，直接启动（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入口，此处可用

展开阅读全文