- 手机: 18677291450
- 邮箱: [email protected]
- 熊杰/男/1989
- 本科/吉林大学通信工程(2010/9-2014/6)
- 工作年限: 7年前端工作经历
- 技术博客: https://cexoso.github.io/cexoso
- Github: https://github.com/cexoso
由于之前的 sheet 工具栏为单栏模式. 无法承载越来越多的功能. 所以需要改版为双栏模式. sheet 的工具栏改版主要遇到的难点为: 因为项目臃肿, 修改代码热更新需要 20 秒时间. 开发效率极低. 工具栏需要对屏幕的宽度做复杂的响应式. 工具栏有中英日需要适配. 其他开发希望后续的功能上新可以直接通过修改配置的方式新增按钮.
独立完成该项目.
- 由于在原项目 webpack 中开发效率极低. 所以我使用 storybook 搭建开发环境, 将修改代码到页面响应时间降低到两秒以内.
- 由于 UI 代码不能直接引用逻辑代码. 正好该项目支持配置方式, 所以使用配置注入数据及逻辑.
- 独立完成 AB test 实验.
- 使用内部轻服务独立部署了 UI 展示站点. 可以在一个界面中展示多个 UI 形态效果, 方便设计直接验收多个 UI 形态并直接对比设计稿.
筛选视图是 sheet 一个独立筛选数据的功能. 该功能允许用户定义自己的视图, 视图拥有名称和自己的筛选器. 用户在筛选视图中的筛选操作不会影响到原表数据的展示.
该项目为三人开发完成, 我在其中负责:
- 数据层 api 及实现.
- 对原筛选代码重构. 因为原代码比较老久. 理解成本比较高. 本次筛选逻辑需要在复用原代码的基础上进行逻辑的新增.
- 使用 Rxjs 实现驱动数据层. 之前代码多为事件通信触发视图更新. 用户的操作会通过事件的方式, 发送到视图层更新视图. 该方案视图并不是直接与数据对接而是与事件对接, 难易维护. 容易出现 BUG, 并且不易扩展. 本次使用 RxJs 实现驱动数据层. 视图可以直接订阅自己关心的数据进行变更. 而不需要关心导致数据变量的是什么操作事件. 解耦了用户操作与视图变更.
- 实现了新增 Action 的两个 operation transform 操作. 因为表格需要支持协同编辑. 需要实现所有新增的 Action 与其它 Action 的 follow. 我在学习了 OT 算法并且明白了 follow 算法的原理后, 使用一天时间编写了测试用例, 并且一次编码实现了新 Action 其中的两个 Follow 算法.
该项目上线后, 无 Bug 反馈.
原项目有使用 slardar 做线上的异常监控. 但由于太久没有人维护. slardar 平台缺少 sourcemap. 上报的错误是压缩后的代码. 对查找线上问题的人很难. 我觉得有 sourcemap 可以大大提高线上问题定位效率, 所以我做了这些事去支持 sourcemap.
- 查看了项目打包代码. 寻找了相关的人大概了解了 slardar 使用的上下文及现状.
- 查找 sourcemap 生成相关的代码. 最后发现是 webpack 插件过于老久, 直接不支持 sourcemap 的生成.
- 升级了 webpack-parallel-uglify-plugin 及相关 uglify-js 版本.
- 了解 slardar sourcemap 对应规则并写了上传代码. 支持了多次重试, 保证了线上代码 sourcemap 覆盖率 100%.
- 写了监控机器人. 会对每次构建做时间监控和 sourcemap 上传成功率监控.
项目支持 sourcemap 后, 异常上报几乎都支持到了 sourcemap 解析. 用户反馈问题, 可以通过用户 ID 及文档 token 查找到报错信息. 提高了 oncall 反馈的事件.
因为代码涉及多方业务. 各开发水平不一, 造成 typescript 报警. 之前是人工检查并且在大群中反馈. 效率过低. 我认为可以将 typescript 检察并入 ci 中, 需要我做了这些事:
- 了解了为什么我们的 CI 不做 typescript 检察. 因为项目过大. 直接运行 tsc 检察因为栈空间不足而报错.
- 查找了 typescript 官网, 了解到 tsc 可以仅检查代码不生成文件. 可以降低内存占用.
- 使用 node --max-old-space-size 可以提高堆内存空间, 让 tsc 不报错.
- 提出了方案. 完成了 CI 任务, 各业务方派出人员一同修复了旧错误.
该项目新增了 typescript 的约束, 并且在 CI 阶段检查阻止了不合规代码的合入. 保证了代码质量.
数据验证功能是, 当对一个单元格设置了数据验证, 用户之前在输入的时候会应用该数据验证功能. 对输入值做校验. 同时数据验证还支持将输入的值显示为其它的 UI 类型, 如 checkbox 等.
该项目由初期为三人负责, 后期添加了人力. 我在其中主要为支援 checkbox 相关逻辑实现:
- 参与数据验证内核设计.
- 实现插入 checkbox command逻辑.
- 实现了基于 canvas 的 checkbox 渲染.
卡片模式移动端通过卡片呈现数据的一种方式. 因为移动端视口较小. 表格数据在移动端呈现查看较为不易. 所以需要提高卡片视图增强数据的阅读体验. 该项目为两人完成, 我在其中负责:
- 基于 canvas, 实现半屏模式的 UI 展示, 并且实现半屏模式到全屏模式过度的动画实现.
- 对接点击测试, 键盘及业务逻辑.
- 接入数据验证 checkbox 的展示, 及点击编辑逻辑.
因为功能增多, 带上工具栏位置的不足. 需要对 sheet 整体样式做一次改版. 需要对 sheet 的工具栏改版. 重构右键菜单以及文件导航. 添加顶部菜单. 其中困难的点有. 因为本次 UI 改牌存在一个功能多个入口. 大致功能一致外, 存在极细小的差别. 需要对 UI 逻辑进入小颗粒度的复用.
该项目为两人完成,后再进入一实习生,我在其中负责:
- 拆分功能项.把控项目进度.
- 技术设计.采用 react hooks 抽离逻辑, 进入细粒度的逻辑复用.
- 依旧采用 storybook 作为 UI 开发环境, 因为本次菜单 hooks 注入逻辑. 逻辑 mock 更为简单易行.
- 完成 AB test 实验.
- 组织项目验收, 爆测, launch review 修改.
使用公司内自研框架 Hippy 重构评论模块.
该项目由三人完成, 我在此项目负责:
- 页面的重构
- hippy 本身支持打包到 native, 由于需要支持 web 场景与 native 场景同构, 所以还做了 web 端打包及包体积优化.
- 基于 Redux, 完成了数据层设计, 让组件的数据依赖更清晰, 减少了不必要的重渲染.
- 优化低端机卡顿的的性能问题.
- 简化并规范了发布流程.
- node 端接入逻辑实现. 因为内部使用 rpc 协议, 没有对应框架支撑, 代码容易臃肿, 难维护. 我在基础的框架上借鉴 koa 框架的洋葱模型实现了 toa 框架. 使用中间件方式让代码逻辑更清晰且易维护.
- 搭建了 node 发布的 CI/CD. 减少手工发布工作量. 该项目上结束后, 评论 PV 从 70 万上升到 110 万.
基于 Web 的勋章运营项目. 用于浏览器拉新拉活. 利用勋章提高用户粘度. 独立完成该项目:
- 使用 style-components, 独立完成整站重构.
- SPA 设计, 根据路由分包加载. 优化首次的加载时间.
- 原子级通用,数据层设计, 提高各页面数据复用率.
- 使用 SVG 动画, 和 CSS3 动画. 完成了勋章的获取动画效果. 增加用户获取勋章氛围.
- 整合了内部的数据上报平台.
- 搭建了 CI/CD, 减少了发布工作量.
该项目上线后, PV 25万, UV 15万.
内部开源项目. 由于自建的 Hippy 在前端异常监控方面设施简陋, 而且线上运行环境不稳定, 开发在查问题时很被动. 该项目是在开源异常监控 sentry 上, 实现自己的 sdk 异常监控. 该项目由两人完成. 我在该项目中负责:
- 修改 Hippy 打包工具, 为构建产物生成全量 sourcemap 文件.
- 增加 Hippy-sentry-plugin, 在生产环境构建时, 将 sourcemap 文件上传到内部 sentry 服务器. 减少其它项目接入成本.
- 采用配置文件方式, 向前兼容不开启的情况. 支持自定义 release 生成规则, 可以直接获取 git 短 hash, 构建时注入到 release 生成函数国. 让每个错误都有自己的归属版本, 方便错误的定位.
该项目加入了 Hippy 官方工具, 合并主线后. 内部部门几乎全接入. 也帮助了外部团队接入. 收到的反馈极佳.
该项目是 toB 项目, 主要用于房地产销售跟客. 其功能包括: 录入客户信息, 并且根据客户信息提醒跟客. 以及销售管理统筹客户资源,将客户分配给销售员等功能.
该项目有三个前端, 我在此项目负责的工作有:
- 页面的构建.
- 接手该页面时, 是使用的 React 构建的多页面应用. 数据管理混乱, 使用事件, 模块闭包直接储存内存数据等通信方式. 后逐步重构为单页应用. 使用 React-router 管理路由. 使用 redux 管理数据. 管理数据的方式多为直接将后端数据直接填充到 store 中.
- 由于不同的地产公司对数据要求的维度不一样. 需要动态生成表单. 在研究了多种方式后, 选择并使用了 redux-form 完成动态表单的生成, 校验, 提交保存等能力.
- 引入了 eslint, 检查项目的书写规范.
该项目为移动销售配套后台管理项目. 用于开发人员设置表单项. 以及设置项目各参数等.
- 使用 angularJs 完成
- 从 php 项目重构到前端项目, 完成了前后端分离.
- 完成了从多页应用向单页应用的重构. 充分的遵循 agnularjs template controller service 思想, 将页面功能与文件一一关联. 减少了理解成本.
- 封装了 http 模块. 使用拦截器封装了登录态失效. 错误处理等通用逻辑.
该项目是微信小程序, 主要的应用场景为销售人员直接使用微信社交能力向有购房意向的用户分享房子的信息, 增加强线上线下的拓客能力.
- 使用 node 做 BFF 层, 采用了 graphQL 协议, 整合后端 grpc 服务, 向前端提供服务.
- 小程序使用 graphQL 客户端请求并展示数据.
- 接入腾讯 IM, 使用 RxJS 处理复杂数据流逻辑.
- 尝试使用 RxJS 做数据管理层.
- 在 Linux 上独立部署 node. 后使用 PM2 发布能力简化了发布流程. 并使用 PM2 管理 node 程序.
- 为了全面接入 devops, 该项目做为试点项目. 我学习了 docker, 但是该项目并没有用上.
基于 YAPI 平台改造. 支持 API 的录入, 前端的 Mock 请求数据. 后端直接使用平台发送请求调试.
- 使用 chrome 插件. 解决后端使用 YAPI 平台请求后端服务器调试时遇到的跨域问题.
该项目是 ToC 项目, 主要用到手机碎屏险下单, 及订单查看功能. 我在其中负责.
- 使用 gulp 定义开发流程, 发布流程, 网站优化.
- 使用 angular.js 开发页面. 搭建 angular.js 开发框架.
- 配合后端同学, 使用 nginx 进行站点部署.
该项目是 toB 项目. 用外贸中小微企业进销存管理. 我在其中负责.
- 承担公司全部前端开发使用jQuery，easyUI搭建中小企业paas销售管理服务；使用css修改部分样式.
- 使用Jsp承载前端页面，使用Java语法编写取数及部分数据修改业务逻辑；mybatis编写sql存取语句，建表语句，及修复错误数据.
- web 开发: Node, HTML, CSS, Javascript, SVG, Typescript.
- web 框架: React, Angular, Vue, Koa, NextJs.
- 前端工具: webpack, lodash, rxjs, rollup, snowpack. parcel.
- 版本管理: Git.
- 自动化测试: Mocha, Ava, puppeteer.
感谢您花时间阅读我的简历, 期待能有机会和您共事.