个人介绍
掌握 Web 相关技能和框架
熟练使用 Vue、React 及相关工具进行 Web 开发,熟悉 MUI、Element UI、amis 等 UI 框架和各种 CSS 预处理器、后处理器语法的使用,有过 Hybrid App、微信小程序和 Node.js 服务端应用开发经验
掌握 Vite、Webpack 和 Rollup 等常见构建工具打包和前端应用优化经验,熟悉常见 CI/CD 工具配置和类 Unix 系统使用,掌握常见网络问题排查工具 Whistle、Wireshark 的使用,掌握部分 Git 高级特性
持续知识积累、探索新技术、分享
常在 独立博客SegmentFault 社区掘金社区和公众号中分享技术文章,在公司任职过程中多次组织前端技术分享;个人简历也长期在 Google 前端简历关键词中位于第一页
对 WebAuthn、Serverless、PWA、WASM 和 AIGC 等新技术持续关注,在项目组内缺乏 Cocos 开发者情况下短时间内学习并使用 Cocos Creator 并上线一个项目
开源项目、产品设计经验
曾参与开发过多个开源项目:「基于 OpenAI GPT 与 Azure Speech 的 AI 对话工具」、「基于人工智能合成的语音工作台」和「Bob 火山引擎翻译插件」等
熟悉敏捷开发的方式与流程(Scrum),具有从原型设计到前后端开发的能力,有过使用 Figma 等设计工具创建基础项目原型,编写产品文档、埋点文档到实际开发上线的经验,并为产品用户编写完整使用说明
工作经历
广州荔支网络技术有限公司(荔枝集团) - 前端开发工程师
先后负责内容业务、社交业务和互动娱乐业务等前端开发工作;负责多款研发效能改进工具的开发;负责部分 AIGC 技术调研与项目开发;低代码运营平台维护;直播间 Web 页面特效开发;Unity 游戏业务 JSBridge 设计等工作
参与编写、审核公司新版前端规范;开发前端代码审核工具;跨中心参与公司前端构建平台改进
广州滴普科技有限公司 - 前端开发工程师
负责前端项目交付、公司 JSONForm 组件库维护、新技术预研、前端分享等工作
参与前端业务脚手架维护,负责业务项目 Composition API,TypeScript等接入工作,后续应用到了公司十余个项目中
成都喜元网络科技有限公司(喜马拉雅)- 前端开发工程师
负责喜马拉雅配音平台开发、方案调研、开发脚手架搭建等工作
上海易贷网金融信息服务有限公司 - 前端工程师
负责 BI 页面制作,周期性数据导出,微信公众号开发,社交小程序开发,Web 页面开发等工作
近期项目经历
AIGC 项目研发 - egg.js&React
介绍:该项目由对话式语音人工智能项目(AIGC-BOT)与 Gitlab Merge Request 审核工具项目两部分组成。其中 AIGC-BOT 项目使用 React&MUI 框架与 egg.js 进行开发,采用 Prisma+MongoDB 进行对话信息存储,语音方面由客户端 Native 语音与 Azure 语音相结合的方式节省第三方服务费用,开发过程中对 SSE 流式响应处理相关经验应用到团队为公司内部开发的 ChatGPT 项目中
Gitlab Merge Request 是一个使用 OpenAI GPT 进行 Code Review 审核的流水线工具,可根据使用者提交的代码或创建的合并请求自动分割上下文请求 AI 审核,审核完成后可在 Gitlab UI 中一键应用,具有根据逐行代码提供建议、增量持续审阅和智能跳过审阅等功能
Lizhi JSSDK Chrome Extension - React
介绍:该项目为一个Chrome 浏览器扩展,目的是改善客户端内 Web 页面开发体验,可在开发阶段代替客户端内 JSBridge 实现在浏览器上模拟调用客户端方法,也可用于在携带参数后快速验证页面缺陷。该扩展面向开发和测试运营两类不同的使用人群,设计了两套不同复杂度的使用界面,前端开发人员可以使用较为完整的模拟数据功能实现新 API 的开发,测试人员提供部分参数可实现在浏览器端进行测试的功能
在项目周期内一共发布 11 个版本,建立了完整的缺陷收集和埋点数据收集体系。在持续集成与发布方面使用了 Gitlab 流水线自动化对合并后的代码进行快速构建集成,是公司内首个在 Chrome Extension Store 上架的浏览器扩展
公司级前端规范与代码提交检测工具 - Node.js
介绍:该项目由公司前端代码规范和代码提交检查工具两部分组成。其中公司前端代码规范包括 HTML、CSS、JavaScript 与 Git 提交规范,由成员在社区内多份代码规范的修订整合后经过公司前端代表团队的审核后发布,后续考虑到代码规范执行情况后启动了「代码提交检查工具项目」,通过简单的配置实现针对代码库分支的自动或手动扫描,可以维护项目代码规范问题和安全问题,提升前端整体编码质量。
代码提交检查工具包括项目集成、代码扫描、提交检查与升级模块组成,能扫描 Node.js 、React、Vue 与 Vanilla JavaScript 项目中存在的,其中代码扫描使用 ESLint、Stylelint、Prettier 等进行,提交检查由 husky 与 commitlint 进行,工具由 npm private register 提供版本信息结合相应时机进行检查提醒工具升级,在 Gitlab 上可针对不同的问题的级别进行设置合并门槛
该项目 1.0 版本完成后公司内有数十个项目开始使用,一段时间后大部分前端项目编码风格保持一致,多人开发不再出现提交代码后代码格式被反复更改的问题,同时一定程度上降低了低级 bug 发生的概率
前端构建平台 - React&Koa.js
介绍:该项目通过对 Jenkins 流水线的创建和执行进行抽象和集成,通过增加用户权限控制、通知、监控等功能实现提升公司前端项目的发布效率
在这个项目过程中,完成了对 Cocos Creator 项目区别于传统前端项目的构建方式的改造,解决了 Cocos 项目原本地打包方式中的低效、交付慢问题,同时为业务团队 App 内置 Web 静态页面技术提供了支持;完成了构建日志 ANSI Color 的处理,解决构建日志查看不方便的问题;
研发效能平台 - 中后台系统 - Vue
介绍:该项目是一个敏捷开发管理平台,用于管理软件开发流程中各迭代的开发进度。项目基于 Nuxt.js&qiankun 与微前端主应用对接
负责 TypeScript 和 Vue Composition API 的接入,保障类型检查和分享接入总结
负责开发模块的 Cypress 测试用例编写,保障产品质量并总结Cypress 使用感受
某微信 B2C 商城 - Vue
介绍:该项目为一个上亿交易量,数十万使用用户的微信商城平台。分为商城管理系统和微信商城两个部分,在项目内负责开发、重构项目内子模块代码,并对整个代码进行前端性能优化,并分享文章
项目进展中微信海报分销裂变玩法,针对客户对海报图片上传效果不满意的问题,做了 Canvas 海报预览方案,得到了客户满意的评价
项目后续研发过程中从本地开发打包上线带来的效能问题,研究基于 Gitlab 搭建 CI/CD 相关流程,使构建效率得到提升
由于开发人员人员变动频繁,出现了开发代码质量问题,使用代码格式化相关工具(ESLint、husky等)对代码对项目组提交代码进行规范化,并组织 Code Review 保障代码品质
负责接入 Sentry 前端监控系统,保障及时发现线上环境运行异常
喜配音 — 喜马拉雅 ToB 端配音平台 - Vue
负责对项目 webpack 配置进行优化,提升页面体验,实现部分页面预渲染
负责实现一个 HTML5 音频播放器,并在新主播平台公用维护
解决后端资源消耗问题,迁移部分需求至前端实现(大文件下载等)
逛街资讯 - 移动端社交资讯服务 - 小程序/Vue
介绍:该项目是针对成都地区室内商场导览和资讯的微信公众号和小程序,使用同一套代码分别发布小程序和 Web 端页面
独立负责小程序和公众号的开发。与设计人员配合,完善设计规范和实现公共组件库
项目中为解决 SPA 在微信 X5 内核浏览器的各种兼容性问题,总结并分享了相关微信分享问题的解决方案
微信小程序基于 Tencent/wepy 项目开发,为解决 Postcss 使用问题,开发 PostCSS Compiler 并得到了官方仓库 merge
故宫阅读 - B2C商城 - Vue/Hybrid App
独立负责基于 Cordova 与 Vue.js & vux 开发的 Hybrid App 开发,同一份代码兼容微信端版本,实现一套代码能同时运行在客户端与微信端的目标
对接微信 JS-SDK 与 Android / iOS SDK,保障两端用户体验
打包发布测试版本,熟悉 iOS 和 Android 平台相关打包发布配置
基于 Node.js 的个人博客 - egg.js
博客和个人首页基于 Node.js 开发,和语雀文档一起用于记录学习资料文档和实验新 Web 特性
对于移动端设备和 PC 端设备访问分别使用懒加载和服务端渲染方案,保障用户体验和 SEO
首页基于 PWA 技术实现合理利用 Cache Storage 为保障弱网、断网用户体验
基于 HTML5 语义化标签和其他技术方法,探索视障人群无障碍体验
持续对项目进行性能优化,Lighthouse 评分保持 90 分以上
接入 Node.js 性能分析与监控平台,对内存泄漏等不易察觉问题进行及时监控
基于 Electron 的影视客户端
跨平台(Windows/MacOS/Web)支持,了解 Electron 中 Web 与 Node.js 通信方式
响应式布局,同一套代码适配桌面端与移动端
基于 SDK 实现批量下载功能,JSSDK 调用迅雷下载软件
基于 Node.js 的职位筛选爬虫
API 来源于客户端和小程序 HTTPS 抓包,了解 Charles 等工具的使用
使用 MongoDB 的数据存储模型,对数据进行清洗和存储
实现一个 Web 界面,可在地图上根据使用者需求对职位进行筛选展示
使用 Docker + Jenkins Pipeline 实现自动构建部署,使部署发布更简便
教育经历
黑龙江科技大学 - 工学学士 化学工程与工业
网易前端微专业