if 我是前端团队 Leader，怎么做好概要设计

写作建议：

• 结论先行
  • 为了更有效地传递观点，也为了让他人更高效地理解自己的观点，避免陷入细节争议而因小失大，一个重要的方式是结论先行，先讲观点，在展开陈述论点和论据
• 重点突出
  • 牢记“≤3”原则，去繁从简，层次分明，优先讲最重要的事情
• 逻辑清晰
  • 一篇没有逻辑的文档，容易让人感到混乱、没有重点，也会让人感到写作人思路不清，没想清楚。因此，一篇逻辑清晰的文档，既能帮助读者理解写作者的思路与意图，写作过程本身也能够帮助写作者梳理自己的思路、提高思考的深度
• 数据驱动
  • 我们的工作，尽量落到有数据支持的OKR指标上；我们的决策，应该有有效、扎实的数据支撑

附：扩展阅读《金字塔原理》

个人理解的基本结构👇

• 过去：亮点经历/贡献(落地和数据支撑，以及过程解决的问题)
• 未来：展望(可以虚，讲他人想听的如:带来个人独有的创新能力)

✅一、基本情况介绍

✅1、个人履历及入职感受

个人履历： 19年毕业，有4年银行金融行业前端开发经验，负责过信用卡分期、基金购买、基金图表展示等复杂业务开发，后来担任主要功能是低代码平台的内容发布业务线的前端组长，牵头把公司里的基建脚手架从webpack3升级到5提升构建速度。并持续关注项目性能优化，把逐渐增加的积木组件通过webpack打包成异步组件，实现运行时按需加载，引入pwa优化低网速资源加载等措施

入职感受： 入职以来，个人的感受是转转是一个注重解决实际问题并且勇于创新的团队，比如接入AI技术解决客服系统的实际问题。 在前端技术上会非常注重实际问题的解决，而不仅仅是追求技术的炫耀。比如离线包机制、插件走查工具、sentry工具等完善的大前端生态，都在实际场景下提高了我的开发效率，是真正的生产力工具 也让我在开发过程中，始终注重用户体验和功能的稳定性，并且不断探索和应用新的前端技术，以提升应用的质量和用户满意度。 而我负责的线下门店项目，还能接触到不少除了浏览器的设备，如：门店大屏、条码打印机、扫描枪等设备，这些丰富的前端生态，都让我接触到了新的东西，拓展了我的技术广度。

另外，得益于小师傅极致，我也受到了来自资深前端开发工程师的指导和支持。小师傅会很愿意与我分享公司的经验和知识，并帮助我解决遇到的问题。这种一帮一的机制使我能够迅速融入团队，快速成长，并且感受到了团队的关怀和支持。

团队氛围也积极向上，注重合作和分享。团队成员之间互相支持，共同解决问题，共同努力实现团队的目标，在整个过程中运营、产品、前端、后端、测试都认真沟通互相理解一起解决问题，而不会出现扯皮的问题。这种团队氛围让我感到非常温暖和舒适，也激发了我更好地发挥自己的能力和贡献团队的动力。

✅2、岗位职责和工作价值理解

岗位职责： 主要负责线下门店业务的功能开发

1. 功能开发：主要负责线下门店业务线的开发，包括：熊店长店员端M页(APP、H5、企微)、小程序、Pad端、大屏端、门店后台、估价器等微前端后台、千帆项目(小程序、后台)、门店Nodejs服务，也会在有需要时支援帮卖业务开发
2. 技术和业务理解提高：提高自己的技术水平和业务熟悉程度，学习新的技术和框架，举一反三，提高代码质量。
3. 团队协作：积极参与团队协作，与产品、后端、测试密切合作共同解决问题，提高团队的工作效率和合作水平，确保项目的顺利进行。并积极参与技术分享，营造好的团队氛围

工作价值 对于我的工作价值，我理解为以下几点：

1. 业务价值：关注线下门店业务的功能和用户体验。通过高质量的前端开发，我可以提供稳定、高效、易用的用户界面，为用户带来良好的使用体验，提升回收业务的用户转化率和用户满意度。
2. 技术价值：不断学习和掌握最新的前端技术和行业最佳实践。通过技术的引入和优化，可以提升前端开发的效率和质量，减少bug和问题的出现，提高项目的交付质量和可维护性。
3. 团队价值：作为团队的一员，积极参与团队协作，分享我的经验和知识，与团队成员共同解决问题。通过良好的沟通和合作，可以提高团队的工作效率和合作水平，为团队做出贡献。

二、工作总结(✨60%)

✅1、目标及达成情况

目标一: 快速上手渡过新人期，以专业的姿态胜任开发工作。(100%) 目标二: 提高个人开发效率，在业务开发外帮助团队保证项目质量，优化前端项目 (50%) 目标三: 业务赋能，移动端热力图反显工具，帮助业务直观查看埋点数据 (80%)

目标一: 快速上手渡过新人期，以专业的姿态胜任开发工作。(100%) 1: 熟悉门店、估价器、千帆现有前端项目，快速高质量完成开发交付。熟悉C2B部分项目，在需要时提供人员支援 2: 熟悉现有前端基建工具链（zz-ui、sentry 错误平台、beetle 部署平台、lego 性能监控、adapter 多端通用工具），了解其原理，熟练使用，并能遇到问题快速定位排查 3: 参与成都大运会租借手机后台系统项目，从头搭建一个项目，熟悉从无到上线一个应用的流程（SIC平台、zz-cli、gitlab） 4: 基建源码学习分享，产出文档，熟悉 native-adapter 核心原理，并能借鉴插件机制，运用到业务开发中（扫描枪以插件形式实现规则校验） 5: 技术分享，除组内基建源码分享，还完成了组内分享《web直播技术》，公众号文章输出《2023 Vue开发者的React入门》

目标二: 提高个人开发效率，在业务开发外帮助团队保证项目质量，优化前端项目 (50%) 1: 参与门店项目包管理工具从 npm 迁移至 pnpm，提升依赖安装速度，提高开发效率 2: 后台显示测试环境浮标 3: 参与门店项目构建工具迁移至 vite，提升编译速度，热更新速度提高开发效率，进行中

目标三: 业务赋能，移动端热力图反显工具，帮助业务直观查看埋点数据 (80%) 1: 利用现有高斯后台埋点数据接口，结合 eggjs + puppeteer 在前端实现获取数据，减少后端重复开发接口工作量 2: 熊店长APP首页，业务根据热力图埋点分析，进行改版，优化首页入口，充分利用首页区域，提升使用体验

2、重点工作及进展

背景：目前熊店长-我的页-功能入口太多，查找不便且效率较低，店员体验较差，需要将这些功能归类，放置更合理的位置

技术实现移动端热力图反显工具，帮助业务在手机端进入想查看埋点数据的页面直观查看埋点数据，根据埋点情况对现有熊店长我的页入口进行调整

基于高斯现有的热力图分析能力，实现在移动端反显热力图效果

1: 利用现有高斯后台埋点数据接口，结合 eggjs + puppeteer 在前端实现获取数据，减少后端重复开发接口工作量 2: 熊店长APP首页，业务根据热力图埋点分析，进行改版，优化首页入口，充分利用首页区域，提升使用体验

首先尝试使用 nodejs 服务(门店eggjs项目)，尝试通过模拟登录接口网络请求解决，发现在登录的前端页面有特殊的加解密处理。因此没办法简单的模拟网络请求实现获取登录态。

因此考虑 headless(无头浏览器) ，模拟真实前端交互，来获取登录态。

Nodejs服务侧 功能点一：升级puppeteer ✅功能点二：开发2个接口

1. 获取埋点数据接口(同时作为未登录时返回图形验证码接口)

2. 发起登录获取登录态接口 操作无头浏览器输入表单，点击登录

获取登录接口结果-验证码错误、账号密码错误等

无头浏览器重定向证明登录成功获取cookies

功能点二：迁移虚拟机部署环境到 docker

熊店长店员端侧 功能点一：阿波罗配置用户白名单，显示插件浮窗 功能点二：显示账号密码图形验证码表单 功能点三：渲染热力图蒙层，基于 heatmapinspect 功能点三：手动埋点优化 功能点四：首页重构

遇到的问题（难点

1. 部署问题 docker服务器中使用puppeteer踩坑记录
2. 多进程问题(粘性IP进程分配模式)
3. 多机问题(登录重试机制)

Egg 源码分析之 egg-cluster

• sticky 模式：Master 负责统一监听对外端口，然后根据用户 ip 转发到固定的 Worker 子进程上，每个 Worker 自己启动了一个新的本地服务
• 非 sticky 模式：每个Worker 都统一启动服务监听外部端口

移动端获取到后台系统的 sso_uid 后可扩展展开想象的功能有很多，我们可以打通各种原只在后台实现的一些工具 在这些过程里，我申请线上服务器访问权限，查看服务器日志，排查本地开发时不会出现的问题，甚至本地环境测试环境都不会出现的问题，从多个角度思考、寻找解决方案并灵活应对 通过 nodejs 服务接触到大前端领域，没有前端做不到的事情只有想不到，敢想敢做，发挥想象力和多实验多尝试的精神

3、工作中的亮点、不足、收获与反思（每部分内容小于等于3条）

1）亮点

1. 从业务出发，利用技术，积极解决产品现有的问题，并能从中提升自己的技术水平和知识广度和解决问题的能力
2. 对自己编写的代码要求高，充分考虑复用、封装

2）不足

1. 获取信息集中在业务线内，对整体团队新消息获取不及时
2. 在个人效率方面，有时候在时间安排和任务重要程度分配上没有做到更好的规划和协调。这导致了一些任务的紧迫感和需求任务多时OKR的完成情况不足。

3）收获与反思

1. 我从团队合作中学到了更多的沟通和协作技巧。我意识到只有通过与团队成员的紧密合作和良好的沟通，才能更好地完成项目并实现团队的目标。
2. 在处理项目困难和挑战时，我发展了解决问题的能力。从多个角度思考、寻找解决方案并灵活应对，以确保项目能够按时高质量地完成。
3. 我意识到个人的技术能力需要不断提升和更新。在日常工作中，我会继续学习和研究最新的前端技术趋势，提升自己的技术水平，并更加注重在实践中的应用和总结，并充分利用大神文档的沉淀

三、制定下双月OKR（可直接附其他文件链接）

近期规划：业务、技术、

1. 首页埋点 -> 自动采集埋点的需要
2. 自动埋点xpath

O3: 业务赋能，移动端热力图反显工具，帮助业务直观查看埋点数据

目前埋点开发流程繁琐，需要1. 在统跳平台创建页面，2. 在高斯平台为页面注册区域ID 3. 在区域中注册索引ID 4.定义埋点类型 5.手动重复创建区域ID索引ID 6. 最后在业务代码中绑定元素。 尝试使用 XPath 作为ID的方案实现自动埋点免去注册ID及侵入业务代码埋点。利用移动端热力图埋点工具查看 XPath 元素的埋点数据情况，帮助减少开发埋点的心智负担，提高产品直观分析埋点情况的体验。

继续完善 xpath 埋点自动采集

插件抽象

O1：业务赋能 KR1：XPath自动采集埋点，结合热力图反显工具，减少手动埋点的复杂流程 KR2：后台微前端项目显示当前后端测试环境浮标提示，给产品、测试更友好的体验 KR3： O2：技术赋能 KR1：门店大屏端项目迁移使用vite，提升开发更新编译速度，提高开发效率 KR2：参与门店项目依赖从 node-sass 迁移至 sass，避免开发需要搭建 python 环境，影响开发 KR3：

这些因素使我在入职后感到非常满意，并且对未来在公司的发展充满了信心。我期待能够在这样的环境中不断成长和进步。

• 技术提高：提高自己的技术水平，学习新的技术和框架，提高代码质量。
• 项目完成：参与项目开发，保证项目按时完成，保证项目质量。
• 技术沟通：和团队成员进行有效的技术沟通，提高团队效率。
• 代码复审：参与代码复审，提高代码质量，保证代码符合规范。
• 技术分享：积极参与技术分享，提高团队成员的技术水平。