halo,大家好,我是 132,今天给大家带来的是一篇有关于 c 站 app 的重构总结
背景
由于旧版c站 app 用户量太多,apicloud 平台要求上传企业认证,否则将无法更新 app
这波操作简直了……我们 app 的核心开发人员 @飘香豆腐 和我,都……是学生::>_<::
所以……旧版 app 陷入停更
同时,由于年代久远,c站的发展,也导致我们需要思考 app 的重构
技术选型
在写 app 之前,我们思考过使用的技术,主要是 flutter 和 react native
除了两者都能满足大部分业务场景外,两者都有缺点:
- flutter 不支持 m3u8,而且没有一个靠谱的视频播放器
- react native 在安卓下面,打包体积大
同时,两者最近更新:
- react native 60.2 装载 hermes
- flutter 发布 1.12,dart 发布 2.7,性能有提高
以上,是我平时做技术选型的两个方面:缺陷和大更新
综合来说,由于这次重构比较急,加上 flutter 对 m3u8 的支持有限,然后我对 hermes 的表现更感兴趣,然后使用 hooks 还可以复用 c站 主站大部分代码
所以这次重构选择了 RN
p.s. 写完后有一点点后悔没有选 flutter,哈哈
开始
确定了技术选型,就直接开工了,以下几个方面:
设计
上个图,直观感受下,首先使用了我们的主题色——基佬紫,然后整个设计遵循的是大道至简,没有边框,没有过多的图标和样式,这也是我一直以来的风格
由于是我自己设计,所以很大程度上考虑到 RN 组件和代码实现,所以接下来的代码工作非常顺利
react navigation 5.x
有个大坑,因为很久没有用 RN 了,以前的 navigator 竟然弃用了,推荐使用 react navigation
这玩意贼坑,官方文档是 4.x,但是当我搜索文档时,出来的结果是 4 5 都有的
所以我用 4 写完了,因为一个返回键的监听问题,只有 5 才支持,导致我不得不把所有逻辑重写
所以啊,大家做开源,不要将不同的两个版本混着来好吗
几个点:
- 隐藏播放页的 tab,通过 options 判断 state
<Tab.Screen name='Home' component={HomeScreen} options={({ route }) => {
return { tabBarVisible: route.state && route.state.index > 0 ? false : true }
}} />
- 后退刷新视图,通过监听 focus 事件
navigation.addListener('focus', () => setState())
expo
由于我是 windows 电脑,不怎么友好,所以为了方便,我使用了 expo
这也是这次最错误的选择,因为打包体积太大了呜呜呜
在这里不多说了,expo 真的很方便,连上模拟器直接就可以用
播放器
作为一家视频网站,播放器真的是重中之重
为此,我简单写了个播放器组件,代码量小,性能好
大概长这样……
当然,这只是权宜之计,未来播放器的定制需求会更高,目前有一个问题没有解决,就是全屏隐藏虚拟按键,唉
- 争取从底层重写
- 全屏状态下,隐藏虚拟按键
- 未来 RN 核心会移除 Slider 等众多组件,播放器可能重写
业务代码
由于是全部重写,所以业务代码也没有历史包袱
- 全部使用 react hooks
是的你没看错,这也是我选择 RN 的一个原因,因为它可以复用 40% 主站的代码,主站是 fre 写的
- 使用最新技术
唔,经过一两年的发展,现在的技术栈多多少少都有了变化,比如有了 fetch 就再也不需要 axios
未解决的问题
- 打包尺寸太大
由于 RN 自带 jscore 和 expo 的 sdk,导致打包默认就会很大,这个可能需要等 RN 精简核心才会有改善
- 无法在全屏状态下隐藏虚拟按键
RN 默认使用 StatusBar 来控制状态栏,但是并没有组件去控制虚拟按键栏,这太令人绝望了
如果你知道方法,请告诉我,十分感谢!
总结
经过这一次重构,c站的 app 终于更换为最新技术栈的架构,app 的终于可以恢复迭代了
但是比较遗憾的是,hermes 没有用到,未来我会花一些时间来研究它
后悔
说一点点后悔的事情,就是没有选择 flutter
因为整个重构下来,感觉全部工作都在我的【舒适区】,就是即便很久没写 RN,也没遇到什么大坑,整个重构很顺利
这也导致了没什么突破和产出
现在有点后悔没有用 flutter,说不定逼一下自己,我还能写个播放器什么的
不过来日方长,没有哪个 app 是不需要重构的
下次重构可能就毅然抛弃 RN 啦,哈哈哈哈
开源
c站所有代码开源,开源地址:github.com/cliclitv
RN 项目开源地址:github.com/cliclitv/Cl…
flutter 项目开源地址(@江河):github.com/cliclitv/cl…
旧版本开源地址(@豆腐):github.com/cliclitv/cl…
欢迎 star 与 pr 呀!
最后放个二维码
最新更新
- 移除 expo
因为打包文件太大了,移除前 49 M,移除后 10 M,同时开启了 hermes
但是插件啥的全都重写了一遍,呜呜呜