- 黄东东/男/30
- 工作年限：6年
- 技术博客: https://xiaodhuang.gitee.io
- Github: https://github.com/XiaoDHuang
- LeetCode: https://leetcode-cn.com/u/xiaodhuang/
- 手机：180-9893-8035
- Email：[email protected]
- QQ/微信号：HXDBMW
6年Web前端开发，参与过大型中后台系统开发及架构演进方案，参与过面向C端多端业务场景技术体系建设，带领过7-8人前端团队，负责过微前端体系建设，并落地编程猫中心化系统，实现公司70多应用，两千多个页面业务调度能力。落地可视化搭建平台的建设，实现面向移动端可视化页面搭建服务，并借助前端微服务能力，尝试在搭建系统中实现业务功能可视化配置。参与过公司工程化体系建设，优化升级脚手架基础库，monorepo工程管理方案。
-
前端技能
-
具备JavaScript语言核心基础概念，值类型系统、对象类型系统、规范引用类型系统， 掌握JavaScript运行时组件(环境、上下文)、语法组件表达式语句执行、面向对象、函数式、结构化编程。
-
掌握Chrome浏览器底层工作原理，多进程架构、渲染流水线、事件调度机制，垃圾回收机制等。
-
掌握前端各种调试技能，移动端web调试、PC端web调试、http抓包等。可以在web端有效进行，页面性能分析、页面内存泄漏、追踪分析页面各种问题。
-
了解熟悉前端图形技术，svg、canvas、webGl, 并使用过d3、echarts 构建可视化大屏， 以及利用canvas开发高性能地图组件。
-
熟练使用前端框架技术Vue及React, 并在实际生产项目中大量运用, 实现各种开发需求。
-
掌握React工作基本原理，熟读并调试相关源码的实现过程。
-
掌握Reduxjs相关实现细节，熟悉官方相关库具体实现如：reudux-toolkit
-
掌握TypeScript基本用法，并在实际React项目使用。
-
负责前端团队管理，角色前端leader, 有一定的业务架构能力，团队管理能力，组件设计能力，代码抽象能力，项目工程化能力。
-
-
运维技能
- 熟练Linux平台基本命令，Linux平台下各种应用及服务搭建（如帮助公司搭建低代码平台，部署相关服务）。
- 熟练vi编辑器基本用法
- 熟练git版本管理工具，基本命令行使用，如：stash、回滚、变基、编辑合并commit、等...
-
其他：
- 有过服务端开发经验， 负责APP API开发。
- 掌握基本数据结构与算法，对动态规划、DFS、BFS、分治回溯、位运算基本的理解。（曾经利用相关算法为公司实现编程积木树比对纠错，为用户提供积木搭建引导)。
- 负责的相关业务：《探月少儿编程》、《编程猫APP》、《海外版RokRok》
- 角色：前端组长
- 公司技术栈： React为主、少数系统为Vue
- 主要职责：
- 负责公司课程管理系统相关业务的开发工作。
- 负责编程猫小程序相关开发工作。
- 负责教师直播客户端及制课工具相关业务开发工作。
- 负责落地编程猫低代码平台搭建，尝试在低代码平台落地微前端, 对现有业务功能做可视化配置。
- 负责公司监控系统搭建，业务端可视化埋点的落地。
- 负责维护公司脚手架工具, 解决常见编译问题。
- 负责维护公司基础类库。
- 负责APP侧H5业务功能的开发工作。
- 负责团队日常业务开发管理工作。
- 负责落地编程猫中后台微前端架构体系建设，整合公司70多个应用，两千多个页面系统调度复用问题。 实现系统与应用分离的业务架构解决方案。
- 负责落地编程猫monorepo项目工程管理的方案。
- 落地中后台可视化配置表单，节省大量手工运营配置及人工出错问题。
- 项目背景：完成对公司70应用，2k多个页面梳理调用能力，对页面进行复用，对应用进行整合， 对系统进行统一导航及鉴权，对工程进行合理分拆，面向业务的动态系统管理的能力。
- 架构思考：系统与应用概念分开， 系统负责调度业务， 应用负责提供服务。 中心化微前端调度体系。
- 遇到挑战：
- 如何实现老旧系统的0成本接入、跨域资源、样式、路由匹配等问题。
- 如何实现一个多实例，监听各种资源style、script、link等标签加载方案。
- 实现一个多应用加载，样式隔离CssScoped及JsSandbox方案。
- 技术实现
- 服务发现import-html
- JsSandBox基于proxy\with脚本劫持处理方案(script、style、linK)
- CssSandBox 基于shadowDom实现独立子应用DOM隔离方案。
- 系统管理
- 应用管理
- 基座调度器
- 项目背景：主要业务侧提供课程管理及APP日常运营管理的配置工作
- 技术栈： React + Typescript + AntDesign
- 负责的内容：
- 负责云端素材库管理功能开发, 为老师配置课程，题库管理，提供在线素材, 简化老师上传管理素材难题。
- 负责配置课程管理功能开发，涉及多个拖拽模块开发工作，如：把云端素材拖入课程配置模块中，自动完成相关课件配置工作，简化操作流程。
- 负责交互答题管理配置功能开发。
- 运营配置后台，引入可视化拖拽表单，后端、产品、运营常见配置表可视化生成表单页面，节省大量前端可重复开发成本。解决业务侧填写大量excel, 后端同学修改配置文件或脚本文件，带来易出错问题。
- 项目背景：主要提醒家长端课程更新服务，学习成果跟踪服务，及其他相关学习的服务。
- 技术栈： Taro + Vant
- 负责内容
- 小程序项目技术选型与搭建
- 完成手机号及一键登录相关业务开发
- 完成首页广告位及自定义导航条业务开发工作
- 完成小程序相关订阅服务的开发工作
- 完成基于Jekins的小程序CI
- 项目背景：主要为运营产品提供一个，可视化搭建页面平台，应对大量活动落地页面，做到快速发布快速响应能力，缩短发布流程。
- 技术栈：Vue + node + egg-server + docker
- 存储中间件：mysql + Elasticsearch + redis
- 负责内容：
- 负责基础组件开发维护工作
- 负责相关服务搭建及部署工作
- 在低代码平台落地微前端做可视化页面配置
- 负责编辑器模块优化工作
- 负责页面展示端，一些优化工作。
- 主要能力
- 支持团队管理、支持项目管理、支持权限管理
- 支持页面埋点统计，比如常见访问量
- 支持快速发布部署的能力。
- 支持云端素材管理，云端自定义组件管理，云端逻辑脚本管理。
- 支持自定义组件开发。
- 支持在线脚本编辑器，在线脚本注入，并支持ES6、ES7语法转换,为组件提供类似hook及mixin的扩展能力。
- 支持拖拽组件间全局状态管理的能力、支持拖拽组件间(面向SOA模型)进行相互调用协议。
- SDK背景：公司图形化编程工具的插件，主要为老师提供一个指导学生进行可视化编程作业引导程序。
- 负责内容：
- 根据产品需求制定落地整套技术方案，拉通原生(Native)工具端提供JS插件的能力，C端产研来实现具体引导算法
- 主要任务就是老师预制作业与当前学生作业进行比对，根据最终差异性引导学生，正确完成可视化编程作业。
- 最终落地核心算法，就是根据积木类型（相当于语言词法当中语句表达式）执行顺序及类型，进行最长公共子序列匹配算法进行匹配。
- 背景： 公司内部各个业务线汇总下来会存在上百个应用系统，为了标准化各个系统间脚手架配置，让开发从各中繁杂配置环境解脱出来，脚手架工具应运而生。脚手架工具设计的时候被分为两个独立分包，一个负责项目模板生成及构建服务， 一个只负责构建服务， 前者依赖后者，构成整个脚手架工具。
- 功能：
- 支持生成多种项目生成模板，支持小程序模板、Electron模板、MPA项目模板、移动端H5项目模板、管理系统项目模板、SSR项目模板、私有化NPM项目模板
- 内置代码检查工具及配置、构建脚本的cdn资源上传配置
- 内置Docker镜像文件，自动化部署配置。
- 支持项目相关工具的自定义配置文件，如webpack、stylint等工具自定义配置。
- 支持在gitLab中私有化NPM发布流水线。
- 负责的内容：
- 负责脚手架动态模板拉取与生成，利用GitLab REST API数据列表，拉取相关模板数据，进行下载生成项目。
- 解决webpack5中react-css-modules模块与babel-plugin-react-css-modules模块hash冲突问题。
- 负责Taro小程序模板项目搭建。
- 负责内部lint工具的维护和升级。
- 项目背景：为教师提供在线教育直播客户端，提供大小班级直播教学服务
- 技术栈： Electron + Vue
- 功能描述
- 支持老师大班小班直播，连麦控制，摄像头控制，桌面控制。
- 课程互动，课件管理，画板功能，发放习题和作业，远程协助学生等。
- 负责内容：
- 主要参与前期技术调研与选型，最终采用Electron桌面及接入第三方音视频服务实现整套的教师客户端。
- 项目背景：为老师提供一种非线性可以让学生进行交互形式的媒体视频。公司自研内部视频交互协议，通过桌面老师进行交互组件拖拽，来衔接个各个视频播放、顺序、循环、回退、上下播放内容。移动端原生播放器拿到交互协议进行视频互动的一种形式。
- 负责内容：
- 主要负责了后续迭代优化与bug修复。
项目背景：主要封装了公司平台账号图形安全校验的模块，支持多种厂商SDK接入，腾讯TCaptcha、阿里awsc、网易、极验等。 业务层区分注册、登录、更改密码场景，该SDK配和账号管理平台的下发，动态支持多种滑块及业务场景安全校验功能。
- 负责内容
- 该SDK日常维护，及bug修复工作。
项目背景：公司内部上传库，支持视频码率转换，支持m3u8视频格式转换，支持文件切片及断点续传，内部支持文件最大chunk并发上传数量。该库结合运维管理平台，封装了，动态获取CDN上传空间、限制文件的大小以及上传类型。
- 负责内容：
- 支持自定义外部服务注入，主要兼容海外项目的运维管理配置。。
- 该库的日常维护和bug修复等。
- 项目背景： 该项目为平安内部项目项目管理平台，
- 技术栈： React + Ant Degin + typescript
- 负责内容：
-
自定义可视化看板图表功能、实现对图表功能自定义添加、可视化、编辑、删除、拖拽及每张图表自定义数据查询功能。
-
开发甘特图组件：实现类Teamtion甘特组件, 实现日、周、月、季、年任务视图切换、时间无限滚动，实现不同日期视图下的任务拖拽、创建、编辑功能、 实现任务树形表格展开收起。
-
- 项目背景：平安内部数据可视化管理APP
- 技术栈： webview + Vue + Mint-ui
- 负责内容：
- 负责项目管理平台据在移动端可视化功能开发， 主要实现可视化图表、及数据报表，在各种维度下面数据筛选，可视化功能的开发。
- 遇到问题： 由于安卓端与IOS端webView绘制引擎webkit内核差别及JavaScript引擎（安卓V8/IOS JSCore)， 在开发当中页面展示效果及JavaScript内置函数行为如会有所差别，经常需要真机及http抓包等手段调试修复。
- 项目背景：产险部门进行项目费用预算管理系统
- 技术栈： Vue + ElementUI
- 负责内容：
- 管理系统首页开发、项目费用动支业务开发、项目费用结项业务开发、项目费用结算业务开发。
- 管理系统页面发票打印功能
- 遇到问题：业务要求页面打印下载的pdf，支持可编辑、可粘贴复制。
- 方案1： 服务端通过无头浏览器对截取html进行pdf转换，会有兼容问题，如何让无头浏览器拿到UI框架CSS，渲染出正确CSSOM是个问题，无头浏览器适用UI简单且不包含css新特新，跟UI框架解耦内容。
- 方案2：前端借助浏览器功打印进行PDF转换，会带来另一个问题IE浏览器无法支持PDF下载，还需要设计如何动态截取页面上的组件。
- 方案3：根据 PDF API， 进行PDF绘制。效率上UI还原上都无法保证。
- 方案4： 如果对可编辑可复制有强烈需求功能，就借助chrome浏览器能力进行转换下载。如果像发票类打印下载内容，前端对组件进行位图转换后写入（或后端）PDF文件，支持下载。
- 项目背景: 公安终端设备数据采集、数据存储、设备远程管理、数据分析于一体综合管理平台。
- 角色：前端组长
- 主要职责： 负责前端业务方面的架构、前端工程化方面的优化、部分业务开发、公共组件封装，为小伙伴解决疑难问题。
- 技术栈： Vue + Iview
- 负责内容：
- 划分业务模块、支持自定义功能集进行项目应用部署的能力。
- 配置代码lint，统一代码风格。
- 配置git hooks 对团队提交内容进行规范
- 优化webpack构建速度，基本思路缩小构建范围，加入缓存组件，多个(线程）并行处理（集中在代码图片的压缩及转换)。
- 分析可视化大屏，针对内存泄漏，解决页面崩溃问题
- 离线百度的资源加载，源码库优化，让离线地图支持在线地图功能，如：支持一些主题地图的加载
- 解决百度地图绘制性能问题， 分析轨迹路线的绘制，大量的设备点位在地图上展示， 来解决地图加载及拖拽的卡顿问题。
- 页面性能分析：主要集中在地图，及数据可视化大屏。
- 开发地图网格功能，支持各种级别参数切换 500米 公里级别切换
- 实现数据业务关系图谱, 对采集的数据进行业务关联拓扑。
- 组件封装：高性能点位绘制组件、地图网格、关系图谱等....
- 角色： PHP开发工程师
- 项目背景：该项目为移动端相册管理APP， 针对手机相册分享管理及打印功能
- 主要职责：
- App活动页面日志统计
- 支付功能开发工作， 主要完成：支付宝/微信支付等功能的开发工作
- 阿里云OSS对象存储
- 配合IOS Android 端同学联调系统api
- 移动端H5活动页面开发工作
- 参与H5页面与Native应用之间调用问题
- ts-gant：Vue 仿Teambition甘特图
- toy-react：jsx实现组件化方案，
- html-parser 根据HTML标准 状态机实现html解析器构建树状数据结构
- midware-proxy-sandbox 基于 Proxy 实现的沙箱中间件