前言

21年已经过去一个月，新年回来，想以团队的视角写个总结，回顾一下21年我们团队的技术建设和团队氛围。

技术方面

我们团队是比心众多团队中的一支，负责支持语音房业务产生的所有web相关需求。公司内部的基建已经有一些：脚手架、监控告警、发布平台、serverless、各种组件库、微前端等等，大的方向已经做过了，所以对于技术项目，我们需要通过在业务开发中发现痛点、解决低效的问题来带给伙伴们成长，其中可能是一整套方案也可能是一个小的技术点。

技术项目流程：发现问题 => 评估可行性(是否已有基建避免重复造轮子) => 调研 => 制定方案 => 技术评审 => 技术实现 => 团队宣讲 => 使用反馈 => 功能优化。

以下是这一年内我们完成的技术能力，如果有相同的问题或者有更好的方案，欢迎一起探讨：

low code平台 - kelvin

背景：营销活动业务发展快、内容多，急需一个提效的方案
目标：做一个通用的H5项目搭建平台能够通过插拔组件库的形式实现快速搭建含有业务逻辑的需求
成果：接入组件库13个搭建页面900+ 从研发自研到推广业务使用到业务能够规划自己的组件库今年期望能够开源

截屏2022-02-07 20.21.19.png

登录注册SDK - @fe/sm-verify

背景：各个业务的登录注册都是独立负责涉及H5、web端、小程序、官网等技术升级迭代困难
目标：抽象出登录注册的公共能力由一方维护
成果：最终因为UI不同框架不同只抽象了逻辑和接口 @fe/sm-verify view层还是各自业务实现

长连SDK - @fe/percy

背景：对接多个场景：IM长连、聊天室长连、系统消息、活动场景多个渠道：自建长连、多个云商的长连
目标：抹平多渠道多场景之间差异降低对接成本
成果：共9个项目接入其中两个小程序项目
文章：小白10分钟入门Websocket，手把手带你实现一个多人聊天室～

API&Mock平台 - nash平台

背景：接口定义没有统一平台维护没有统一个mock能力很多项目都是前端等待后端接口完成开始开发
目标：前后端同时开发减少串行时间自动化的API文档生成工具
成果：通过服务端发布时网关扫描能力扫描接口注释生成接口文档；通过mock平台通用策略和私有策略自动匹配生成mock结果网关识别header字段拦截并返回mock数据已推广的公司级使用

chrome身份插件工具 - identity-switcher

背景：H5模拟用户身份较繁琐且不能记住管理多个用户依赖浏览器模拟移动端 PC端需要复制cookie到项目中并重启项目访问用户身份
目标：不需要来回复制切换网页就能够模拟用户身份
成果：产出chrome插件拦截请求注入生成的ua 达到用户管理、研发环境管理效果；基于omnibox能力提供给研发人员输入需要获取cookie的网址一键给当前地址下注入获取到的cookie，已推广的公司级使用
文章：我是如何用这3个小工具，助力小姐姐提升100%开发效率的

截屏2022-02-07 20.35.32.png

公共函数库 - @fe/utils

背景：每一个研发人员应该都有积累自己常用的函数库每次都要来回复制内容需要文档维护升级需要口口相传
目标：团队中也需要积累基于业务的公用函数库
成果：已积累20+ 常用好用的函数在团队内容使用

站外功能 - @fe/rainbow

背景：为了提升语音APP DAU和新用户数我们需要统计到站外拉新的渠道和人数等具体数据进而促进产品分析精准投放，因此我们的归因项目应运而生
目标：站内外的唤端功能、站外的下载条和蒙层、站内外的PV、UV事件、站外登录注册次数、唤起APP次数、渠道、转化率等实时导流APP数据
成果：umd 方式导出已默认覆盖所有项目业务自己决定是否需要使用完成数据看板

常见问题 - @fe/issue

背景：每个同学踩过的坑无法周知经常浪费时间再重复的问题上而不知
目标：需要有个类似git issue功能添加管理研发中遇到的问题并可以有状态管理问题分类标签等功能可以让其他人可以评论
成果：单独起了一个项目 @fe/issue 只使用issue功能并对增改评论等操作有大群钉钉提醒已积累24个问题

工具埋点 - @fe/turing

背景：业务项目每个公司应该有通用的方案统计使用数据对内部使用技术项目无法了解使用情况从而无法量化产出
目标：添加一个能够对技术工程的埋点并可视化展示数据
成果：目前接入3个技术项目推广较差

模块更新通知 - @fe/module-update

背景：随着业务增多我们积累的npm包越来越多维护也是个大问题谁都有权限去更改改了又没有及时通知
目标：每个模块都要有唯一的维护人每次版本升级都要大群通知
成果：脚手架项目模板默认添加 @fe/module-update 观察version 只要改动就比较历史版本推送与上一次推送差异的Git commit

图片压缩 - @fe/compress

背景：活动项目图片非常多每次导出的图片都要使用 tinypng 手动压缩费时费力
目标：需要一个自动化的工具处理图片
成果：参考git工作区概念实现按需压缩只压缩当前工作区中指定范围的图片老项目提供一键压缩整个项目的图片
文章：【建议收藏】优雅的前端图片压缩

Doric骨架屏

背景：对于使用H5实现的业务功能加载过程会有loading状态容易让用户产生等待焦虑
目标：对于常用的页面提供跨端的骨架屏方案
成果：已完成两个APP中两个项目的尝试还需要对等待时间较短的页面做优化处理

埋点测试平台

背景：测试环境埋点的测试都是通过抓包的方式查看人力成本较大大型活动项目近百个埋点上报所有场景测下来要1天的工作量上线后埋点数据量庞大无法实时观察
目标：解决测试环境埋点自动化测试问题节约人力时间成本，提高了埋点测试的准确性
成果：监听埋点上报消息落入新的实时库对库中的数据进行处理记录上报数量校验参数的准确性测试环境功能测试完成直接在平台可以导出测试报告省时省力

截屏2022-02-07 20.40.06.png

换肤工具 - @fe/theme-webpack-plugin

背景：部分H5页面需要嵌入两个风格差异较大的APP 所以有两套皮肤的需求
目标：css变量方式，webpack plugin抽象成工具
成果：项目中使用具体变量使用 background-color: var(--bg-color-1)这种方式使主题生效；切换主题，使用插件提供的 toggleTheme() 方法，通过修改link 的href属性推广较差需要跟随业务迭代进行

新手引导 - tool-guide

背景：新手引导功能每次开发周期也不长手快的同学可能几个小时就好了，但是没有技术点，重复劳动。为了解决这类问题
目标：我们要做一个通用的，争取下次再有类似的需求，1分钟搞定
成果：第一次进入项目，能够高亮页面中的元素，在元素的各个方向都可以加入解释指引，点击跳到下一步，直至完成新手引导，下一次进入项目不展示新手引导，由于解释指引部分灵活性较高，采用输出图片的方式
文章：vite + vue-ts 十分钟撸一个新手引导

H5容器检测工具

背景：客户端同学在版本迭代完成、提审发布时可能会对webview 产生一定的影响导致H5正常的功能不可用人肉通知可能有遗漏不够智能和自动且经历过几次线上问题了，迫切需要一个能够提前检查容器功能的工具
目标：产出工具客户端发版前测试在每个webview使用工具跑一些用例帮助检测各个位置的功能是否正常测试完成后如果会有异常会在【bridge 更新通知】群艾特对应的客户端研发
成果：帮助研发发现问题，已推广给测试同学使用

还有一些进行中和后续使用率较低的就省略啦。。。。。

期望我们这个团队在前端领域也能产生一定影响，团队走出去的每一个小伙伴都能独当一面，以曾在这个团队共事过为骄傲，那就一定要提升团队的影响力。从下半年开始，掘金号共发布文章18篇，今年仍然会大力推进这个事项。