范翔宇

Web 前端开发工程师
Tel: (+86) 177-735-42132 | Email: shoyuf@shoyuf.top
Blog: https://shoyuf.top | GitHub: https://github.com/shoyuf
教育经历
黑龙江科技大学
网易前端微专业
个人介绍
开源项目、产品设计经验
负责过多个开源项目,从原型到前后端产品落地:「Web端与移动端的影视下载客户端」和「基于地图和表格筛选的职位爬虫工具」,后者解决了现有社交求职 App 中对于地域概念过于模糊的问题
乐于分享
个人独立博客SegmentFault 社区和个人公众号中多次分享技术文章和参与技术讨论,在公司任职过程中多次组织技术分享
持续保持知识积累,对新技术好奇
每周于语雀知识库中编写技术总结,对 CSS Houdini、Serverless、PWA 等新技术持续保持好奇心
工作经历
广州荔支网络技术有限公司(荔枝集团) - 前端开发工程师
负责内容线、社交线等业务前端开发工作及其他
广州滴普科技有限公司 - 前端开发工程师
负责前端项目交付、公司组件库维护、新技术预研、前端分享等工作
参与业务脚手架维护,负责 Composition API,TypeScript等接入,应用到了公司十余个项目中,得到了较好的评价
成都喜元网络科技有限公司(喜马拉雅)- 前端开发工程师
负责喜马拉雅配音平台开发、方案调研、开发脚手架搭建等工作
上海易贷网金融信息服务有限公司(成都)- 前端工程师
负责 BI 页面制作,数据导出,微信公众号开发,小程序开发,页面制作等工作
离职原因:监管原因,平台不能继续运营
成都方米科技有限公司 - Web 前端开发工程师
负责 页面开发、方案调研、接口调试、性能优化等工作
离职原因:个人发展
部分项目经历
研发效能平台 - 中后台系统 - Vue
介绍:该项目是一个敏捷开发管理平台,用于管理软件开发流程中各迭代的开发进度。项目基于 Nuxt.js 与 qiankun 与微前端主应用对接
负责 TypeScript 和 Vue Composition API 的接入,保障类型检查和分享接入总结
负责开发模块的 Cypress 测试用例编写,保障产品质量并总结使用感受
某微信 B2C 商城- Vue
介绍:该项目具有上亿交易量,数十万使用用户的微信商城平台。有商城管理系统和微信商城两个部分
负责开发、重构项目内子模块代码,对整个代码进行前端性能优化,并分享文章
项目进展中微信海报分销裂变玩法,针对客户对海报图片上传效果不满意的问题,做了 Canvas 海报预览方案,得到了客户满意的评价
项目后续研发过程中从本地开发打包上线带来的效能问题,研究基于 Gitlab 搭建 CI/CD 相关流程,效率得到提升
由于开发人员人员变动频繁,出现了开发代码质量问题,使用代码格式化相关工具(ESLint、husky等)对代码对项目组提交代码进行规范化,并组织 Code Review 保障代码品质
负责接入 Sentry 前端监控系统,保障线上环境运行异常及时发现
逛街资讯 - 移动端社交资讯服务 - 小程序/Vue
介绍:该项目是针对成都地区室内商场导览和资讯的微信公众号和小程序
独立负责小程序和公众号的开发。与设计人员配合,完善设计规范和实现公共组件库
项目中为解决 Single Page Application 在微信 X5 内核浏览器的各种兼容性问题,总结并分享了相关微信分享问题的解决方案
微信小程序基于 Tencent/wepy 项目开发,为 wepy@1 框架开发一个 PostCSS Compiler 并得到了官方仓库 merge
故宫阅读 - B2C商城 - Vue/Hybrid App
独立负责基于 Cordova 与 Vue.js (Vux) 开发的 Hybrid App 开发,同一份代码兼容微信端版本,实现 write once,runngin on two platforms 的目的
对接微信 JS-SDK 与 Android / iOS SDK,完善两端用户体验
打包发布测试版本,熟悉 iOS 和 Android 平台相关打包发布配置
喜配音 — 喜马拉雅 ToB 端配音平台 - Vue
负责对项目 webpack 配置进行优化,提升页面体验,实现部分页面预渲染
负责实现一个 HTML5 音频播放器,并在新主播平台公用维护
解决后端资源消耗问题,迁移部分需求至前端实现(大文件下载等)
【开源项目】基于 Node.js 的个人博客 - egg.js
博客和个人首页基于 Node.js 开发,和语雀文档一起用于记录学习资料文档和实验新 Web 特性
对于移动端设备和 PC 端设备访问分别使用懒加载(lazyload)和服务端渲染(SSR)方案,保障用户体验和SEO
首页基于 PWA 技术实现合理利用 Cache Storage 为保障弱网、断网用户体验
基于 HTML5 语义化标签和其他技术方法,探索视障人群无障碍体验
持续对项目进行性能优化,lighthouse 评分保持 90 分以上
接入 Node.js 性能分析与监控平台,对内存泄漏等不易察觉问题进行及时监控
【开源项目】基于 Electron 的影视客户端
跨平台(Windows/MacOS/Web)支持,了解 Electron 中 Web 与 Node.js 通信方式
响应式布局,同一套代码适配桌面端与移动端
基于 SDK 实现批量下载功能,JSSDK 调用迅雷下载软件
【开源项目】基于 Node.js 的职位筛选爬虫
API 来源于客户端和小程序 HTTPS 抓包,了解 Charles 和 Wireshark 等工具的使用
使用 MongoDB 的数据存储模型,对数据进行清洗和存储
实现一个 Web 界面,可在地图上根据使用者需求对职位进行筛选展示
使用 Docker + Jenkins Pipeline 实现自动构建部署,使部署发布更简便