Resume

个人信息

• 邮箱：vincent9466@gmail.com
• 教育背景：2011.09 - 2015.06 中国矿业大学 测控技术与仪器 本科
• 英语水平：CET-6

技能清单

• 前端框架: React, React Native, Next.js, Taro, Vue2/3, UniApp
• 后端框架: Egg.js, Nest.js
• 数据库: MySQL, MongoDB
• API设计: RESTful API, GraphQL
• 状态管理: Redux, MobX, Vuex, Pinia, Zustand
• 构建工具: Webpack, Vite, Babel
• CSS预处理器: Sass, Less, Styled-components
• 版本控制: Git, GitHub, GitLab
• 其他: TypeScript, ES6+, Tailwind CSS, Antd, ElementUI, Docker, Nginx

工作经历

上海奥提加斯软件开发有限公司 高级前端工程师（2024.02-2025.02）

• CEX交易所，提供加密货币投资交易服务。

四川诺一实业有限公司 高级前端工程师（2023.02-2024.02）

• 四川诺一实业有限公司是一家位于四川省的企业，主要从事多元化业务，涵盖能源、环保、科技等领域，目前主要业务是为电器工程服务。

红松在线成都分公司 高级前端工程师（2021.02-2023.01）

• 红松在线（Red Pine Online）是一家专注于中老年人群在线教育和服务的企业，致力于通过互联网平台为中老年人提供兴趣课程、社交互动和健康管理服务。

米其林（中国）投资有限公司 前端工程师（2015.10-2020.12）

• 米其林（中国）投资有限公司是法国米其林集团在中国的子公司，主要负责米其林在中国市场的业务运营和发展。

项目经验

Coins交易平台（2024.02-2025.02）

• 项目来源：上海奥提加斯软件开发有限公司
• 项目背景：负责公司核心交易平台的前端基建与功能开发，技术栈包括 Next.js、Docker、AWS S3 和 K8s等。
• 技术栈与工具：
  1. 前端技术：Next.js、React、Mobx、Tailwind、ECharts、TradingView、i18next、Typescript。
  2. 工具：Localize、Docker、K8s、AWS S3。
• 团队成员：大前端20人（web 10人） 后端8人
• 个人职责：
  1. 前端基建搭建与优化：
     • 基于 Next.js 搭建高性能、可扩展的前端架构，支持 SSR（服务端渲染）和静态生成（SSG）。
     • 使用 Docker 容器化前端应用，编写Dockerfile。
     • 集成 AWS S3 实现静态资源托管，通过 CDN 加速资源加载，提升用户体验。
  2. 核心功能开发：
     • 负责交易平台持仓栏模块的开发，实现实时数据展示、交互优化和性能提升。
     • 参与 K 线图功能的开发，集成第三方图表库（ECharts + TradingView），支持实时行情数据的渲染与交互。
  3. 性能优化与监控：
     • 通过代码分割、懒加载和缓存策略优化页面加载性能，关键页面首屏加载时间减少 30%。
     • 实现前端错误监控和性能监控，使用 Sentry 和自定义指标提升系统的可观测性。
• 项目成果：
  1. 成功交付持仓栏和 K 线功能，支持日均 10 万+ 用户稳定访问。
  2. 通过基建优化，团队开发效率提升 20%，部署流程从小时级缩短至分钟级。
• 项目挑战与解决方案：
  1. 前端性能优化
  • 交易页面包含复杂组件（K 线、持仓栏），首屏加载时间长。
  • 频繁数据更新导致页面卡顿。
  • 解决方案：
    1. Next.js 优化：
       • 使用 SSR 预加载关键数据，结合 SSG 缓存静态页面。
       • 通过 dynamic import 实现代码分割，按需加载非关键组件（如图表库）。
    2. 资源优化：
       • 利用 AWS S3 + CDN 加速静态资源加载。
    3. 内存管理：
       • 在 K 线组件中销毁非可视区域的历史数据，避免内存泄漏。
  2. 状态管理与数据一致性
  • 持仓栏和 K 线需要跨组件共享实时数据，状态同步复杂。
  • 用户操作（如下单）与后端数据一致性难以保证。
  • 解决方案：
    1. 全局状态管理：
       • 使用 Mobx 管理全局状态（如用户资产、行情数据）。
       • 对高频更新数据（如行情）采用不可变数据结构（Immutable.js），减少渲染开销。
    2. 本地缓存策略：
       • 通过 localStorage 缓存用户持仓数据，提升二次加载速度。
       • 使用 SWR 实现客户端数据缓存和自动重试。
    3. 乐观更新（Optimistic Update）：
       • 在用户下单时，先本地更新持仓数据，再向后端提交请求，失败后回滚状态。

新易服 App（2023.02-2024.02）

• 项目来源：四川诺一实业有限公司

• 项目背景：随着企业业务的不断发展，对工程师的日常工作管理变得越来越重要。为了提高工作效率、加强团队协作和提升管理水平，公司决定开发一款新易服 App，用于工程师的任务分配、进度跟踪、问题反馈和知识共享。

• 技术栈与工具：

  1. 前端技术：React Native、Redux、Typescript、i18next。
  2. 数据管理：Realm。
  3. 工具：Flipper、Localize、Pushy。

• 团队成员：前端6人 后端3人

• 个人职责：

  1. 作为Team Leader，参与项目的需求分析和技术选型，确定使用 React Native 进行开发，Redux 进行数据管理，Realm 进行离线数据读写，i18next实现国际化。
  2. 作为开发，负责 App 的页面设计与开发，包括工单列表、工单详情、事项填报页面、工作台等页面，负责设计和开发前端数据离线操作和同步逻辑。
  3. 与后端团队进行接口对接，设计本地Realm表字段结构，确保数据的正确传输和处理。
  4. 负责项目的发布上线工作，集成Pushy平台实现热更新包的推送。
  5. 优化 App 的用户体验，提高页面加载速度和响应性能。

• 项目成果：

  1. 功能实现：
     • 实现了工程师的任务分配、进度跟踪、费用报销等核心功能。
     • 提供了简洁直观的用户界面，方便工程师快速了解任务信息和进行操作。
     • 支持离线数据读写，确保在极端环境下网络不稳定时也能正常使用 App。
  2. 性能提升：
     • 通过优化页面渲染和数据缓存机制，提高了页面加载速度和响应性能。
  3. 业务价值：
     • 提高了工程师的工作效率和管理水平，减少了任务分配和进度跟踪的时间成本。
     • 加强了团队协作和沟通，及时解决问题和分享知识，提高了项目的质量和进度。
     • 为企业提供了一个便捷的管理工具，有助于更好地了解工程师的工作情况和项目进展。

• 项目挑战与解决方案：

  1. 数据管理的复杂性。
     • 解决方案：深入学习 Redux 和 Realm 的使用方法和最佳实践，设计合理的数据结构和管理流程。进行数据优化和缓存处理，提高数据的读写性能和响应速度。建立数据备份和恢复机制，确保数据的安全性和可靠性。
  2. 项目进度紧张，需求变更频繁。
     • 解决方案：制定详细的项目计划和进度表，合理安排开发任务和时间节点。加强与业务团队的沟通和协作，及时了解需求变更和调整项目计划。采用敏捷开发方法，快速响应需求变更，确保项目按时交付。

新易服派单小程序（2023.02-2024.02）

• 项目来源：四川诺一实业有限公司
• 项目背景：随着企业业务的不断发展，对工程师的日常工作管理变得越来越重要。为了提高工作效率、加强团队协作和提升管理水平，公司决定开发一款新易服派单小程序，方便区域经理在移动端进行派单。
• 技术栈与工具：Taro、Zustand、Typescript。
• 团队成员：前端6人 后端3人
• 个人职责：
  1. 作为Team Leader，参与项目的需求分析和规划，提出技术可行性建议。
  2. 作为开发，利用 Taro 框架进行小程序的前端开发，包括页面布局、交互设计和功能实现。
  3. 与后端开发团队紧密合作，进行接口对接和数据交互，确保小程序的稳定运行。
  4. 进行小程序的性能优化，提高页面加载速度和响应时间，提升用户体验。
  5. 参与项目的测试和上线工作，确保小程序的质量和稳定性。
• 项目成果：
  1. 功能实现：
     • 成功开发了新易服派单小程序，实现了派单、接单、任务进度跟踪、客户评价等核心功能。
     • 提供了简洁直观的用户界面，方便用户操作和查看任务信息。
  2. 性能提升：
     • 通过优化代码结构和数据加载方式，显著提高了小程序的性能，页面加载速度大幅提升。
  3. 业务价值：
     • 提高了派单效率和服务质量，满足了客户和服务人员的需求。
     • 为公司的业务发展提供了有力支持，提升了公司的竞争力。

新易服数据橱窗（2023.02-2024.02）

• 项目来源：四川诺一实业有限公司
• 项目背景：为了实现对客户数据的全面管理，提高数据的利用效率和管理水平，开发了数据大屏系统。该系统涵盖物料管理、流程管理、报表展示、权限管理等多个重要模块，旨在提供一个高效、可靠的数据管理平台。
• 技术栈与工具：React.js、Zustand、Antd、Echarts、Typescript。
• 团队成员：前端6人 后端3人
• 个人职责：
  1. 作为 Team Leader，负责需求理解与业务逻辑实现：
     • 剖析项目的业务需求和功能要求。
     • 拆解并合理分配任务。
  2. 作为 Team Leader，负责项目搭建与计划制定：
     • 负责项目的整体搭建工作，包括技术选型、架构设计等。
     • 制定详细的项目计划，明确各个阶段的任务和目标，确保项目按时推进。
     • 注重代码的规范性和质量，进行严格的 Code Review，确保代码的可靠性。
  3. 作为开发，负责技术难点攻克：
     • 统一封装了图表组件，统一管理图表配置，做到了业务数据和 Echarts 的 Option 样式配置数据分离。
     • 统一解决了窗口缩放时的图表的适应问题, 解决了窗口缩放引起的 Echarts 图形变形的问题。
     • 按需引入 Echarts 图表，减少打包体积的大小（全量引入按需引入 打包后的体积减少了三分之一）。
     • 解决了大屏适配(在 2k、4k， 8k 屏幕下)的问题并封装成了组件在团队各个项目中使用，提升了项目研发效率。
  4. 作为开发，负责后台管理代码编写与公共组件开发：
     • 二次封装基于Antd的公共组件，提高代码的复用性和可维护性。
     • 承担大模块的后台管理业务代码编写任务，确保后台管理功能的高效实现。
• 项目成果：
  1. 功能实现：
     • 成功开发了数据橱窗系统，实现了对客户数据的全面管理。
     • 物料管理、流程管理、报表展示、权限管理等模块功能完善，满足了业务需求。
  2. 性能提升：
     • 通过优化代码结构，提高了系统的性能和响应速度。
     • 采用合理的缓存策略，减少了数据的重复加载，提高了系统的效率。
  3. 业务价值：
     • 为公司提供了一个高效、可靠的数据管理平台，提高了数据的利用效率和管理水平。
     • 帮助产品更好地了解客户需求，为业务决策提供了有力的数据支持。

红松用户端直播间、老师端直播间、红松小站（2021.02-2023.01）

• 项目来源：红松在线成都分公司
• 项目背景：为了满足用户对直播互动的需求，进行项目集重构。涵盖了基于多种技术栈开发的多端直播间及相关功能，旨在提供丰富的直播体验和高效的用户增长途径。
• 技术栈与工具：
  1. Taro + Mobx + Typescript（学员端）
  2. React Native + Mobx + Typescript（老师端）
  3. Next.js（SSR）（活动页）
  4. Egg.js + GraphQL（BFF层）
• 团队成员：原生2人 前端8人 后端5人
• 个人职责：
  1. 框架选型与项目搭建：
     • 前端工程选择基于 pnpm 的 monorepo 架构。
     • 参与项目框架的选型过程，结合项目特点和技术需求选择最优方案。
  2. 基础功能组件开发：
     • 封装Socket信令工具包，处理如广播、打赏、送礼等消息。
     • 封装Bridge方法工具包，提供如投屏、小窗播放、设备信息获取等功能。
     • 封装数据埋点上报工具包，提供pv/uv数据，业务数据，错误信息等收集和上报。
  3. 业务代码开发：
     • 按照业务需求开发学员侧多端直播间（Taro），老师侧直播间（React Native）。
     • 按照业务需求开发基于Next.js的运营活动项目。
     • 基于Egg.js + GraphQL 开发BFF层，处理接口聚合和数据组装。
  4. 功能测试与优化：
     • 参与上线前的功能测试，及时发现并解决问题。
     • 对系统进行性能优化，提升用户体验。
• 项目成果：
  1. 功能实现与创新：
     • 成功构建了多端直播间体系，包括红松用户端直播间、老师端直播间以及红松小站，满足了不同用户群体的需求。
     • 在直播间中实现了丰富的功能，如拉流技术确保流畅的视频播放，直播间无限滑动让用户轻松浏览内容，连麦功能增强互动性，IM 信令保障实时通信，弹幕和抽奖、送礼特效等功能增添了娱乐氛围，分享功能则扩大了直播的传播范围。同时，对直播间边界问题进行了妥善处理，提升了用户体验的稳定性。
     • 红松 IM 群聊 Hybrid 项目的开发，为用户提供了便捷的群组交流平台，进一步增强了用户之间的互动和社交性。
     • Next 的红松用户增长项目的研发，通过有效的策略和技术手段，成功吸引了更多用户参与直播，为平台的发展注入了新的活力。
  2. 性能优化与稳定性提升：
     • 对三端公共组件包进行开发和维护，提高了代码的复用性和可维护性，同时也优化了系统性能。
     • 通过 Node 的 BFF 服务聚合层的开发和维护，实现了高效的数据传输和处理，提升了系统的响应速度和稳定性。
     • 对直播间的性能进行了全面优化，包括降低网络延迟、提高视频加载速度、优化交互响应时间等，确保用户在直播过程中能够享受到流畅的体验。
  3. 用户体验改善：
     • 经过不断的优化和改进，直播间的界面设计更加简洁美观，操作更加便捷流畅，大大提升了用户的满意度。
     • 用户培训的开展，使得用户能够快速熟悉系统的操作和功能，减少了用户的学习成本，提高了用户的使用效率。
  4. 业务增长与价值创造：
     • 该项目的成功实施，为红松带来了显著的业务增长。直播间的用户活跃度和参与度大幅提高，用户留存率也得到了有效提升。
     • 通过优化进入 APP 的白屏时间和提高页面组件及逻辑的复用率，降低了开发成本和维护成本，提高了开发效率，为企业创造了更大的价值。

红松 CRM 管理平台（2021.02-2023.01）

• 项目来源：红松在线成都分公司
• 项目背景：为了提升企业的运营管理效率，开发了基于Qiankun，Umi.js和Egg.js的红松 CRM 管理平台，以满足企业对客户关系管理的需求。
• 技术栈与工具：
  1. 前端：Qiankun + Umi.js + React.js
  2. 后端：Egg.js + GraphQL
• 团队成员：前端8人 后端5人
• 项目职责：
  1. 需求沟通与模块拆分：
     • 与运营团队密切沟通，深入了解业务需求。
     • 根据需求进行模块拆分，确保项目的功能结构清晰合理。
  2. 框架选型与项目搭建：
     • 参与项目框架的选型，结合项目需求和技术特点，前端部分选择基于Qiankun的微前端架构，子应用均基于Umi.js开发，后端部分使用 Egg.js 配合 GraphQL 搭建 BFF 服务。
     • 负责项目的搭建工作，包括环境配置、项目结构设计等。
  3. 前端开发：
     • 实现设计稿前端页面的布局，注重用户体验和界面美观性。
     • 开发动态交互效果，提升用户操作的便捷性和流畅性。
  4. 接口开发：
     • 基于业务需求设计并开发所需要的接口。
  5. 功能测试与优化：
     • 参与上线前的功能测试，及时发现并修复问题。
     • 对系统性能进行优化，提高响应速度和稳定性。
• 项目成果：
  1. 功能实现：
     • 成功开发了红松 CRM 管理平台，实现了客户信息管理、销售管理、数据分析等核心功能。
     • 提高了企业的运营管理效率，为企业决策提供了有力支持。
  2. 性能优化：
     • 通过优化代码，提升了系统的性能和响应速度。
  3. 用户满意度：
     • 经过用户培训和持续优化，用户对系统的满意度较高。
     • 系统的易用性和实用性得到了用户的认可。

Aviation 米其林国航合作项目（2019.03 - 2020.10）

• 项目来源：米其林（中国）投资有限公司
• 项目背景：该项目旨在为米其林与国航的合作提供商品订单配送服务，涵盖轮胎收货、退货、装配等重要业务环节，以满足双方合作中的物流及服务需求。
• 技术栈与工具 React.js + ElementUI
• 团队成员：前端4人 后端2人
• 个人职责：
  1. 系统权限分配模块开发：
     • 负责系统权限分配模块的业务功能实现，根据不同用户角色和业务需求，设计合理的权限体系并封装 usePermission Hook。确保用户能够在其权限范围内安全、高效地进行操作，保障系统的安全性和数据的保密性。
     • 进行严格的测试和验证，确保权限分配的准确性和稳定性。
  2. 基础公共组件开发：
     • 负责编写基础公共组件，提高代码的复用性和可维护性。通过二次封装基于 ElementUI 的常用的组件，减少重复开发工作，提高开发效率。
     • 遵循良好的编程规范和设计模式，确保组件的质量和性能。
  3. 业务模块开发：
     • 基于业务需求实现了轮胎收货、退货、装配等关键业务模块。
• 项目成果：
  1. 功能实现与业务支持：
     • 成功构建了商品订单配送服务系统，实现了轮胎收货、退货、装配等关键业务模块的功能。为米其林与国航的合作提供了有力的技术支持，提高了物流配送效率和服务质量。
     • 系统权限分配模块的有效实现，保障了系统的安全性和数据的保密性，满足了不同用户角色的业务需求。
  2. 开发效率提升：
     • 通过编写业务和基础公共组件，提高了代码的复用性和可维护性，大大缩短了开发周期，提高了开发效率。
     • 数据联调的顺利进行，确保了前后端的高效协作，减少了开发过程中的问题和冲突。
  3. 质量保障与用户体验：
     • 严格的测试和 bug 修复工作，确保了系统的稳定性和可靠性，提升了用户体验。用户能够在系统中方便、快捷地进行操作，提高了工作效率。

米其林随你行、驰加、百路驰业务线需求（2015.10 - 2018.11）

• 项目来源：米其林（中国）投资有限公司
• 项目背景：为了提升米其林各业务线服务的便捷性和用户体验，打造一系列数字化项目，包括道路救援项目、经销商活动项目以及促销宣传项目。
• 技术栈与工具：Vue全家桶 + Vant + ElementUI
• 团队成员：前端10+人 后端10+人
• 个人职责：
  1. 米其林随你行、驰加、百路驰 webapp：
     • 基于 Vue 全家桶 + Vant 开发各条产品线C端项目。实现各种功能模块，如用户注册登录、服务查询、订单管理等。
     • 基于 Vue 全家桶 + Vant 开发米其林道路救援项目。实现用户定位、救援请求提交、救援进度跟踪等功能，确保在紧急情况下能够及时为用户提供帮助。
     • 基于 Vue 全家桶 + ElementUI 开发经销商中奖查询项目。实现经销商信息录入、中奖结果查询、数据统计等功能，方便经销商参与活动并了解中奖情况。
  2. 开发促销宣传活动页：
     • 基于 Vue 全家桶 + Animate.css + 原生CSS动画 开发促销宣传活动页，提高用户参与度。实现活动规则展示、用户互动、奖品领取等功能，促进促销活动的顺利进行。
• 项目成果：
  1. 功能实现与业务价值：
     • 成功开发了道路救援项目、经销商活动项目以及促销宣传项目，为用户和经销商提供了便捷的服务和参与渠道。
     • 用户可以通过 webapp 随时随地查询产品服务信息、提交道路救援请求，经销商可以通过中奖查询项目了解活动结果，促销宣传活动页则吸引了更多用户参与，提升了品牌知名度和影响力。
     • 提高了米其林产品服务的效率和用户满意度，为业务发展带来了积极的推动作用。
  2. 技术创新与团队成长：
     • 在项目中运用了 Vue 全家桶，提升了团队的技术水平和创新能力。 团队成员在前端开发、用户体验设计、项目管理等方面积累了丰富的经验。
     • 通过不断优化和改进项目，提高了开发效率和质量，为今后的项目开发提供了宝贵的经验和参考。

个人简介

• 9年经验的前端开发工程师，专注于构建高效、可维护的前端应用。
• 熟练掌握React、React Native、Vue2/3等技术栈，具备丰富的跨平台开发经验。
• 擅长从0到1搭建复杂的前端架构，优化性能，提升用户体验。具备良好的团队协作能力和项目管理经验，能够带领团队高效交付高质量的产品。

自我评价

• 对前端技术充满热情，不断学习和探索新的技术和方法。
• 具备良好的团队协作精神和沟通能力，能够与不同岗位的人员合作完成项目。
• 工作认真负责，注重细节，能够高质量地完成任务。
• 有较强的问题解决能力和抗压能力，能够在紧张的项目周期中保持高效工作。