余俊帆

高级前端工程师 / 前端架构师

|
YJF

关于我

深耕前端开发10年,精通 React (v16-v19)React NativeVue (v2/v3) Electron 桌面端开发。 具备从零到一构建企业级中后台、高性能可视化大屏、跨平台 App 及复杂桌面应用的实战经验。

擅长 IoT 物联网交互(NFC、蓝牙、TCP/串口通讯)、多媒体视频流(海康威视平台对接)及 3D 交互展示(Three.js)。具备全栈视野,能独立完成从架构设计、原生模块桥接(Kotlin/C#)到自动化部署的全流程工作。

作为 AI 驱动型工程师,深度集成 Cursor Pro 辅助开发,在复杂业务场景中,能够灵活运用 Next.js SSR/SSGVite MPA 架构及 Native Modules 桥接技术,实现高性能与高可维护性的平衡。

10年+
工作年限
20+
主导项目
全栈
技术栈
Cursor Pro
AI 赋能
技术主题图片
持续探索前沿技术

核心技术栈

前端框架

React v19+Next.jsVue v3/v2React Native 0.81+Electron

桌面/原生

Electron (Vite).Net WinUI3 (C#)Android (Kotlin)

通讯/硬件

TCP SocketSerial Port (串口)NFC (NTAG213)蓝牙交互

视频/多媒体

Video.js海康威视对接实时直播流HIKVISION

数据可视化

Three.js (R3F)EChartsAntV L7高德地图 2.0

构建/状态

ViteWebpackZustandMobXTailwind CSS 4

服务端/部署

Node.js v20+DockerNginxGit

AI 赋能

Cursor ProAI 辅助开发逻辑重构架构优化

工作经历

广东先知大数据有限公司

资深前端工程师

2019.07 — 至今6年+

负责公司核心产品线的架构设计与开发,涵盖工业化管理平台、智慧体育大屏、IoT 物联网应用及 Electron 桌面端 3D 展示系统。主导技术栈升级(React 19, Next.js, RN 0.81),引入 AI 辅助开发流程。

广东如一出行有限公司

前端开发工程师

2019.01 — 2019.076个月

负责顺风车后台管理系统及司机/乘客端小程序、H5 的功能开发。

广东元心软件有限公司

前端开发工程师

2015.03 — 2018.01近3年

参与农业数字化产品开发,负责前端业务功能实现。

项目经历

武器装配 3D 交互展示系统 (桌面应用)

武器装配 3D 交互展示系统 (桌面应用)

ElectronReactThree.js (R3F)ViteIPC
  • 双进程架构,通过 IPC 通信抽象层实现渲染进程与主进程高效数据交换
  • 利用 React Three Fiber 实现 3D 模型 360° 旋转、缩放及“爆炸图”拆解动画
  • Node.js 直接管理本地大体积视频与 3D 模型资源,突破浏览器沙箱限制
先知体检通 & 智慧体育大屏

先知体检通 & 智慧体育大屏

React Native 0.81ExpoTCP/串口通讯Kotlin Native
  • 基于 React Native Native Modules 桥接技术,封装 Kotlin 原生模块实现串口通讯与数据透传
  • 在 React Native 层抽象统一的数据获取接口,实现与硬件设备的实时双向异步交互
  • 设计 autofit 适配方案,确保应用在不同尺寸大屏上的视觉一致性
“互联网+明厨亮灶”智慧监管平台

“互联网+明厨亮灶”智慧监管平台

ReactAnt DesignVideo.js海康威视对接
  • 深度对接海康威视视频平台,实现多路监控视频实时直播与历史回放
  • 结合 react-keep-alive 实现多页签模式下的页面状态缓存
  • 使用 ECharts 构建区域风险分布图谱,实现监管数据多维可视化
潮玩行业多端门户 (小程序 & H5)

潮玩行业多端门户 (小程序 & H5)

Taro 4.0React 18MobXTailwind CSS 4
  • 基于 Taro 4.0 实现一端编写多端运行,weapp-tailwindcss 原子化样式开发
  • 采用分包加载策略与资源静态化处理,显著提升首屏加载速度
  • 集成 i18next 实现全链路多语言支持,适配全球化业务需求
企莞家政务数字化平台

企莞家政务数字化平台

UmiJSReact高德地图 2.0Ant Design Pro
  • 设计模块化路由注入方案,支撑数十个业务子系统的快速接入与统一管理
  • 深度集成高德地图 API,实现区域产业分布图谱与空间数据分析
NFC 无源锁移动应用 (IoT/App)

NFC 无源锁移动应用 (IoT/App)

React NativeKotlinSM-CryptoNFC 交互
  • 深入 Android 原生层实现 NTAG213 协议读写,完成精密指令传输
  • 集成国密 (SM-Crypto) 与 AES 算法,确保硬件通讯链路绝对安全性

知识库 & 博客

记录技术成长,分享开发心得。在蓝马知识库中,我沉淀了关于前端、跨平台开发及 AI 技术的实践经验。

蓝马的知识库

一个专注于技术学习与实践的个人知识库,涵盖了从底层语言到现代框架的完整技术体系。

访问知识库

技术栈

JavaScriptTypeScriptC#ReactVueAngularNext.jsTaroNestjs

应用开发

智能体Web应用移动应用 (React Native)桌面应用 (Electron, WPF)小程序

编程语言

JavaScriptTypeScriptC#

持续更新中

记录学习过程,构建个人技术体系

自我评价

高效 AI 赋能

深度使用 Cursor Pro 等 AI 工具,擅长复杂逻辑重构与架构优化,开发效率极高。

全平台开发能力

具备 Web、小程序、App 及桌面应用的全平台开发经验,能处理复杂的跨端兼容性问题。

硬件交互专家

熟悉 TCP、串口、NFC、蓝牙等多种通讯协议,具备丰富的 IoT 硬件对接实战经验。

视频处理经验

熟练掌握海康威视等视频平台对接及实时视频流播放技术,具备 3D 交互展示开发经验。