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

一个简单的自我介绍

项目规模

截止目前上万次代码提交,总代码行数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 文件

作者:京东科技 林光辉

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】python版本控制和环境管理

文章目录 1.查看目前python的版本2.添加软件源并更新3.选择你想要下载的版本4.警示:没必要设置默认版本误区千万千万不要覆盖python3软链接解决办法 5.pip软件包管理最省心稍微麻烦换源 网上有很多教程都是教导小白去官方下载之后编译安装。但是,小白连c…

【数据结构】 循环单链表的基本操作 (C语言版)

目录 一、循环单链表 1、循环单链表的定义: 2、循环单链表的优缺点: 二、循环单链表的基本操作算法(C语言) 1、宏定义 2、创建结构体 3、循环单链表的初始化 4、循环单链表的插入 5、求单链表长度 6、循环单链表的清空…

<信息安全>《2 国内主要企业网络安全公司概览(二)》

4 北京天融信科技有限公司(简称天融信) 信息内容LOGO成立日期创始于1995年总部北京市海淀区上地东路1号院3号楼北侧301室背景民营企业是否上市天融信[002212]A股市值99亿主要产品网络安全大数据云服务员工规模6000多人简介天融信科技集团(证券代码:0022…

Java多线程并发篇----第二十九篇

系列文章目录 文章目录 系列文章目录前言一、什么是不可变对象,它对写并发应用有什么帮助二、Java 中用到的线程调度算法是什么?三、什么是线程组,为什么在 Java 中不推荐使用?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点…

功能最强大的在线考试、投票系统,支持一键部署,开源了

简介 功能最强大&搭建最简单&界面更美观的在线考试/调查问卷/公开查询/题库刷题/360度评估/投票系统,支持一键部署。 特性 支持 20 多种题型,如填空、选择、下拉、级联、矩阵、分页、签名、题组、上传、横向填空等 多种创建问卷方式&#xff…

应用层—HTTP详解(抓包工具、报文格式、构造http等……)

文章目录 HTTP1. 抓包工具的使用1.1 配置信息1.2 观察数据 2. 分析 https 抓包结果3. HTTP请求详解3.1 认识 URL3.1.1 URL 基本格式3.1.2 查询字符串 (query string)3.1.3 关于 URL Encode 3.2 认识 http 方法3.2.1 [经典问题] Get 和 Post 主要的区别是什么?&#…

【AI】小白入门笔记

前言 2024年,愿新年胜旧年!作为AI世界的小白,今天先来从一些概念讲起,希望路过的朋友们多多指教! 正文 AI (人工智能) 提起AI, 大家可能会想起各种机器人,移动手机的“Siri”,"小爱同学", 是语…

给创业者的一份忠告~创业就要选择低成本的轻资产创业项目

王健林继续出售资产,5天卖了4座万达广场,出售计划仍在继续..... 根据天眼查app最新消息,厦门殿前万达广场商业管理有限公司发生工商变更,2023至今已经转让10座万达广场。两年前万达旗下的核心子公司万达商管,向一群投资…

Java开发分析工具 JProfiler的详细使用方法解析(附 JProfiler for Mac许可证秘钥)

JProfiler 是一款功能强大的Java代码分析工具,JProfiler的直观UI可帮助您解决性能瓶颈,确定内存泄漏并了解线程问题且JProfiler Mac破解版配置会话非常简单,第三方集成使得入门变得轻而易举,并且以自然的方式呈现数据分析。 解…

【Linux】Linux开发工具 - vim的基本操作

IDE例子 Linux编辑器-vim使用 vi/vim的区别简单点来说,它们都是多模式编辑器,不同的是vim是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面。例如语法加亮,可视化操作不仅可以在终端运行&#xff…

NVM (Node Version Manager) 安装使用

博文目录 文章目录 管理工具安装使用 管理工具 GitHub, nvm-windows nvm-windows: Similar (not identical) to nvm, but for Windows 管理 Node.js 版本有多种工具可选择, 其中使用最广泛的是 nvm, 目前 72.3k Star, 不支持 Windows 系统, nvm-windows, 是其他大佬为 Windows…

若依管理系统搭建教程,ruoyi-vue环境搭建

环境部署 准备工作 JDK > 1.8 (推荐1.8版本) Mysql > 5.7.0 (推荐5.7版本) Maven > 3.0 运行系统 1、前往Gitee下载页面([https://gitee.com/y_project/RuoYi (opens new window)](https://gitee.com/y_project/RuoYi))下载解压到工作目录 2、导入到Eclipse&#…

SpringMVC第一天

简介 SpringMVC技术与Servlet技术功能等同&#xff0c;均属于web层开发技术 SpringMVC是一种基于java实现的MVC模型的轻量级Web框架 优点 使用简单,开发便捷(相比于Servlet) 灵活性强 入门案例 第一步、导入SpringMVC与Servlet坐标 <?xml version"1.0" encod…

【数据结构与算法】之字符串系列-20240121

这里写目录标题 一、344. 反转字符串二、125. 验证回文串三、205. 同构字符串四、242. 有效的字母异位词五、290. 单词规律 一、344. 反转字符串 简单 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额…

2024最新最全【网络安全面试题含答案】(非常详细),零基础入门到精通

防范常见的 Web 攻击 什么是SQL注入攻击 攻击者在HTTP请求中注入恶意的SQL代码&#xff0c;服务器使用参数构建数据库SQL命令时&#xff0c;恶意SQL被一起构造&#xff0c;并在数据库中执行。 用户登录&#xff0c;输入用户名 lianggzone&#xff0c;密码 ‘ or ‘1’’1 &a…

《SPSS统计学基础与实证研究应用精解》视频讲解:SPSS数据查找

《SPSS统计学基础与实证研究应用精解》4.4 视频讲解 视频为《SPSS统计学基础与实证研究应用精解》张甜 杨维忠著 清华大学出版社 一书的随书赠送视频讲解4.4节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。本书旨在手把手教会使…

【征服redis15】分布式锁的功能与整体设计方案

目录 1. 分布式锁的概念 2.基于数据库做分布式锁 2.1 基于表主键唯一做分布式锁 2.2 基于表字段版本号做分布式锁 2.3 基于数据库排他锁做分布式锁 3.使用Redis做分布式锁 3.1 redis实现分布式锁的基本原理 3.2 问题一&#xff1a;增加超时机制&#xff0c;防止长期持有…

基于Django的计算机编程技术学习与服务平台

临近毕业&#xff0c;又到了赶毕设的时候了&#xff0c;本次介绍分享一下自己的毕业设计项目吧。 项目主题&#xff1a;基于Django的计算机技术编程技术学习与服务平台 实现功能&#xff1a; 1.登入&#xff1a;用户的登陆注册 2.Python教程&#xff1a;实现用户的Python技…

git clone超时

本文介绍作者在Centos上链接github超时&#xff0c;无法克隆的解决方案 在出现上图所示问题时&#xff0c;有可能是连接不到github.com&#xff0c;读者可以尝试输入ping github.com&#xff0c;当输入该指令后若长时间没有反应说明可能由于本地DNS无法解析导致的。 解决方案…

银河麒麟桌面桌面操作系统v10保姆级安装

目录 一、下载ISO映像文件 1.产品试用申请 2.试用版下载 二、虚拟机搭建 1.新建虚拟机 2. 选择虚拟机硬件兼容性 3.选择安装客户机操作系统 4.选择客户机操作系统 5.命名虚拟机 6.处理器配置 7.虚拟机内存 8.网络类型 9.硬件 10.指定磁盘容量 三、修改虚拟…