张星海

全栈工程师

  • 性别：男
  • 住址：广东深圳
  • 电话：+86-18742538743
  • 邮箱：zhangxinghai79@gmail.com
  • 民族：汉
  • 籍贯：湖北
  • 学历：本科
  • 意向：2D/3D 可视化方向

简介

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

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

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

技能

  • 前端开发 熟练掌握 React、Vue、Angular、Tailwind CSS、TypeScript 和 ES6，能够高效开发高性能、可扩展、可维护的 Web 应用。
  • 图形化技术 熟悉 Canvas 和 WebGL API 并且深入掌握 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-__ | 个人项目

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

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

  • 负责前端工程建设，设计与开发高性能 仓库实时监控系统 及 仓库图形编辑器(WLS)。
  • 主导并组织组内成员参与 2D/3D 仓库图形库(WIK) 的设计与开发，提升系统的可扩展性与性能。
  • 使用 Leaflet、Three.js、React 等技术栈，成功实现状态驱动视图、实时数据推送、协同操作等关键功能。
  • 优化系统架构与前端流程，支持高频次 WebSocket 消息推送，确保系统高性能与高可用性。
  • 负责团队协作与任务分配，推动项目按时交付，并有效提升开发效率与团队合作。

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

  • 负责华为 BPIT CBGIT 部门渠道产品（toB 商城）的研发工作，推动项目从 ES6 迁移至 TypeScript，提升代码质量与可维护性。
  • 主导全平台性能监控系统 Sentinel Dashboard 的前端架构设计与实现，确保系统稳定性和高效的性能监控。
  • 参与项目全生命周期，优化用户体验，提升系统的可扩展性与性能表现。
  • 配合团队进行技术难题攻关，推动项目按时交付。

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

  • 负责药品进销存系统的前端架构设计与实现，确保系统的稳定性、可扩展性及高效性。
  • 组织并开展新同事的技术培训，提升团队整体技术水平。
  • 与后端团队紧密合作，优化数据交互和前端性能，确保业务需求的精准落地。
  • 参与需求分析和技术方案设计，确保项目的高质量交付。

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

  • 负责开发基于淘宝服务平台的多个应用，提升了平台用户体验与系统稳定性。
  • 参与地方政府相关项目，提供技术解决方案，优化用户界面及交互设计。
  • 主导美国医师资质认证系统的前端开发，提升了系统的可扩展性与性能。
  • 推动公司前端技术架构的优化，制定开发规范，提高了团队开发效率。

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

  • 负责 CMS 产品及零售系统 (e-commerse) 的研发与维护，涉及 ASP、PHP、服务器端开发。
  • 主导系统架构与功能开发，确保产品的稳定性与扩展性。
  • 组织销售团队进行新软件使用培训，提升团队对产品的理解和应用能力。

项目经历

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

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

  • 描述

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

  • 技术栈

    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 和面向对象设计 OOD，实现了清晰架构、良好的可扩展性，便于维护及团队协作开发。
    4. 实现了高性能设计，能够稳定处理 50Hz 数据推送，并支持了 2 万货架的实时渲染。
    5. 结合 leaflet 和 react 实现了 ReactSvgOverlay，支持了实时 SVG 渲染，包括输送线和充电桩，提供流畅的直线与曲线动画及设备故障警告。
    6. 实现了分库区监控功能，实时展示设备状态和列表数据，并提供快速查询支持。

仓库布局编辑器（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. 优化项目架构与开发流程 设计适合多人协作的项目架构，制定开发规范，确保代码质量和一致性，促进高效开发和团队协作。
    2. 技术创新 通过改写 Leaflet 的事件发布逻辑，实现图层穿透交互，多个 canvas 图层可同时交互，优化用户操作体验。
    3. 大规模数据支持 成功实现了 2W 货架、4W 点的高效渲染与实时交互，满足了大规模仓库的管理需求。
    4. 实时数据同步 与后端实现实时数据保存与原子级数据交换，支持多端协同操作，保障数据一致性。
    5. 功能实现 实现了元素拖放添加、移动和删除，Undo/Redo 功能，交互模式管理等，提升了系统的灵活性与用户体验。
    6. 国际化与多语言支持 完成 8 种语言的国际化支持，拓宽了产品的市场覆盖面。
    7. 高效的地图编辑体验 完美实现 React 与 Leaflet 地图的互操作，简化了地图设计与交互流程。

仓库图形库（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. 模型驱动（Model-Driven） 用户可以定义强大的模型，并通过事件驱动这些模型来渲染视图，实现高效的视图更新。
    2. 数据驱动（Data-Driven） 每个视图都具有自己的状态，可以随时间变化呈现不同的展示效果，类似于 React 的状态管理机制。
    3. 一模型多视图（1 Model => N Views） 由于模型和视图分离，一个模型可以同时驱动多个视图的变化，从而提升灵活性和可维护性。
    4. React-SVGOverlay 传统的 Leaflet SVGOverlay是静态的，Wik 使其变得响应式，提升了交互性。
    5. 真正的混入（Real Mixin） 提供比重写类原型更灵活的混入机制，避免了继承层次的复杂性，提升代码复用性。
    6. 依赖注入（Dependency Injection） 通过解耦接收者和依赖项，减少紧耦合，实现更灵活的代码复用。
    7. 自动面板管理（Automatic Panes Management） 面板根据类别自动管理，并且仅限于 Leaflet 地图视图的范围内。
    8. 交互式状态管理（Interactive State Management） 支持鼠标悬停、选中、高亮等交互状态，并且支持扩展，增强用户体验。
    9. 行为与模式（Behavior & Mode） 提供强大的可扩展交互能力，用户可以在不同模式下管理和操作不同的行为，提升灵活性。

教育经历

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

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