前端案例代码_Firefly Apollo前端应用开发框架 2019成长记

最新推荐文章于 2024-07-03 17:16:22 发布

weixin_39649614

最新推荐文章于 2024-07-03 17:16:22 发布

阅读量659

点赞数 1

文章标签：前端案例代码

本文链接：https://blog.csdn.net/weixin_39649614/article/details/111374080

版权

Firefly Apollo前端应用开发框架在2019年有新的成长啦~

2019年的成长主要体现在新开发框架、开发流程优化、现有工具升级这三个方面：在新开发框架方面，推出了Apollo小程序开发框架和Apollo微前端框架。 Apollo 小程序开发框架是采用React语法进行开发的跨H5、微信小程序、民生小程序平台前端框架，并在内部集成了Apollo 2.0数据流管理。在其跨平台能力的支持下，多端Web开发效率能够提升 1至5倍； Apollo 微前端框架是采用微服务的思想，支持大型前端项目微服务化的开发框架，对比传统架构，该框架显著提升了多技术栈并行、模块独立开发部署、代码解耦、用户体验等方面能力。

在开发流程优化方面，推出了Apollo前端工程化最佳实践。

Apollo前端工程化实践通过引入接口仿真、代码检查、代码格式化、提交检查、公共文件修改告警、Git工作流等一系列自动化工具，同时配合PSET自动化打包构建及发布，完成了前端项目开发规范化、标准化落地。在实际项目中前端异常率下降了 70% ，同时代码提交合并错误率下降 75% 。

在现有工具升级方面，把Apollo和Apollo builder升级到2.0版本。

Apollo 2.0进行了底层重构，独立核心模块apollo-core，对框架使用进行了支持，Apollo builder 2.0版本对Webpack进行了升级，同时改善多进程构建，打包构建速度提升了90%，解决了在citrix环境中前端开发打包调试耗时太长的问题。

如果你的工作也涉及Web前端开发，是个希望使用更好的开发工具，少走弯路的正经人~请一定继续阅读，我们等待大家的建议与反馈，作为我们2020年新的成长指导~

Part 1：新开发框架

Apollo 小程序开发框架

功能和技术介绍

Apollo 小程序开发框架是采用React语法进行开发的跨平台前端框架，并在内部集成了Apollo 2.0数据流管理。该框架支持一套代码同时编译为微信小程序、民生小程序、H5等多个平台的运行时代码。

根据实际生产跨平台项目，小程序平台代码向H5端的转换工作由之前的10人天缩减至2人天，效率提升500%。直销银行员工福利宝项目中，传统开发模式需要14人月，使用框架7人月完成微信小程序和H5两端开发，效率提升100%。

特点

跨平台编译，支持一套代码同时编译为微信小程序、民生小程序、H5等多个平台的运行时代码，大幅降低开发适配多平台成本，支持业务在多渠道的扩展。
集成Apollo数据流管理，将H5端优秀的状态管理方案移植到小程序端。
提供相关开发模板，包含从多个生产项目跨平台开发的最佳实践以及常用跨平台组件，提升开发效率和质量，同时有专人负责长期迭代维护更新该模板。

技术体系

1. 命令行工具ffpd

2. 代码编译工具 - H5编译器，编译插件、编译适配器

3. 微信小程序代码反编译

4. 代码检查工具

5. UI组件库 - ffpd-ui

应用案例

民生手机银行小程序；
信用卡全民生活小程序；
直销银行员工福利宝项目；
彩银通微信小程序；
分销易微信小程序；
车主客群平台微信小程序；

Apollo 微前端框架

功能和技术介绍

Apollo 微前端框架是采用微服务的思想，支持大型前端项目微服务化的开发框架。该框架能够支持各模块采用不同前端技术栈独立开发且独立部署，实现高内聚、低耦合。

大型前端项目使用微前端架构对比传统架构，在多技术栈并行能力、模块独立开发部署能力、代码解耦、用户体验几个方面都有明显提升。

大型项目特点大型项目前端架构演进

大型前端项目使用微前端架构对比传统架构

　多技术栈并行　

使用前：多个系统放到一个仓库管理，需要受限于相同的技术栈，相同的框架版本等。
使用后：微前端主框架不限制接入子应用的技术栈，各个子应用独立管理迭代，技术栈无关，可以使用不同的技术栈(React，Vue)，可以使用不同的框架版本。

　独立开发部署

使用前：多个系统放到一个仓库管理，需要受限于整体的开发、部署流程，不够独立。
使用后：各个子系统仓库独立，支持独立开发、集成测试，支持增量升级，独立部署。

　代码解耦　

使用前：多个系统放到一个仓库管理，仓库庞大，逻辑复杂，增加维护的复杂度。
使用后：各个子系统仓库独立，代码解耦，逻辑更简洁独立，更易于维护。

　用户体验提升　

使用前：各个系统形式上相互关联，实际相互割裂，用户访问需要切换独立域名，访问指定的系统，有一种跳出感，没有整体感。
使用后：各个系统通过 SPA 单页应用的方式切换，在同一个域名下访问，场景切换更加平滑，没有跳出感，各种系统的整体感更强。

技术体系

mskj-mfe

提供核心的微应用注册、启动方法，设置路由规则方法。

single-spa-apolloapollo

应用的 single-spa 适配器。

mskj-mfe-cli

提供初始化 portal，初始化微前端配置、微前端入口的工具。

应用案例

APaaS应用云平台
PSET软件工程支撑平台

Part 2：开发流程优化

Apollo 前端工程化最佳实践

功能和技术介绍

为了进一步解决前端项目可维护性、提高项目开发质量、降低生产风险，前端开发团队在移动互联相关前端项目中进行了工程化实践，通过引入接口仿真、代码检查、代码格式化、提交检查、公共文件修改告警、Git工作流等一系列自动化工具，同时配合PSET自动化打包构建及发布，完成了前端项目开发规范化、标准化落地。

自动化检查覆盖50余种常见代码异常点、30余种常见常见代码格式问题点、10余种常见提交异常点。经过一年实践，移动互联相关前端工程异常率下降了70%，代码提交及合并错误由2018年13次降为2019年3次，错误率下降了75%。

特点

增强项目可维护性、提高项目开发质量、降低生产风险；
进一步减少人工操作，提高开发过程涉及各环节的自动化率。

应用案例

民生手机银行；
民生企业银行；
微信银行；
企业银行；
托管银行;
etc

Part 3： Apollo现有工具升级

Apollo 2.0

功能和技术介绍

Apollo是轻量级前端状态管理框架，最新升级版2.0支持redux@4、redux-thunk、react-redux@6、react-router@4，致力于快速构建大型和高可用的前端系统。

2.0升级内容

人力盒子；
手机银行、企业网银、海外零售及企业银行、民生魔方、分布式平台等大部分行内和科技公司的前端项目均在使用apollo1.x版本，后续有计划陆续升级到2.0版本。

应用案例

底层重构，解耦内部redux相关功能，独立核心模块apollo-core，支持跨框架使用；
集中式路由转化为分布式路由，提高路由配置的灵活性；
内置dynamic接口，实现更细粒度的按需加载。

Apollo builder 2.0

功能和技术介绍

Apollo builder是包含构建打包，mock数据和单元测试功能的前端构建工具。其整合webpack、babel以及众多webpack插件，通过封装和最佳实践的约定，大幅简化配置，实现一键构建出完整的前端工程。

对比1.0提升效果

Webpack从v3升级至v4，v4版本构建速度比v3提高了90%，解决了在citrix环境中，前端开发打包调试耗时太长的问题；
升级happypack多进程构建插件，进一步提升构建速度，列出数据；
实现css分包按需加载，进一步提升页面加载性能，列出数据；
配置向前兼容，升级成本基本为0。

应用案例

手机银行；
香港企网PC和移动端；
人力盒子；
分布式平台；
科技公司所有前端项目。

Part 4： JOIN IN~

欢迎更多项目的加入

Apollo 前端应用开发框架，在2019年之前基本已经覆盖了行内大部分客户渠道以及内部运营管理系统。2019年采用Apollo前端开发平台的新增项目有：

APaaS 应用云平台
民信易链
分销易
员工福利宝
车主客群平台

希望后续有更多项目可以使用Apollo的前端开发框架，能够统一前端的技术框架，可以沉淀更多的组件和工具，也能够得到更好的技术支持和服务。

成为民生大前端的一员吧

2019年成立民生大前端非官方组织，已吸收行内及科技公司前端开发工程师50余人，群策群力异常问题，共同制定行内前端下一步发展方向；面向行内及科技公司前端开发工程师不定期举办前端技术分享~

欢迎加入！