注册

前端超进化-小公司不用自研也能搞基建(全开源工具版)

蛮荒时代

快看,这个男人叫小帅,他进了一家只有4个人的信息高科技有限公司,还妄想改变世界。

前端只有一个人,所谓的发版,就是直接本地打包,然后代码通过ftp工具扔到服务器上,代码能跑就行。

image.png

农耕时代

这种不靠谱的开发模式进行了一段时间,直到某一天,ftp把服务器搞挂了的同时,本地的文件也丢了。所以他的leader小强意识到是时候需要改变了。

首先他们开始使用了git,代码不再是只存在本地,更是存在了云端。同时新建了dev/prod/maste分支来保证相对于各个环境的独立。 image.png

在某次把dev环境代码打包上传到生产后,为了区分环境和避免再次发生这种事故,小强也开始使用了在线打包工具jenkins, image.png

jenkins的引入也有效的避免了服务器账号外泄的风险,现在的服务器账号相对开发者是黑盒的。 image.png

手工时代

慢慢的,公司的生意做的越来越好,老板已经开始看奔驰了。

前端也从1个人加到了3个人,成立前端技术部,小帅觉得自己快要走上人生巅峰了。人加了3个,问题也越来越多。

第一个重要的问题就是,git分支总冲突。

因为以前没有制定git规范,所以大家很随意的在dev和master上开发和提交代码。

所以约定了git的相关规范,每次用feature分支作为开发分支,feature通过merge合并到dev和上线release分支。

同时使用pre-commit来规范提交的commit信息。

第二个问题,是代码风格的问题。

人多了之后,大家的代码风格不一致了。比如有的人是2空格党,有个是4空格党,有人组件用驼峰命名,有人用大驼峰。为了统一风格,于是决定使用使用统一的风格检查。

同时了为了避免一些低级的语法错误和dirty code,引入了eslint进行代码检查。

通过Prettier对代码风格进行统一和格式化,通过Husky来在提交前进行link检查。在提交后,通过github Ci来进行二次检查。

至此,在手工时代,前端团队完成了代码风格和基础的lint检查。

image.png

工业时代

老板的爸爸原来是顾总,看到儿子创业很开心,给儿子调了5个亿的现金,于是大家开始快马加鞭,突击项目。

前端人数也直接爆炸,来到了20+,各种各样的项目如火如荼的进行,于是各种解决问题的前端方案应运而生。

微前端 single spa/qiankun

20个人的开发量,在一个项目中,代码量爆炸,每次启动打包,都巨慢无比。同时,之前一些零散的项目也需要并入到这个项目中,但是目前主技术栈用的react,零散项目有个用vue,有的用angular。

为了解决这些问题,所以要开始微前端的改造。

整体项目采用了single spa,通过统一的框架底层,将各个不同的项目聚合在一起。

微前端改造后,将整体的大项目拆分成了各自独立的项目。同时各自独立的项目有自己的仓库,各自独立打包。在运行时,各独立项目的停止也不影响其他项目。

image.png

物料库

现在各个项目独立开来,拥有各自的仓库,所以每次有新模块的加入,需要新建仓库,所以模版物料应运而生。

模版物料 degit

类似Vue-cli creat-react 都有做模版物料,里面包含了一个git地址,通过git拉取模版物料。

模版物料里包含了一个项目所需的相关配置,例如打包工具,框架cli,框架主模块,eslint,prettier,示例代码等。每个项目直接进行npm安装即可开始。

我们可以使用gedit来达成此目标

npx degit [git地址]
# 例如 npx degit

业务组件物料 VitePress/storybook

有一些物料我们需要结合业务场景,比如省市区选择器,这种物料通常都具有统一的api,ui,可以用于多个项目的使用。在基础的ui组件的基础上,还结合了业务属性。

这类物料也需要有展示的站点,我们可以使用VitePress/storybook来展示,也可以结合类似Dumi等。这些文档工具都是支持markdown和组件的混用插入。

image.pngimage.png

npm私服 Sinopia

既然相关的业务组件库已经搭建完成,我们是希望不通过外网访问的,所以一个npm私服也必须要有。 这里通过Sinopia来进行私服的搭建。npm私服,在拉取的时候,检测当前服务器没有该包时会从npmjs获取,而上传的时候,只发到私服,而不会提交到npmjs。 image.png

文档工具 Outline

现在组件库很多,相关的技术文档很多,在以往的情况下,公司使用了腾讯/飞书等进行文档管理,但是很多内容不希望外部知道的内容。 所以使用Outline搭建了一个内部的文档工具。 image.png

Mock服务 YApi

以往前端和后端都口头约定,然后通过后端的swagger来生成文档。但是这存在一个问题,文档的生成滞后,前端没办法在正式接口之前进行mock。所以引入YApi,通过在Yapi上填写mock数据,进行数据的模拟。 image.png

jekins升级 docker/k8s

因为以往的构建,都是在一个项目中,现在微前端允许多框架,多环境构建。为了解决环境不统一的问题,引入了docker部署,对于多环境/多机器进行部署。

前端监控 sentry

Sentry 是一套开源的实时的异常收集、追踪、监控系统。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成,通过 Sentry SDK 的配置,还可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作,便于后续异常追踪。异常数据上报到数据服务之后,会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中。 image.png

和平时代

基于上一次的工业大爆发,前端已经趋于稳定,公司业务也趋于稳定,老板的兰博已经停在了楼下。

在逐步的追求效率,追求速度的时期结束后,逐渐迎来了和平发展时期。这时候,团队开始关注自动化和创新。

灰度发布/一键回滚 k8s

各服务厂商都有提供灰度发布平台,结合服务商自己的服务可以对前端代码进行多环境,多场景,多条件的灰度部署及运维。

比如腾讯的服务网格,阿里的serverless等均有各种不同的服务。最基本的部署服务,就是根据k8s部署了多个不同的pod节点,然后根据规则匹配,对灰度环境进行的流量进行管理。 image.png

自动化测试 sonic

基于自动化测试的云平台,可以帮助每次执行真机的自动化测试,保证主流程的准确稳定。 image.png

性能监控/优化 Lighthouse/Sentry

chrome自带的Lighthouse可以进行本地性能的分析,同时搭配Sentry可以进行日志监控。 image.png

低代码/营销搭建 lowcode engine

公司一定时间之后一定需要一套做营销搭建和内部页面组织的工具,阿里开源的 lowcode engine可以在低代码领域进行快速的迭代。 image.png

AI客服 kimi/文心/通义

结合公司的文本资料库,将内容喂给Ai后,可以生成自己的Ai客服,解答一些常见的问题。

image.png

我是天元,立志做1000个有趣的项目的前端,公众号:前端cssandjs

如果你喜欢的话,请点赞,收藏,转发

归寂

已经跟随公司奋斗了几年的小帅,拿着合同终止通知书,看着老板的兰博大牛,觉得是时候应该向社会输送自己了。



作者:天元reborn
来源:juejin.cn/post/7364971296163414050

0 个评论

要回复文章请先登录注册