基于App-Hub实现微应用架构

最新推荐文章于 2024-05-13 11:58:43 发布
最新推荐文章于 2024-05-13 11:58:43 发布
阅读量4.1k 收藏 3
点赞数 1
分类专栏： Predix云 文章标签： 微应用 app-hub
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PredixCN/article/details/73615346
版权

作者：李宏训，前端工程师，GE数字集团

如果您还没有Predix试用帐号，请访问https://supportcentral.ge.com/esurvey/GE_survey/takeSurvey.html?form_id=18446744073709715720 申请。请务必准确提供您的信息，我们会以邮件方式通知您注册结果。

什么是微应用

如果我们想实现一个功能很复杂的大型应用程序，经常会随着代码体积的增加而慢慢变得非常难以维护。微应用(microapp)架构的提出，正是为了解决这个问题。
我们可以把一个大型应用根据功能拆成很多个小的应用，然后通过app-hub把这些小应用集成到一起形成一个大型应用。这样的好处是，每个微应用完全可以独立开发、部署、升级，可以选用不同的技术框架，互相之间不会产生直接的影响。即使一个微应用崩溃，也不会影响其他微应用正常使用。

App-Hub

App-hub 是一个nodejs/express 编写的应用，他主要提供如下功能：

  • 提供统一的用户登录/认证流程，在微应用中不用处理登录逻辑
  • 提供一个统一的导航栏，可以在不用的微应用中进行切换
  • 提供一些JS工具，比如通知栏

使用App-hub之后，我们的应用结构如图所示，不同的功能会通过不用的微应用来提供:

最低0.47元/天 解锁文章
PredixCN
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分析一下微应用框架（一）
老司机的后备箱
02-02 1018
对于大型前端应用的演进，微应用架构是一种尝试，微应用技术在端上本质就是一个组件资源的管理，组件可以是页面，也可以是一个弹框内容，甚至极端一点把一个逻辑很复杂的按钮作为一个应用来接入。在 2017 年 FCC 的时候分享过微应用的基础认识，当时技术直觉上觉得它碉堡了，还能这么玩前端页面。现在业务解决方案的落地形式很多，市场证明了微应用是能解决部分前端应用演进中问题的技术，这篇文章主要是回顾微应用在框架层面如何实现的，了解框架原理，才能更好更快的映射业务层接入的问题。
07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用
qq_29517595的博客
02-08 1万+
vue3+vite的主应用，改造成基于qiankun的微应用框架。并实现接入vue3+vite微应用、vue2+webpack微应用。微应用的接入，是在主应用的路由菜单中进行激活，也就是说，主应用的一个菜单可以对应一个微应用系统，主应用中展示哪些微应用的路由，可以在主应用在自定义。并且完成了部署，解决了主应用部署在二级目录、三级目录的难题
Docker集群管理(DockerHub Harbor 打包-Jib 任务编排工具- docker-compose和Swarm)
m0_46690280的博客
10-18 1142
Docker 集群管理Docker 集群管理镜像仓库管理DockerHUb仓库管理什么是DockerHUb账号注册和登陆Docker客户端登录管理镜像推送镜像仓库镜像测试registry仓库管理registry简介安装registry上传镜像 Docker 集群管理 镜像仓库管理 docker仓库,用来管理镜像。主要分为公共仓库和私人仓库。下面介绍了公共仓库Docker Hub、私人仓库Registry和harbor。 DockerHUb仓库管理 什么是DockerHUb 保存和分发镜像的最直接方法就是使用
2024年前端最新10分钟弄懂微应用框架——乾坤，真香！(1)，2024年最新Web前端程序员面试必备的知识点
最新发布
2301_82244509的博客
05-13 826
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
10分钟弄懂微应用框架——乾坤，真香！
热门推荐
前端开发博客
01-10 1万+
前言今天刚刚学习了一个微前端框架——乾坤，正着热乎劲，写一篇入门博客。这篇文章不会讨论太多的原理和实现，只是一个入门写 Hello World 的教程。文章的很多地方都参考官网，但是官网的...
一文详解微服务架构
令狐少侠的博客
08-14 887
本文将介绍微服务架构和相关的组件，介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服务架构的全局图景，因此不会涉及具体如何使用组件等细节。 要理解微服务，首先要先理解不是微服务的那些。通常跟微服务相对的是单体应用，即将所有功能都打包成在一个独立单元的应用程序。从单体应用到微服务并不是一蹴而就的，这是一个逐渐演变的过程。本文将以一个网上超市应用为例来说明这一过程。 最初的需求 几年前，小明和小皮一起创业做网上超市。小明负责程序开发，小皮负责其他事宜。当时互联网还不发达，网上超市还是蓝
chat-app-with-IBM:基于IBM云服务创建的聊天应用程序
04-30
IBM云服务提供了多种服务，如IBM Cloud Functions（基于Apache OpenWhisk的无服务器计算平台）或IBM Cloud Kubernetes Service（用于部署和管理容器化应用的平台），可以用来构建这样的后端架构。 在前端，项目标签...
Pick-Bins-Web-App:Pick-Bins Web应用程序已部署在Nginx服务器上
03-20
基于Node.js，Express.js和React.js框架，在跨平台上构建包括后端Restful API，前端Web应用程序和移动应用程序的应用程序。部署完整的CI / CD管道：首先通过Jenkins集成管道，使用Terraform设置基础架构，使用...
DaoCloud-基于容器的原生IT.pdf
10-11
传统IT架构常常是基于PC/Web，依赖于特定的操作系统（如Windows/Linux）和硬件平台（如Power/X86），而随着移动互联网和云计算的发展，应用程序已经跨越到Web、Linux和云环境，特别是J2EE应用的广泛使用。...
mcaffeAppHub:一个用于展示 mcaffe 产品的 apphub android 应用程序。在 hackearth.com 上的 12 小时极客马拉松中构建它
06-11
2. **设计阶段**：绘制草图，设计用户界面，并规划应用架构。 3. **编码实现**：使用Java编写主Activity、Fragment、Adapter等关键组件，同时利用Android SDK提供的各种API。 4. **测试与调试**：在模拟器或真实设备...
使用JavaScript和MQTT实现的一个简单的物联网应用
03-08
该Demo是一个使用JavaScript和MQTT协议实现的物联网应用示例,展示了一个完整的物联网系统的基本架构和流程。该应用包含四个主要部分:客户端(Client)、代理服务器(Broker)、服务端(Server)和应用端(App)。 客户端...
APP HUB上传应用程序注意事项
08-03
APP HUB上传应用程序注意事项 根据本人实践，APP HUB上传应用程序验证的主要有以下几点
基于移动平台的微应用开发框架技术的研究与应用
09-20
随着移动互联网技术、无线网络技术以及智能化移动终端的不断发展，移动微应用已成 为移动应用开发的重要部分。然而，面对日益增多的移动微应用需求，企业必须考虑微应用开发 的时效性、可靠性和稳定性。以国网外网移动交互平台为依托，结合微应用需求开发特点，利用 web 框架的动态加载技术、模块化构建技术、多分辨率和多尺寸移动终端界面适配技术以及移动 端公用组件的封装技术，建立了一整套微应用开发框架，以确保微应用的普适性、时效性以及封 装性。
实战 qiankun微应用框架
Aurora_juan的博客
10-11 811
主应用，又称为基座子应用main 主应用，由vue框架编写在main/main.js中安装qiankunrender : h => h(App) }) . $mount('#app') // 定义loader方法，loading改变时，将变量赋值给App.vue的data中的isLoading function loader(loading) {
微应用乾坤框架，整合多种项目真香（持续更新）
shalDream的博客
01-31 1886
loadMicroApp 手动加载子应用 也类似于 React.js 的 render 函数和 Vue.js 的 new Vue()，只不过更自由了。3.增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略。start 启动主应用 类似于 React.js 的 render 函数和 Vue.js 的 new Vue()4.独立的运行时：每个微应用之间状态隔离，运行时状态不共享。
微应用框架-----乾坤
weixin_66264082的博客
09-07 168
说明: qiankun默认不支持vite项目作为子应用，需要借助 vite-qiankun 插件进行支持。1.配置vite-qiankun插件。在主应用就行逻辑跳转就可以啦。4.配置子应用渲染的位置。
前端vue-element 登录随机生成数字验证码_element ui 随机验证码(1)
2401_84447297的博客
04-27 221
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
App Hub新发布，打造云原生“高速公路”上的应用加油站
A1373712651的博客
07-04 324
伴随着云原生技术体系的迅速普及，Kubernetes 项目和它所定义的声明式 API，已经成为了全世界所有公有云上进行云端应用管理的事实标准和基础性假设，同时也成为了打通“云”与全世界数据中心之间的“标准化高速公路”，组成了史无前例的云原生应用交付与分发网络。 什么是“开放云原生应用中心”？ 开放云原生应用中心，是云原生“高速公路”上的托管和分发应用的集散地，同时也是国内开发者使用云原生应用的重要...
app hub解锁体验
maybehacker
07-26 252
昨天给一个客户做了一次wp7越狱解锁，感觉不错，非常简单。 先做个广告： 双料开发者（yallaapps+app hub）：http://item.taobao.com/item.htm?id=12374327590 app hub帐号：http://item.taobao.com/item.htm?id=12329693469 yallaapps开发者帐号：http://item.t...
micro-app-demo 微前端
06-06
micro-app-demo（微前端）是一种前端架构模式，旨在将一个大型的Web应用程序分解为多个小型应用程序，每个应用程序可以独立开发、测试、部署和运行。每个小型应用程序被称为微应用程序，它们可以通过Web组件、Web框架或自定义解决方案实现，并可以独立部署和更新。 通过微前端，可以提高Web应用程序的可维护性、可扩展性和性能，并且可以大大减少开发人员之间的协作成本。微前端也有利于在掌握一些基本技能后，将一个大型团队分解成若干个小型团队，分别负责不同的微应用程序的开发和维护。 微前端还有助于减轻前端应用程序对特定框架或库的依赖，增强了应用程序的灵活性和可重用性。此外，在多个微应用程序之间通信和协调非常重要，因为它们需要协调共享状态、事件和路由等方面。 总之，微前端是一种独立应用程序开发、测试、部署和运行的前端架构模式，旨在提高Web应用程序的可维护性、可扩展性和性能。用微前端可以轻松切分一个大型的Web应用为多个独立的微应用，规模越大分的越细。微前端还可以减轻前端应用程序对特定框架或库的依赖，增强了应用程序的灵活性和可重用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值