行云部署前端架构解析-前言 | 京东云技术团队

一个简单的自我介绍

项目规模

截止目前上万次代码提交,总代码行数1超过21万行,其中人工维护的代码超过 13万行,近千个文件。

前端线上服务直接对接的后端服务,达十多个。

跟很多应用一样, 它有行云的入口, 也有独立的服务, 还有单独的插件接口

它是行云的子应用, 也是其它应用的主应用

技术栈

代码本身是 monorepo 的结构,通过 nx + pnpm 进行管理

  1. nx是一个优秀的项目管理工具,可以自动分析项目依赖、构建缓存(package 级别)等;

  2. pnpm相比npm, 可以更省空间、更快安装, 重要的是, 包版本管理更稳定.

项目直接通过 webpack 进行构建,而非 vue 官方的 cli-service;

后者虽提供了良好的封装, 适于大多数项目, 但如果需要进行精细化构建过程管理,其学习成本与坑量也翻倍了。

项目框架采用 vue2 + JModule

JModule可以帮助我将项目拆分为多个模块, 这对于这个大型项目的管理带来了诸多裨益, 其中细节在后续章节阐述.

似乎有很多项目因为JModule执行了两次构建,一份自己独立部署使用,一份对接行云应用,从而导致构建时间直接翻倍,这应该没有必要. 相反用好了可以通过拆分模块来加速构建,而这也是本项目的处理方案。

monorepo 下的包构成与依赖关系

主要包含3部分:

  1. API SDK@jindowin/api-jdos*

  2. 公用组件库@jindowin/common

  3. 业务模块@jindowin/jdos3*

其依赖关系可以通过 nx 工具直观的看到:

项目分两层,底层为基础包(1和2),上层为业务模块(3), 这其中还有些细节:

  1. 单向引用: 只允许存在代码上层对下层的依赖, 反之不行.

  2. 无横向引用: 每层包之间不存在代码上的横向依赖关系, 互相隔离

  3. @jindowin/jdos3 这个包是主入口,通过 JModule 将其它模块进行组合

架构设计的来由

回忆一个项目的成长:

框架设计者准备了模板, 只需要一行 create 命令

她五脏俱全, 结构统一

项目启动很快

很顺利

不用担心端口冲突, 它能自动检测并调整

不用时刻刷新页面, 它内置了热加载

不用担心代码规范, 它提供了构建时校验

后来

我们加入了 host, 单点登录解决了

我们写好了 proxyTable, 数据就有了

到这里, 世界更加美好了

再后来

项目逐渐长大, 而最初的美好

也开始慢慢消散

直到有一天

电脑风扇发出八级大风的哀嚎

引以为傲的 proxyTable 开始频繁冲突

代码校验失效了

产品问, 这俩站点的功能要合并

开发问, 昨天还好好的, 今天就跨域了

测试问, 我要部署一套测试环境

设计问, 这个页面的标题咋比另一个页面大呢

领导问, 服务挂了怎么办

用户问, 网页真白, 不知道还要再白多久

我开始怀念

我开始行动

我需要沉淀

架构设计的细节

在不久前, 我在草图上写下了一个粗糙的结构, 原计划一篇写完

有性格测试说, 我是一个P人, 不爱做计划

后来, 计划真的破产了, 一周过去了我只写完了《前言》

没有拖延, 但真的低估了它的细节与难度

梳理了一下分支, 从TODO开始, 分别来写:

模块设计

模块化是一个常规的设计方案, 但在具体实现层面, 仍有一些细节可以探讨, 比如:

  1. 设计时的基本原则

  2. 如何界定一个模块?

  3. 预期能获得哪些收益?

  4. 模块间是否存在依赖、层级关系?

  5. 模块的分类?

  6. 模块间的通信方式?

详情:行云部署前端架构解析-模块设计

开发体验

如何优化构建速度?
新成员介入开发时,如何做最少的配置来启动项目?
多人协作时, 如何减少公共配置的冲突?
如何减轻电脑的负担, 让编码更加顺畅?
微前端的项目, 如何顺畅进行开发联调?

详情:行云部署前端架构-开发体验

首屏加载

TODO
这是一个很常见的问题, 不解释

权限模型

TODO
这可能涉及角色的系统可能都逃不过的一个坎. 主要关注路由权限、菜单权限、具体功能的权限.
我们如何管理这些权限?
如何应对微前端模型?

多站点管理

TODO

  1. 多个站点, 需要多套服务吗

  2. 如何应对站点合并

  3. 如何区分站点功能

  4. 涉及站点时编码的基本原则

  5. 多个入口还是一个入口

多入口

TODO
这也是不少团队遇到的问题, 对于多数应用一个 if 执行不同的 bootstrap 代码可能就够了.

但有时候事情偏偏就很复杂…

我需要提供一些独立的组件, 理想情况下, 一个 exports 也就可以了

但当情况不理想的时候…
你要用提供的组件及其所有依赖组件, 依赖了 router
还有它与多站点的化学反应, 事情开始更加复杂

应用双生

TODO
这是一个奇怪的概念, 我造的.

它描述了这样一个现象: 一个应用, 两种形态. 或者该叫: 多态?

一般不会出现

一般出现也是过渡态

但真正的困难, 往往都是过渡态

行云部署与持续交付, 就是行云的两个子应用, 有不同的入口进入.

问题是: 同一套代码, 如何正常工作在两种模式下? 尤其是里面的路由

接口异常

TODO

  1. 从用户遇到问题, 反馈到研发看到异常, 日志已经融入了大海

  2. 服务挂了, 异常提示在屏幕上争相显示, 那队伍, 比瓦罐汤的队伍还长

配置管理

TODO
我们有一个功能的配置, 它有800多行
我们有一套服务的配置, 这个简单一点, 加起来也就 300 行左右

如何开发不乱、上线不慌?

服务维护

TODO
这是一个简单的问题, 因为我不专业
我猜, 我可以在10行以内讲清楚.
但是, 现在不忙讲…

以上内容, 可能跟据后续写作情况增减

争取早日清理掉里面的 TODO 标签

[1]统计范围为仓库内 jdos 项目相关的 js\ts\jsx\tsx\css\less 文件

作者:京东科技 林光辉

来源:京东云开发者社区 转载请注明来源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/415283.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持

文章目录 一、v-model是什么二、什么是语法糖三、v-model常见的用法1、对于输入框(input):2、对于复选框(checkbox):3、对于选择框(select):4、对于组件(comp…

网络安全 | 苹果承认 GPU 安全漏洞存在,iPhone 12、M2 MacBook Air 等受影响

1 月 17 日消息,苹果公司确认了近期出现的有关 Apple GPU 存在安全漏洞的报告,并承认 iPhone 12 和 M2 MacBook Air 受影响。 该漏洞可能使攻击者窃取由芯片处理的数据,包括与 ChatGPT 的对话内容等隐私信息。 安全研究人员发现,…

GIS复试Tips(特别是南师大)

注:本文仅个人观点,仅供参考 在这提前㊗️24年考南师大GISer成功上岸! 当然,考研是个考试,总有人顺利上岸,稳上岸或逆袭上岸,但可能也有人被刷,这是常态。 所以,㊗️你…

vue基于Spring Boot的中医在线学习课程购买服务管理系统

SpinrgBoot的主要优点有: 1、为所有spring开发提供了一个更快、更广泛的入门体验; 2、零配置; 3、集成了大量常用的第三方库的配置; 4、提供准备好的特性。当今,nodejs领域的开发者机会都在使用SpinrgBoot,在开发领域逐…

【AI绘画+本地部署】基于krita的AI绘画(含windows一键整合包)

comfyuikrita所有相关资源整合包(无需下载后面链接)百度网盘:https://pan.baidu.com/s/1iwNRpdTaD26YbzSDm6WLDA?pwdbur8 –来自百度网盘超级会员V4的分享 krita绘画软件官网地址 https://krita.org/en/download/krita-desktop/ krita-ai-diffusion 插件&#xff…

Python中HTTP代理的配置和使用

在Python中,HTTP代理是一种常用的技术,用于控制和修改HTTP请求和响应。通过使用HTTP代理,我们可以更好地控制网络请求的行为,提高安全性、隐私性和效率。下面我们将详细介绍如何在Python中配置和使用HTTP代理。 一、配置HTTP代理…

Elasticsearch各种高级文档操作

本文来记录下Elasticsearch各种文档操作 文章目录 初始化文档数据查询所有文档匹配查询文档关键字精确查询文档多关键字精确查询文档字段匹配查询文档指定查询字段查询文档过滤字段查询文档概述指定想要显示的字段示例指定不想要显示的字段示例 组合查询文档范围查询文档概述使…

el-table固定列偶发拖拽出现边框消失的问题

el-table固定列偶发拖拽出现边框消失的问题 问题复现 解决方法 // 自行把::v-deep 改成自己语言类型::v-deep .el-table__fixed-right {top: 0px;left: auto;right: 0px;border-left: 1px solid #ebeef5;box-sizing: content-box; }如果有用,请给我点赞收藏&#…

中小企业实施信息化有哪些好处?什么时候完成信息规划比较好?

中小企业需不需要做信息化规划?什么时候做信息化规划比较好? 企业的信息化规划,一定是越早越好,越快越好。 因为信息化是一个过程,不是一个结果,它不是一天完成的事情,而是贯穿着企业经营管理…

NFS网络共享存储服务技术攻略

目录 一.NFS 1.定义 2.特点 3.原理 二.服务端NFS配置文件 1.主配置文件 2.文件格式 3.相关命令 三.实验:NFS共享存储服务配置 1.服务端安装nfs-utils和rpcbind软件包 2.服务端新建共享目录给权限 3.服务端修改配置文件/etc/exports 4.服务端关闭防火墙…

本地MinIO存储服务通过Java程序结合Cpolar内网穿透进行远程连接

文章目录 前言1. 创建Buckets和Access Keys2. Linux 安装Cpolar3. 创建连接MinIO服务公网地址4. 远程调用MinIO服务小结5. 固定连接TCP公网地址6. 固定地址连接测试 前言 MinIO是一款高性能、分布式的对象存储系统,它可以100%的运行在标准硬件上,即X86等…

第16章_网络编程拓展练习(TCP编程,UDP编程)

文章目录 第16章_网络编程拓展练习TCP编程1、学生与老师交互2、查询单词3、拓展:查询单词4、图片上传5、拓展:图片上传6、多个客户端上传文件7、群聊 UDP编程8、群发消息 第16章_网络编程拓展练习 TCP编程 1、学生与老师交互 案例:客户端模…