效能洞察总结

背景

公司架构调整，对研发效能这块逐渐重视起来， 采用和其他部门共同协作的方式，资源整合，达到节省成本和提高效率的目的

项目

1. 前端 依托原有的 metric 基础上 进行了 MVP 版本的结合改造

   • 微前端业务架构设计
   • 路由设计
   • 状态设计
   • 组件层次
   • 图表组件
   • 公共工具
   • 数据源
   • webpack 整合 less

2. 负责的工作

   • 视图列表
   • 视图操作
   • 后台配置方案
     • 方案列表
     • 添加修改方案
   • 图表配置方案（自定义周期）
   • 引导页
   • 视图及图表权限校验
   • 404 及无权限页
   • 文案国际化牵头
   • 创建视图
     • 视图模板分类
     • 项目配置
     • 自定义视图
     • 视图模板
   • 项目组件封装
   • 添加图表交互
   • 全屏功能
   • 自测
     • 提出了较多的问题
     • 对图表有了更深的理解

和司内团队合作，完善效能洞察产品能力

1，对 CODING 全领域进行基础信息采集和报表呈现，实现 58 个主要核心指标

• 共完成需求、缺陷、代码、测试、构建、部署、资源成本价值核心领域 58 个图表功能，完成从创建视图、添加图表、展示图表的一整套流程，达到预期目的，完成标准化合入并验收通过

2，作为度量前端负责人需要把控整个前端项目架构

• 完成效能洞察前端项目架构，前期基于时序图捋顺业务流程，独立完成业务架构设计（webpack、路由设计、目录架构、接口请求封装、数据源、状态设计、构建流水线、权限接入、新增前端服务、司内图表组件集成等）重点完成集成司内图表组件与 coding 工程结合融入工作；中期同司内团队进行分工合作，完成对应业务模块功能， 同时为团队提供 coding 侧相关能力服务，解决阻塞卡点，提升开发效率；后期完成文案国际化、权限、自测优化、查漏补缺、图表测试等工作，主动发现问题并推动解决，顺利完成项目上线

3，配合产品完成前端功能开发, 得到产品同学的认可

• 完成开发模块： 视图列表， 视图操作；后台配置方案（方案列表、添加方案、周期方案），引导页，创建视图页，404 及无权限页面，全屏能力以及 coding 相关的所有内容；完成设计稿还原；
• 配合产品进行相关产品问题优化（周期项目方案交互、视图列表展示、图表模板显示、图表显示、权限问题），项目后期尽可能帮助团队测试较为明显的显示问题，得到产品认可，戏称为“半个测试”

前端模块高质量交付

1， 持续优化前端性能, 优化用户体验

• 性能优化： 视图模板数据缓存本地；hooks 使用 useCallback、useMemo 进行包装，减少重复 Http 请求
• 体验优化： 图表卡片增加显示数据范围；添加图表后默认拉取数据展示；弹窗居中统一；无数据折线图连接； 图表数据英文标题提出优化；日志上报等

2， 持续优化客户反馈，外网缺陷控制在 5 个以内

• 目前无前端相关缺陷，持续关注后期上线后客户反馈

持续提升个人能力

1， 加强对于数据度量前端领域的技术理解, 指标：司内、行业内技术输出和发声

• 通过项目了解到数据度量中常用的图表类型（折线、柱状、饼图、数字、堆叠图等），度量的前端架构流程核心是基于配置的 DSL（重点在表单交互及数据结构），同后台进行数据交互， 再把返回的数据通过 echarts 进行展示，。
• 在项目开发过程中，在 wiki 中记录总结了 4 篇文章（核心流程时序图、react-router 升级）