james9527的前端日志

# 自我介绍

本人目前从事前端开发7.5年+，从事前端开发之前有近3年C#开发经验。最近一家xx科技担任前端组长角色，管理和开发维度占比各一半。以下公司名采用脱敏方式描述，感谢理解~

# 管理方面

负责过团队搭建（5人）、需求内外对接、前端技术选型及规划、制定和约束前端编码规范、团队OKR制定、工作任务分配、定期代码review等工作。

# 技术方面

  • 工程化：负责新项目系统架构搭建&老项目架构优化，也负责过微前端父子应用改造工程。
  • 性能优化：xx社群C端性能优化（含webpack升级）。
  • 业务方向：B端营销自动化工具、C端营销活动和用户中心业务为主。
  • 效率提升：营销工具antd组件库升级、C端项目单点登录改造及通用逻辑SDK开发。
  • 技术栈：前端B/C端共30+个项目，以React为主，其余为Vue相关。

# 过往经历

  • 负责过xx电商WAP站新首页Node前后端同构
  • CMS业务组件库从0到1的搭建及落地推广
  • xx九九会员（内嵌于xxApp和xx商城小程序），借此机会参与了xx商城小程序改造及其包体积大小优化工作
  • xx金融用户中心数据可视化相关业务和xx来客数据App（React Native）等。
  • Blue Air+运营系统
  • 房产业务系统（买卖/租赁/责任盘），技术栈：ASP.Net + SQL Server

# 项目经验简介

# 最近一年半项目经验（前端组长）

# 1000万用户达成活动（技术Owner）

技术栈：Vue3.x + Vite + TS + pinia + qrcodejs2 + html2canvas + @sentry/vue

  • 背景：为庆祝App注册用户突破1000W，我们营销业务线承接了此活动主会场的任务。
  • 任务：1000W用户达成主会场 + 用户排名PK小游戏
  • 行动：负责需求拆解、项目架构搭建、制定技术方案，各端登录态、神策埋点和Sentry接入把控。
  • 结果：按时交付、顺利完成该活动的拉新促活指标。

本人职责如下：

  • 负责需求拆解、项目架构搭建、制定技术方案，各端登录态、神策埋点和Sentry接入把控。
  • 负责重难点需求开发，如我的排名/邀请好友PK排名结果页海报生成，邀请好友参与全链路业务逻辑把控。
  • 借助微信开放标签wx-open-launch-app和已认证服务号，实现了微信环境直接唤起App并进入活动页，同时微信外使用传统 Scheme方式唤起或引导下载App，保证了App站外主流环境能直达，增强了用户体验。（重难点）

# C端提效工具MASDK

技术栈：Rollup + Axios + JavaScript + Babel等部分Rollup插件

  • 背景：C端营销活动依赖登录态（App原生/微信/SSO），由于技术债问题，这些营销C端项目技术栈分别有uni-app/eggjs/vue/react。可谓技术栈繁杂，登录态改造及日常维护效率较低。
  • 任务：打破技术栈壁垒，开发出能适用于各种技术栈的SDK，同时避免每个项目登录逻辑互相copy的乱象，减轻项目代码量，C端登录逻辑集中维护。
  • 行动：SSO单点登录开发完后，梳理出一套稳定可用的登录逻辑，使用rollup结合babel部分插件，打包出UMD规范的SDK文件。
  • 结果：完成各端登录逻辑打包后，还进行了其它C端公共逻辑封装（如jsBridge常用接口、定位逻辑、App沉浸式Webview兼容、iOS安全区域兼容等）。

此SDK特性（能力）如下：

  • 通用性：适用于各种技术栈项目，可节省1800+行基建代码，C端登录态逻辑也便于集中维护。（难点）
  • 易用性：在应用主入口main.ts导入或script引入此UMD规范的SDK，结合响应拦截器使用。
  • 多样性：此SDK源于SSO单点登录开发，后接入App原生及微信授权登录。另含：各环境判断工具类、jsBridge常用接口、定 位相关逻辑、App沉浸式Webview兼容、iOS安全区域兼容。属于个人OKR产物，为产研提效20%以上。

# B端营销工具&流程编辑器

技术栈：React18.x + Dva + TS + Antd4.x + immutable + antv/g6 + umi + qiankun

  • 背景：此项目初始化于2018年，react版本是16，class组件难以维护。同时，该项目是多团队协同的开发模式。
  • 任务：承接公司市场营销部门的B/C端业务。
  • 行动：除日常业务迭代，升级了react版本至18.x，antd版本由3.x升级至4.x，同时将class组件改造成函数式组件，优先使用hooks。
  • 结果：提升了该项目的可读性和可维护性，提升了代码质量和组件性能，使用umijs + qiankun插件将父子应用改造成微前端形式。

本人负责项目成果如下：

  • 留资/落地页/邀约试驾/各类抽奖/拼团/秒杀模块借助iframe+postMessage实现了H5页面配置实时预览效果。
  • 营销活动流程实现可配，借助G6引擎实现一套可拖拽&可配置的流程控件，如在事件/人群多分支、CDP受众圈选和消息通知等 控件的组合下，可进行多维度的用户洞察，采取不同营销模式，开展精细化运营。（重难点）
  • 以微前端方式接入到商城运营侧（父应用）增强了用户体验，实现了多团队场景下的独立开发及部署。父子应用改造过程中， 借助webpack的DllPlugin抽取公共部分的依赖，避免了子应用重复加载dva等依赖。（难点）

项目结构文字描述如下：

  • 测试工具：umi test => e2e
  • mock数据：mockjs
  • 代码格式化&代码提交相关：prettier + eslint + stylelint + husky + commitlint
  • CICD：源码根目录放Dockerfile和.drone.yml文件，设置自动构建分支（如：dev），修改drone.yml文件部署版本号app_version
  • src目录结构示例：
  1. assets静态资源文件夹（图片）
  2. components组件
  3. e2e测试
  4. layouts布局相关（Header.js/Footer.js/BasicLayout.js）
  5. locales 多语言文件（中英）
  6. models编写redux相关（effects）
  7. pages（页面目录，主业务逻辑）
  8. services接口定义
  9. utils（enum/fetch/authority等）
  10. app.js（qiankun 生命周期）
  11. global.less

# 技能清单

  • 前端基础：熟练掌握原生JS/ES6+/HTML5/CSS(3)，能高度还原UI设计稿，移动端适配有较丰富经验。
  • 前端框架：熟练掌握Vue和React等主流框架，并深入了解其设计思想、原理和最佳实践。熟悉React Native跨端开发，使用 Next.js和Nuxt.js做服务端渲染等有些许项目实战经验，掌握小程序开发及其包体积大小优化技巧。
  • 工程化：熟悉CommonJS、AMD、UMD、ES6+等模块化规范；熟练使用Gulp、Webpack、Vite、Rollup、Babel、Axios、 TypeScript、Antd、ElementUI等开源库搭建符合业务需求的PC或H5单/双页应用架构，具备微前端实战经验，有大型中后台系 统开发经验，跨团队协同能力强，负责过公司多个核心产品从0到1的实现及部署。
  • 服务器端：熟悉Node.js及其Web框架 Express/Koa2/Egg，了解Nginx简单运用。有2年半C#后端开发经验，熟悉 SQLServer/MySql关系型数据库，对MongoDB也有些许经验。
  • 浏览器端：熟悉http(s)协议、现代浏览器基本原理、移动端Webview和浏览器调试工具，对前端性能优化、前端安全 （XSS/CSRF/Http Heads攻击）、浏览器兼容性有一定应用与思考，具备网站SEO优化经验。
  • 操作系统：熟悉Linux/Mac操作系统，熟悉常用Linux指令，能够编写简单的Shell脚本。
  • 编程规范：良好的编码规范，注重代码质量和可维护性。推荐过Git使用规范，Eslint、Commitlint标准及落地。
  • 技术管理：具备2年+带团队经验，熟悉敏捷开发模式，能及时关注和解决团队内的复杂疑难问题。
  • 其它：了解常用数据结构与算法，具备良好的沟通协作和阅读英文资料能力，对前端新技术保持关注。

# 致谢

感谢您花时间阅读我的在线简历，期待能有机会和您共事。