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

news2024/11/17 1:49:58

一个简单的自我介绍

项目规模

截止目前上万次代码提交,总代码行数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.coloradmin.cn/o/1396933.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 之LeetCode刷题记录(十三)

😄😊😆😃😄😊😆😃 开始cpp刷题之旅。 依旧是追求耗时0s的一天。 70. 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可…

TortoiseSVN客户端如何安装配置并实现公网访问服务端提交文件到本地服务器

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统,它与Apache Subversion(SVN)集成在一起,提供了一个用户友好的界面,方便用…

HarmonyOS—创建和运行Hello World

DevEco Studio配置开发环境完成后,可以通过运行Hello World工程来验证环境设置是否正确。接下来以创建一个Phone设备的工程为例进行介绍。 创建一个新工程 打开DevEco Studio,在欢迎页单击Create Project,创建一个新工程。根据工程创建向导&…

【Linux】配置dns主从服务器,能够实现正常的正反向解析

​​​​​​1、首先,在主服务器上配置DNS解析器。打开配置文件/etc/named.conf,添加以下内容: zone"example.com" IN {type master;file "example.com.zone";allow-transfer { slave_ip_address: }; };zone"xx.16…

kotlin Kmp多平台模板生成

地址: Kotlin Multiplatform Wizard | JetBrains 可生成kotlin多个平台模板 https://terrakok.github.io/Compose-Multiplatform-Wizard/

SpringBoot连接远程服务器redis

SpringBoot连接远程服务器redis 1、指定redis配置启动 进入redis安装地址,我这里安装的是 /usr/local/src/redis-6.2.6 先copy一份配置文件 cp redis.conf redis.conf.bck然后修改配置文件信息 vim redis.conf bind 0.0.0.0 # 守护进程,修改为yes后即可…

StructuredStreaming输出模式和结果输出文件中

输出模式 #format指定输出位置 console:控制台 #append 不支持排序,不支持聚合, 每次输出数据都是最新的数据内容 #complete 必须聚合,支持聚合后排序 每次输出数据都会将原来的数据一起输出 #update 支持聚合,支持sel…

小程序宿主环境-组件swiper

巧识小程序的开发过程学习. 在我们的list.wxml中创建组件 <swiper class"swiper-container" indicator-dots indicator-color"white" indicator-active-color"grey" autoplay interval"2000" circular><!--第一个轮播图--&…

gitlab 部署项目新分支

公司代码管理平台新切换到gitlab下&#xff0c;上线发版流程随之变更 1新建分支&#xff0c;开发完成&#xff0c;提交新分支 2.去gitlab平台上找到Merge requests 3 点击右上角的New merge request select source branch 选择新建的分支 点击 compare branches and contin…

Vue中使用echart引入图表

下载echart安装包. 找到安装包里的dist文件夹中的echarts.js文件&#xff0c;复制到工作文件夹目录下 复制到工作文件夹目录下 官网查询使用方法快速上手 - 使用手册 - Apache ECharts eg:

图灵日记之java奇妙历险记--String类

目录 String常用方法字符串构造String对象的比较字符串查找char charAt(int index)int indexOf(int ch)int indexOf(int ch, int fromIndex)int indexOf(String str)int indexOf(String str, int fromIndex)int lastIndexOf(String str)int lastIndexOf(String str, int fromIn…

数据在内存中的存储(整型与浮点数类型)

目录 数据类型详细介绍 数据类型介绍 数据类型的基本归类 整型在内存中的存储 原码、反码、补码 ​编辑 大小端介绍 例题 浮点型在内存中的存储 常见的浮点数 浮点数存储的例子&#xff08;具体解析浮点数存储&#xff09; 解析最初的例题 数据类型详细介绍 数据类…

问题:Feem无法发送信息OR无法连接(手机端无法发给电脑端)

目录 前言 问题分析 资源、链接 其他问题 前言 需要在小米手机、华为平板、Dell电脑之间传输文件&#xff0c;试过安装破解的华为电脑管家、小米的MIUI文件传输等&#xff0c;均无果。&#xff08;小米“远程管理”ftp传输倒是可以&#xff0c;但速度太慢了&#xff0c;且…

小程序商城开通指南:揭秘电商新零售的崛起之路!

随着移动设备的普及和微信小程序的迅速流行&#xff0c;电商行业正在经历前所未有的变革。小程序商城作为新兴的电商模式&#xff0c;因其无需下载安装、方便易用等特点&#xff0c;为企业和个人创造了崭新的商业机会。本文将为您详细介绍如何开通小程序商城&#xff0c;涵盖准…

从matlab的fig图像文件中提取数据

这里用的是openfig&#xff08;&#xff09;函数打开的fig文件 →→→【matlab 中 fig 数据提取】 很简洁 →→→【MATLAB提取 .fig 文件中的数据】 这个给出了包含多个曲线的情况 →→→【提取matlab fig文件里的数据和legend】 chatgpt给出的方法 打开fig文件并保存数据 我的…

【LLM】Prompt微调

Prompt 在机器学习中&#xff0c;Prompt通常指的是一种生成模型的输入方式。生成模型可以接收一个Prompt作为输入&#xff0c;并生成与该输入相对应的输出。Prompt可以是一段文本、一个问题或者一个片段&#xff0c;用于指导生成模型生成相应的响应、续写文本等。 Prompt优化…

C++类与对象【友元】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;C从基础到进阶 &#x1f384;1 友元&#x1f951;1.1 全局函数做友元&#x1f951;1.2 类做友元&#x1f951;1.3 成员函数做友元 &#x1f56e;2 总结 &#x1f384;1 友元 生活中你的家…

热轧钢板、钢管测长仪 高温检测无压力

热轧钢管、钢板等轧材温度是非常高的&#xff0c;在线测长仪可对其进行在线检测&#xff0c;实现生产中的测量&#xff0c;同时也可给剪切机输送数据&#xff0c;帮助裁切。 测长仪是基于机器视觉的测量设备&#xff0c;能够拍摄被测物的清晰图片&#xff0c;并显示&#xff0c…

python数字图像处理基础(十二)——银行卡识别

目录 实战-银行卡识别理论部分补充介绍 代码部分 实战-银行卡识别 理论部分 1.总体思路 首先把模板中的数字单个分离开&#xff0c;再提取银行卡上的ROI&#xff0c;再将两者的二值图像进行模板匹配&#xff0c;确定出每一个数字&#xff0c;即实现了银行卡号识别 补充介绍 …

C++ 之LeetCode刷题记录(十四)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 依旧是追求耗时0s的一天。 88. 合并两个有序数组 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &…