1531 字
8 分钟
CasaOS Frontend 优化与重构经历
2023-07-22

最近成为 IceWhale 的实习生🥳。主要工作是分配到了后端的开发,但是看到 CasaOS-UI 的这个代码质量确实不能忍呀🤪。直接上手重构,还好同事们都比较支持。😚看来 IceWhale 这个家还是不能没有我呀,也希望我在未来能成为像 Twitter 上那些前端网红吧。

目前的问题与目标#

先让我们看看 CasaOS-UI 的问题。

代码版本管理混乱,分叉严重#

目前 CasaOS-UI 有三个分支 main、0.4.6(未来发版的本来)、 特殊版(做一些特殊的功能)。其中每个 branch 都有特殊的代码,从任何一个分支 merge 或者 rebase 过去都要解决一堆冲突的问题。 这种问题说实话,我还真是第一次见。😗看来之前的同事在这堆屎山上确实糊了不少屎上去。

组件难以阅读#

原来的组件许多都长达几百行,大量的 methods 和 data,看到长长 html 就能让人推动阅读欲望。 随便来一张截图来看看🤣 相信大家已经有点头晕了吧。

长长的html

像这个文件可是高达 1964 行呢!

高达 1964 行的文件

代码冗余#

组件中存在大量没有用到函数、变量,还有一些被注释掉的功能、业务代码。这些只通过看其实根本不知道哪些会被调用到,哪些不会被调用到,在之前的开发中,因为这个问题,导致了许多时间的浪费。

带大家看看一些吧🤣 没有被用到的 mixins

没有被用到的 mixins

在实际中永远不会被调到到的 set 函数(当然目前这里已经改了)

在实际中永远不会被调到到的 set 函数

使用 Mixins 来实现复用,而不是 UseHook#

使用 Mixins 来实现复用,而不是 UseHook,这个最大的问题就是很难判断目前复用的这个函数是来自哪个 Mixins 的,和某个 Mixins 到底有没有被使用到。当然或者能有什么插件能解决这个问题,不过目前我是不知道的。

其它问题#

CSS live load 无效#

这个应该算是其它工具链没有配置好,导致修改 CSS 之后需要手动刷新页面才能生效。

CSS 混乱#

同时使用了 Sass、Bulma CSS,导致代码风格不统一,难以维护。还有大量的 CSS 是写在组件外面。

目标#

重构的目标肯定是为了还技术债,降低未来的开发、维护成本。就 CasaOS-UI 的重构还有一个目标就是为了逐步转移以老旧的技术栈,在未来的开发能转移至 Vue3 中。

重构的内容#

从 Options API 重构成 Composition API#

基本没有太大问题,直接把 data 里的数据放到 ref、reactive 里就好了。 props用defineProps用重写,而本来methods中的方法用剪头函数重写,基本都没有遇到问题。

从 Mixins 重构成 UseHook#

原来的通过 Mixins 来利用代码的方式,确实让我感觉不舒服,不过这个复用也是非常简单的。基本上就是改改就完成了。

代码结构的优化#

本来代码就是一个个组件,现在代码通过多级文件夹来组合代码,尽量对外来屏蔽小组件,只暴露应该暴露的组件。

比如这个组件本来是一个 247 行的组件,然后我把它拆成多个小组件,但是这些小组件没有 export 出去。让代码看起来更舒服了一些。👀 old code new code

还没有解决的问题#

CSS 的问题#

目前代码使用了 Sass、 Bulma CSS 等一堆CSS,目前重写成本太大,所以重构基本都不碰CSS相关的部分。

代码分叉的问题#

目前代码有几个branch,难以合并,这个确实需要较大的时间去推动把 main 和 版本分支 先 rebase 一下,解决一些冲突,以后通过设计,统一使用 main 分支来写代码,功能通过 guard 来实现版本开关。

提取一些公共的组件#

我们代码中大量直接使用了第三方组件库,如buefy,这个对我们扩展有很大的影响,比如我们如果要实现dark mode之类,CSS挺难整。然后这个buefy也不支持Vue3,难以升级,最后是如果想加入一些好的组件实践也非常的困难(比如让组件支持快捷键)。

我个人的想法是把这些都提取出来,比如用IWButton(icewhale)来把原来的b-button来包一层,就是先把自己的组件包buefy包一层,来解耦出来,然后再通过 Headless UI库来逐步的替换buefy

然后再进一步,CasaOS 是希望能支持第三方模块的,如果能把这些组件写好样式直接给第三方模块用,那就是非常好的。比如实现一个 IceWhale-UI。这样开发第三方模块的开发者就可以通过直接使用组件库来获得和 CasaOS 一样的界面风格了。

但是在后续研究中发现如果要实现一个组件库同时支持 Vue2、Vue3 是比较麻烦的,然后我想用的 HeadlessUI 又是一个只支持 Vue3 的库,所以这个问题还是需要再研究一下。🤔 后续有进展的话再来更新博客。

其它工具#

整体代码风格还是比较差劲的,但是我目前还是没有上 eslint 和自动格式化工具,主要是怕改动太大,把其它几个分支的代码都搞出冲突来了。这个在后续解决完分支问题之后还是要上的。 然后是缺乏测试,其实这个项目还是有一些业务复杂度在的,所以上单测还是很有必要的,但是这个也是花费一些时间把工具链搭建好。🤔

CasaOS Frontend 优化与重构经历
https://correctroadh.github.io/posts/refactor-casaos-frontend/
作者
CorrectRoad
发布于
2023-07-22
许可协议
CC BY-NC-SA 4.0