张星海

全栈工程师

  • 性别：男
  • 住址：广东深圳
  • 电话：+86-18742538743
  • 邮箱：zhangxinghai79@gmail.com
  • 学历：本科

综述

拥有 10 年软件开发经验，其中 8 年专注于前端技术，精通 React、Vue、ThreeJs、NodeJs、WebGL、TypeScript、ES6 等主流前端框架和技术，擅长面向对象编程（OOP）和架构设计。熟悉领域驱动设计（DDD）在前端的实践，能够将 DDD 思维运用到业务逻辑建模和状态管理。

过去 3 年在海柔创新科技担任高级前端工程师 / 核心项目负责人，主导开发了实时监控系统、仓库布局系统（编辑器）、以及仓库图形库。在图形化技术和大型系统架构的设计与实现方面积累了丰富的经验。

关注代码质量和架构设计，致力于构建高性能、可扩展的前端应用，擅长为复杂业务需求设计模块化和组件化的架构。具备一定的团队协作和技术领导能力，能带领团队高效推进项目交付。

本人对计算机图形技术充满热情，特别是在 WebGL / WebGPU / WebXR 和 C++ OpenGL 等领域。工作之余，我积极参与个人项目，深入研究相关基础理论，致力于提升自己在图形学领域的专业能力。如果贵公司在此领域寻求技术人才，我非常期待有机会展示我的能力和潜力。

技能

  • 架构设计 具备较强的前端架构设计能力，擅长基于 OOP 设计大型复杂 WEB 应用，已经有多个大型系统设计经验；擅长搭建模块化、组件化的前端架，有多次基础组件库建设的经验；英语水平高，能查阅海内外资料，精准把握关键信息，解决技术难题。
  • 前端技术 熟练掌握 HTML/CSS、React、Vue、Angular、TypeScript 和 ES6，能够高效开发高性能、可扩展、可维护的 Web 应用。
  • 框架、UI 库及工具 Tailwind CSS、Antd UI、Material UI、Bootstrap、RxJs；Webpack、Vite、Gulp，Sass、Less、babel。
  • 跨平台 Electron、Cordova、Ionic。
  • 图形化技术 熟悉 Canvas、WebGL API、SVG ，深入掌握 Leaflet.js、Konva.js、Three.js 和 Pixi.js 等 2D/3D 图形库，具备开发高效图形渲染与数据可视化系统的能力。
  • 后端开发 掌握 Node.js、PHP、C#、Express、Koa、Yii2.0 和 .NET，具备搭建基本后端服务和 API 的能力。
  • 服务器与数据库 了解 Apache、Nginx、IIS 配置，了解 MySQL、MSSQL、LevelDB 数据库的设计。
  • 团队管理与协作 拥有一定的团队管理经验，擅长组织跨职能团队协作，推动项目按时交付，并保障团队成员的技术成长与效率。

工作经历

2024/09-Now | 个人项目 （可演示）

  • 3D 仓库监控系统 基于 THREE.js 的智能仓库监控系统，能够展示实时监控数据，包括输送线、机器人、货架等。
  • 照片编辑/照片书 一款可以在线实时编辑照片、制作照片书的 WEB 应用，基于react、nodejs，支持多种图像处理功能。文本, 滤镜
  • 地图相册 基于 leaflet 和 react 以及 Electron 框架开发了一款结合地图和照片管理功能的应用，提供位置相关的照片浏览体验，同时支持桌面版和 web 版。查看, 列表
  • THREE.js 学习计划 一个帮助初学者入门 THREE.js 的网站，提供丰富的交互，让用户从视觉上深刻理解 THREE.js 的各项配置。Site
  • 技术博客 Site
  • 实践项目 与输送线厂商合作推出 3D 输送线监控软件。

2021/05-2024/09 | 深圳市海柔创新科技有限公司 | 高级前端工程师

  • 地图监控系统 主导地图监控系统架构设计与实现，使用 LeafletJS、React 和 TypeScript 技术栈，按时交付高性能且界面美观的监控系统，提升企业形象以及仓库管理效率，客户能掌握仓库实时状态，尤其是客户特别关注的仓库异常。
  • 地图编辑器 主导地图编辑器的设计与实现，使用 LeafletJS 、React 和 TypeScript 技术栈，按时交付、持续迭代，提升了地图制作与修改效率，帮助团队快速交付项目。
  • 参与 WMS 业务开发，协助同事改进代码结构，提升了项目的开发效率和后期可维护性，优化了项目的整体质量。
  • 在公司担任面试官，负责面试超过 100 名前端候选人。

2020/01-2021/05 | 软通动力信息技术（集团）股份有限公司 | 主任工程师

  • PMALL 商城 负责核心模块的开发。在此过程中，引入了 TypeScript，并开展了相关培训。为 Vue 扩展和全局实体添加了类型声明，同时基于 REPL 和 readline 开发了卡片迁移脚手架，优化了迁移流程和代码可维护性。
  • Sentinel Dashboard 负责全平台公共服务项目前端开发，使用 AngularJS、Bootstrap、G2 和 Gulp 技术栈，主要实现了 JSON 文本编辑与展示功能，开发了可编辑表格以提升数据交互性，展示了 QPS 和 RT 曲线镜像并实现了异步刷选功能。优化了构建环境，引入了 Babel 和 lazyLoad，分离了第三方库。同时，设计并编码了 JSON schema 解析程序，提升了数据处理能力。

2018/11-2020/01 | 丽珠医药集团有限公司（深圳）| 高级前端工程师

  • 新药品进销存系统 负责该项目的核心模块与整体代码优化。该项目⽤于诊所的药品库存管理以及配发药； 基于 React、reactrouter、Redux、Typescript、apollo、less 实现； 基于 antd 组件库封装业务组件；独⽴ git 仓，使⽤ submodule 引⼊主项⽬仓。
  • 药品分类数据清洗工具 负责药品数据清洗工具的开发，该项目供内部使用。

2015/03-2018/09 | 大唐鸿业科技有限公司（大连）| 前端工程师

  • 菜鸟洗衣服务平台（管理端） 主导该项目的设计与开发工作，该项目⽤于平台运营；基于 Angular5、PrimeNG、EggJs、PostgreSQL； 对需求进⾏逻辑抽象并结合⾯向对象技术实现通⽤逻辑，对组件进⾏最细粒度地拆分以最⼤化代码的复⽤，极大缩短了开发周期。
  • 菜鸟洗衣服务平台（会员端，公众号项目） 主导该项目的设计与开发，该项目属公众号项⽬，⽤于平台微信端⽤户下单； 基于 webpack + babel + express + ejs，⾃定义打包流程以更好适应项⽬； 基于 ES6，实现基本的组件库和⼯具库； 借助微信 JSSDK 实现微信授权、⽀付、扫码、拍照等功能。
  • OnGoing Monitor 负责该项目的前端部分，该项目用于持续监控医师资质认证信息；基于 Meteor 和 phantomJs； 通过抽象抓取动作，结构化了抓取脚本，⼤⼤提⾼了开发的效率和后期的扩展性。
  • 店铺通 负责该项目的前端（PC）部分，该项目提供淘宝第三⽅服务，隶属商家导流⼯具类，PC 端项⽬，包含 6 个⼦项⽬； 基于 Vue2.0 / webpack；通过扩展 Vue-CLI 实现了⼀键打包、⼀键部署功能， 极⼤⽅便了项⽬的运维；同时基于 COOKIE 和 JWT 实现了统⼀登录。

2013/09-2015/05 | 大连奈特网络科技有限公司 | .NET 开发工程师

  • 企业级 CMS 系统 主导该项目，该项目基于 .NET 4 和 MSSQL 8 开发，具有⼀键安装、页⾯模板、智能 SEO、静态⽣成、多语⾔等特性。
  • 零售系统 主导该项目，该项目基于 .NET 和 MSSQL，该系统是在 CMS 系统基础架构的演进下搭建的，借鉴了开源项目 nopCommerce 的技术和业务架构，旨在满足小规模零售商线上业务的需求。
  • 软件培训 组织销售团队进行新软件使用培训，提升团队对产品的理解和应用能力。

项目经历

项目 1：仓库监控系统 | 深圳市海柔创新科技有限公司

  • 角色 高级前端开发 / 项目负责人

  • 描述

    该项目旨在为全球智能仓储管理提供一个高性能、实时监控的解决方案。现有的仓库监控系统存在设计简单、功能无法满足日益增长的客户需求以及性能差等问题，因此我们需要重新设计并开发一个全新的系统，能够支持实时数据流的高效监控与展示，满足更复杂的业务需求。

  • 技术栈

    1. TypeScript, Leaflet, React, Material UI, MUI/data-grid, i18next
    2. React CRA, Protobufjs, Proto2typescript, Eslint
    3. Koa, JSONEditor, Koa/websocket
    4. Java, Protobuf

  • 主要职责

    1. 组织并协调前端开发团队的工作，确保项目按期高质量完成；
    2. 使用 TSLint 进行代码检查、配置 TypeScript 类型检查和生成脚本来自动化构建过程；
    3. 撰写明确的开发文档，确保团队成员的理解一致，规范开发流程，提高了开发效率；
    4. 负责前期的技术调研、技术选型、前端架构设计，以及开发工作；
    5. 与产品、UI 设计人员、后端、测试、运维紧密合作，确保各方需求的高效整合与实现；
    6. 与其它部门同事协作，实现系统国际化以及与其它系统集成。

  • 项目成果

    1. 软件成功部署到了全球客户，新系统显著提高了仓库状态监控和异常处理效率，确保高效运营。
    2. 支持了 SVG, DOM, leaflet.Layer 实时渲染
    3. 采用领域驱动设计 DDD 和面向对象设计 OOP，实现了清晰架构、良好的可扩展性，便于维护及团队协作开发。
    4. 实现了高性能设计，能够稳定处理 50Hz 数据推送，并支持了 2 万货架的实时渲染。
    5. 结合 leaflet 和 react 实现了 ReactSvgOverlay，支持了实时 SVG 渲染，包括输送线和充电桩，提供流畅的直线与曲线动画及设备故障警告。
    6. 实现了分库区监控功能，实时展示设备状态和列表数据，并提供快速查询支持。

项目 2：仓库布局编辑器（WLS）| 深圳市海柔创新科技有限公司

  • 角色 高级前端开发 / 项目负责人

  • 文档 WLS 技术实现

  • 描述

    仓库布局编辑器（WLS）是一款专为内部仓库设计的地图编辑软件，旨在简化仓库地图的设计、布局管理和后期修改过程。WLS 通过灵活的图层管理、实时数据同步和高度定制化的功能，优化仓库设计与实施流程。软件与地图图纸制作部门和现场实施人员紧密对接，帮助提高仓库设计的效率和灵活性，减少了修改周期，并且支持多语言和用户角色权限控制，满足了不同用户的需求。

  • 技术栈

    1. TypeScript, Leaflet, React, Antd UI, GLmatrix, i18next, LocalForage, AJV, JSONEditor, Websocket
    2. Protobuf, Proto2Typescript, ProtobufJS, Typedoc, Less, Eslint
    3. Java, Protobuf, MySQL

  • 主要职责

    1. 需求梳理与沟通 负责与产品、后端及相关部门沟通，识别与解决项目实施过程中存在的困难，梳理并确认软件需求。
    2. 与后端团队协作 设计前后端的数据交互方案，确保数据的流畅传递与一致性。
    3. 技术选型与架构设计 负责前端技术栈的选型与系统架构设计，确保代码高效、可维护，适应多人协作开发的需求。
    4. 功能讨论与设计 与产品和 UI 设计师深入探讨功能需求与具体呈现方案，确保用户体验的顺畅与一致。
    5. 团队协作与开发管理 组织并协调前端开发团队，确保各项任务按时交付，并与其他部门高效协作。
    6. 文档与规范管理 撰写开发文档，制定开发规范，保证代码质量与一致性。

  • 项目成果

    1. 极高的代码质量 经第三方代码质量检测软件检测，代码评分为 A，代码重复率极低、类型完整。
    2. 优化项目架构与开发流程 设计适合于多人协作的项目架构，制定开发规范，确保代码质量和一致性，促进高效开发和团队协作。
    3. 技术创新 通过覆盖 Leaflet 的事件发布逻辑，优化了图层交互体验，多个 canvas 图层可同时交互，优化用户操作体验。
    4. 大规模数据支持 通过分图层渲染，成功实现了 2W 货架、4W 点的高效渲染与实时交互，满足了大规模仓库的管理需求。
    5. 实时数据同步 与后端实现实时数据保存与原子级数据交换，支持多端协同操作，保障数据一致性。
    6. 核心编辑功能实现 实现了元素拖放添加、移动和删除，Undo/Redo 功能，交互模式管理等，提升了系统的灵活性与用户体验。
    7. 高效的地图编辑体验 实现 React 与 Leaflet 地图的互操作，简化了地图设计与交互流程。
    8. 输送线渲染和编辑 深入了解 leaflet 渲染机制，实现基于 canvas API 绘制的输送线，渲染性能高、细节丰富，适应各种形状的输送线，可针对每一个线体进行配置。
    9. 国际化与多语言支持 完成 8 种语言的国际化支持，拓宽了产品的市场覆盖面。

项目 3：仓库图形库（WIK） | 深圳市海柔创新科技有限公司

  • 角色 高级前端开发 / 项目发起人 / 项目负责人

  • 文档 https://wik.zhangxinghai.cn/

  • 描述

    仓库图形库（WIK）是一款用于智能仓库可视化的图形库，旨在提供高效、灵活的仓库布局展示、编辑与交互管理能力。通过引入基于继承的 Mixin 方案和以及自研的模型驱动机制，WIK 解决了仓库布局编辑器（WLS）中复杂的原型修改问题，并通过严格的类型声明和接口先行原则，提升了代码的可维护性与可扩展性。WIK 支持多视图绑定，能够与 Leaflet、DOM、Three.js 等图形引擎无缝配合，实现多平台、跨场景的可视化需求。

  • 技术栈

    1. Eventemiter3, React, Leaflet.js, Pixi.js, Three.js, gl-matrix
    2. TypeScript, SASS, Vite, Eslint, Prettier, Typedoc

  • 主要职责

    1. 项目架构设计 主导整体技术架构与设计，确保系统可扩展、高效且易于维护。
    2. 开发与实现功能 负责核心模块的开发，包括图形渲染、交互行为管理、模式控制等。
    3. 团队管理 组织和指导前端开发团队，分配任务并确保高效协作与按时交付。
    4. 项目进度管理 每日编写并更新开发计划，确保项目按预定进度有序推进，及时解决开发过程中的问题。

  • 项目成果

    1. 基础组件库 针对该项目，实现了一套完整的表单组件和数据展示类（图表、表格）组件，性能高、API 简明。
    2. 关键特性 模型驱动（Model-Driven）、数据驱动（Data-Driven）、一模型多视图（1 Model => N Views）、ReactSVGOverlay、真正的混入（Real Mixin）、依赖注入（Dependency Injection）、自动面板管理（Automatic Panes Management）、交互式状态管理（Interactive State Management）、行为与模式（Behavior & Mode）。
    3. 落地 成功应用到 WLS 项目，业务与核心实现分离，使得后期开发只注重业务，代码更简洁、更易于维护。

教育经历

2009/09-2013/06 | 大连大学（本科）| 计算机科学

在校期间成绩优异，成功通过大学英语四级考试。曾荣获“大连大学英语写作一等奖”、 “大连市数学竞赛三等奖”以及“全国高等院校数学竞赛辽宁省三等奖”。 计算机相关课程包括：C 语言基础、ASP 网页制作、ASP.Net 网站制作、C++ 基础、关系型数据库设计原理、Flash 实践、VB 基础。 独立研究过 Python 和 Java，毕业设计聚焦 Python 在物理实验数据处理中的应用。