Monibuca
是一个开源的 Go
语言开发的流媒体服务器开发框架。具体介绍可打开下方官网链接查看:
官网地址:https://m7s.live
作为 Monibuca
团队开发者,需要为 Monibuca 4.0
版本做一个 Web
管理器,用来完成对 Monibuca
实例的细致化管理和控制。
同时,这个 Web
管理器暂时是不开源的。相当于是为一个开源项目做一个闭源的产品。
通过团队讨论,确定开发下图所示功能:
主要开发者有两人,前端一人,后端一人,我负责前端开发任务,下文主要以前端开发为基调进行阐述。
主要的考量有以下几个方面:
时间成本是一个重要因素,团队成员目前都是在业余时间进行开发,如果从 0
开始搞太浪费时间,我们需要借助开源力量。对于我负责的前端,更是如此,我不可能从 0
开始搞,我也不可能自行设计 UI
和交互,我需要把大量时间放在功能开发上,而不是放在 UI
和交互上。
开发和维护成本也是一个重要因素,选择主流实现方式,有助于降低开发和维护成本。在第一个上线版本前,不要过度设计你的实现,那样会显著增加开发和维护成本。合理的方式是先以你擅长的主流实现方式,快速完成功能开发,完成之后,再去根据整体情况去调整和优化你的设计。
开发体验和用户体验这两者在开源和公司中表现正好相反。开源项目的开发体验大多数情况下是非常好的,因为开发者有足够的决定权去提升开发体验,如选择喜欢的技术栈。而开源项目的用户体验一般是不及公司中用户体验的,因为产品所提供的用户体验对于公司是极其重要的,公司会花费很多成本去提升用户体验。相比之下,开源项目的用户体验一般弱于公司。
当然这不代表开源项目不注重用户体验, Monibuca Web
管理器在开发和用户体验上都会兼顾。
在确定功能,到准备开发的间隔中,建议做一个简单的考量,做到心中有数,运筹帷幄。
在开发项目前,想清楚一件事情:
那就是要不要在某个开源项目的基础上进行开发,这里我在简单尝试后,选择了在开源项目基础上进行开发。
因为让我去从 0
搭建类似管理后台的 Monibuca Web
管理器,时间和开发成本太大,没必要这样做。
想清楚后,下面我要做的就是找到适合 Monibuca Web
管理器的开源项目模板。这个开源项目具有以下特征:
LICENSE
是 MIT
或者 Apache
, 避免不必要的纠纷Monibuca Web
管理器,同时简洁美观TS
、 Vite
、 Vue3
、 主流组件库等经过搜索、线上体验、阅读源码等过程,最终确定了以 naive-ui-admin
为开发模板。如下图所示:
其官方文档地址:https://jekip.github.io/docs
选它的理由是因为它具备以上四个特征。还有一个因素,就是我想用 naive-ui
组件库。
在选择 naive-ui-admin
作为开发模板后,我开始了功能开发。
整个开发过程,开发和联调是同时存在的,边开发,边联调,有点类似做私活,主要有以下 2 个总结:
这个主要是参照官方文档,看下核心功能的实现,如路由、权限、布局等。
这个开源模板提供的路由和权限功能非常丰富,功能如下图所示:
代码实现也比较复杂,后续会对这部分进行优化和简化。不过在开发前期,尽量不要对原有模板代码进行大调整,按照其定下的规则进行开发功能即可。
在开发过程中,对模板代码可以优化的点和如何调整为适合 Monibuca Web 管理器的方案做到心中有数,比如下面几点:
mock
、 stylelint
、 husky
、 env
commitizen
、 代码结构UI
和交互在整理优化点后,后面就是执行这些优化,简单的优化在开发前期就解决了,而复杂的优化,需要等熟悉模块代码后,再进行调整。
对于人很少的团队来说, mock
、 stylelint
、 husky
的作用不大,可以删掉。
env 配置,目前也没有用到,以后用到的话,再加上。
路由的简化如下图所示:
图中右侧是 Web
管理器,相较于模板代码,做了以下具体调整和优化
guard
目录下权限的简化:去掉后台动态路由,只保留前端角色权限。
优化构建:
build
目录,构建逻辑都写在 vite.config.ts
中vite
插件,如 visualizer
、 icon
、 inspector
,如下图所示:优化 commitizen
:
主要是将 commitizen
替换成了 czg
,有以下优点:
cz-git
的核心,继承了 cz-git
的所有特性操作如下 gif
图所示:
czg 官方文档:https://cz-git.qbb.sh/zh/guide/
优化代码结构:
优化后的代码结构和模板代码结构对比如下图所示:
图中右边是优化后的代码结构,从上图可以看到做了以下两点优化:
这里分为开发体验和用户体验。
主要做了以下措施:
1 . 使用 turbo
,增加多包任务编排能力,如下图所示:
2 . 使用 pnpm workspace
, 增加对第三方 npm
包定制化能力,如下图所示:
3 . 使用 vite-plugin-vue-inspector
, 增加点击 UI 自动定位到代码行能力,如下 gif
图所示:
4 . 更新 Vite
版本,配置依赖预构建
提升用户体验的核心内容,就是要让用户感受到页面很快,交互很友好。
页面很快这个可以通过性能优化来做到,性价比最高的做法如下:
gzip
压缩、开启 h2
在优化打包体积的过程中,使用 rollup-plugin-visualizer
对打包代码进行体积分析,分析结果发现,体积很大, Rendered
体积达到了 4.5M 模板代码对这块没有做优化,遂进行优化,优化方式也很模板,不构建公共库,使用 cdn
去加载,配置如下:
import externalGlobals from 'rollup-plugin-external-globals'
const globals = externalGlobals({
vue: 'Vue',
vueRouter: 'VueRouter',
'naive-ui': 'naive',
'vue-demi': 'VueDemi'
})
build: {
target: 'es2015',
outDir: 'dist',
rollupOptions: {
external: ['vue', 'vue-demi', 'vueRouter'],
plugins: [globals]
}
}
然后再把 echart
干掉,不使用 echart
。这样操作下来,构建分析结果如下图所示:
Rendered
体积只有 1.1MB
, gzip
后只有 360KB
, 构建体积优化到这里,已经可以了,发布后,页面加载速度提升明显,用户体验也得到不错提升。
开发完功能和自测后,就可以准备上线了,上线过程也非常简单,后端整好后,前端这边写一个构建部署脚本即可。
上线后有一个任务,就是在把线上地址宣传出去之前,团队成员进行提前体验。这个过程点检出了一些问题,如特定操作后,页面空白、代码逻辑问题。都需要在宣传之前解决掉。实际情况中,在宣传之后,依然点检出一些问题,目前的方式就是,发现问题,解决问题,发布上线。
现在控制台界面如下图所示:
有需要的可以用微信扫下面二维码观看视频教程,更加直观。
控制台地址:https://console.monibuca.com
规划主要有两个,一个是私有化,一个是微模块。
目前制定了两套方案
第一套方案:
Monibuca Web
管理器私有化,这个需要前端和后端同时做好私有化,这个方案的后端考虑因素比较多,需要做不少调整。
第二套方案:
鉴于 Monibuca
的特殊场景,也就是需要用户在本地启动 Monibuca
实例。我们可以选择桌面端来做私有化,这样就可以不再需要后台服务,只需要写一个桌面端即可。
目前第二套方案的优势更大,不过也要解决一些问题,如桌面端和 Web
端 UI
共用,各操作系统的兼容性等。
微模块 是跨工程、跨项目共享通用业务代码的理想解决方案。
这个规划主要借鉴了 eflux
。
eflux
文档地址:https://eluxjs.com/designed/micro-module.html
我们看下 Monibuca Web
管理器的前端目录结构,如下图所示:
上图目录是以文件职能划分,功能模块作为次级分类,如果我们想做到下图这种能力
你会发现,是比较困难的,因为我们的功能是通过很多目录协作完成的。如果使用微模块的思想,那么这个问题就会得到很好的解决。
我们约定好路由和状态管理方案,把公共的依赖做成基座。这样就可以很好的做到业务模块的复用。也为后续桌面端和 Web
端共用业务模块打下坚实的技术基础。
类似下图:
stage
目录为基座,提供公共依赖。其他模块为业务模块。`
至此,全文阐述了为 Monibuca
开源项目开发 Monibuca Web
管理器的方方面面,包含思考衡量、开发前、开发中、优化、未来规划等内容, 希望对读者有所帮助。
本文由哈喽比特于1年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/2B1li6aIofgHfpCWsEGz4w
京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。
日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。
据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。
今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。
日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。
近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。
据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。
9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...
9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。
据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。
特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。
据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。
近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。
据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。
9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。
《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。
近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。
社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”
2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。
罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。