詹韬-前端工程师-简历

个人信息

1
2
3
4
5
6
7
8
9
10
{
title: 詹韬/男/1996/大专
working life: 3
phone: 13161472239
Email: [email protected]
Blog: https://cacivy.com
Github: https://github.com/cacivy
job title:前端高级工程师,专注于前段工程化以及数据可视化方向
salary: 20k~25k
}

技术栈

  • 编程语言 Javascript/Typescript/CSharp
  • 前端框架 React/Vue/Angular/Avalon/Next/Gastby
  • 后端开发 express/koa2/nestjs/ASP.NET MVC, 熟悉resetful接口开发,了解graphql
  • HTTP 了解HTTP协议,掌握跨域、缓存、Auth、JWT等
  • 前端工具 Webpack/Rollup/Gulp/Sass/Postcss/Jade
  • 数据库 MySQL/Mongodb/Redis
  • 持续集成 Git/SVN/api-blueprint/Webhook/nginx/docker/travic
  • 测试相关 Jest/Mocha/Chai

工作经历

国美互联网 (2016/08/09 ~ 至今)(T2-3)

BI自助查询系统

实现可视化数据查询功能,通过拖拽、筛选等操作实现指标/维度选择,并可生成多种类型报表,包括Table、单指标、图表等…以及多仪表盘功能,可以自由拖动报表位置、调整大小、独立报表类型等操作

  • 使用Typescript+React+Mobx+Ant-design搭建
  • 使用react-router-v4,用组件路由的方式实现权限控制以及代码分割
  • 很好的实践了组件分离的思想,多页面复用,并且实现嵌套组件(针对仪表盘中不同报表类型)
  • 实现完整前端工程化以及自动化(webpack+prettier+tslint+precommit+jenkins)

大数据应用平台

使用React重写前端部分,实践了前端工程化,系统管理的增删改查页面可以通过配置columnssearchList等信息自动生成,并且可以自定义操作菜单

  • 使用React+Mobx+Ant-design搭建
  • 通过git-hookpre-commit钩子验证eslint
  • json-server+fakerjs实现mock server,并配置webpack-dev-server实现接口代理
  • 使用api-blueprint实现resetful api接口文档
  • 使用jest+enzyme实现单元组件测试
  • 使用Decorator的方式实现自动生成组件页面(CURD),可以兼容多数页面,保证开发效率

高管报表(WAP)

通过React构建,搭配Ant.design(mobile)实现前后台界面。业务逻辑实现前端自动化,通过后台配置并绑定url,实现后端(node)传入配置自动渲染报表,并实现菜单切换、历史数据查询、复杂表格、图表展示、筛选、点击下钻等功能

  • 脱离了原有的复杂开发模式,约定组件api,后台配置报表url,根据请求返回的配置渲染相应报表,实现前端自动化,并且支持复杂表格(单元格合并、筛选)和交互、下钻等功能
  • 通过React+Redux搭建,采用单方向数据流,下钻功能通过递归组件实现,可以无限级的下钻并测试性能出色
  • 后续报表开发无需前端开发人员参与,节省人力时间成本
  • 通过动态设置viewport+rem(postcss自动转换)实现移动端不同设备适配
  • 使用webpack-bundle-analyzer分析打包体积,通过多种优化手段(抽离公共库、忽略无用引用、gzip等)保证首屏渲染速度

数据开放平台

后台报表展示以及前端半自动化,后端使用express,包括权限控制、报表数据查询功能。前端使用Vue+Vuex+Vue-Router+bootstrap搭建,通过gulp配置webpack,后期从ES5升级到ES6

  • 该项目我主要负责前端组件的添加维护,以及后端api的开发,在原来的基础组件上添加了全局组件,并添加了平台权限管理的功能
  • 项目使用了Vue+vuex渲染前端报表并保存状态,通过读取配置请求相应接口,并生成报表,通过自动渲染,实现了前端生产力的解放

数据开发平台

该项目实现了一个完整的BI流程,包括图形化/手动输入SQL实现添加数据源以及调度管理,并实现组件绑定数据源,报表图形化管理,并且可以绑定控制组件和展示组件,实现报表联动功能

  • SQL查询界面: 使用Codemirror实现SQL编辑框,左侧使用手风琴控件选择数据库列表,支持多数据库(Hive、MySQL、Kylin),可以通过拖拽直接生成SQL
  • 组件界面: 通过基础组件+Table+Chart多维度绑定columns,即时预览
  • 报表界面: 通过自定义布局,将组件拖入相应布局位置即可实现报表,并且通过组件id进行绑定
  • 权限管理: 通过vuexpremission信息判断是否显示操作按钮,通过后端返回状态码(403)控制相应页面的权限

北京北迈科技股份有限公司 (2014/09/20 ~ 2016/07/20)

Sass云平台

负责整体项目的开发及搭建,并帮其它项目成员编写可复用的组件 使用Asp.Net MVC + VueJS进行前后端开发,后端主要提供数据接口。

  • 使用Vue-cli进行前端的搭建,修改webpack配置实现多页面构建,并通过后端引入
  • 根据业务需求fork并修改Vue-Strap开源项目
  • 实现了上传、分页、列表等通用组件,以及多级筛选的复杂组件

POP商家平台

  • 第一版使用AvalonJS,保证兼容性,并完成多级下拉框联查、复杂table、手风琴等组件
  • 第二期使用了Angular,主要是CURD页面,通过扩展如w5cvalidator、angular-router实现更复杂的业务需求

电商网站前台

  • 安装店页面:调用百度地图Api获取当前城市,并在地图展示安装店图标。地图左侧为安装店列表,根据用户坐标以及安装店坐标计算出距离并进行排序。
  • 保养页面:使用VueJs开发,通过MVVM模式极大的简化实现了购物车的商品添加等操作
  • 购物车:使用MongoDB保存用户购物车数据,未登录用户以SessionID保存。使用JQuery实现,采用OOP思想,来实现购物车的常规操作,数量添加修改。其它功能有安装服务选择以及安装店选择,使用类似安装店页面的JS插件实现安装店选择,并通过Solr查询安装店信息。
  • 项目整体优化,如MySql索引、Redis缓存、MongoDB存储购物车信息

开源项目和作品

开源项目

  • zhihudaily 知乎日报,使用vuejs开发,并使用express实现接口代理
  • 2048 小游戏, 使用react+mobx-state-tree构建,并通过travis+codecov实现持续集成
  • koa-typescript 使用koa+typescript+mongodb搭建的后台resetful api项目
  • mder-electron 使用electron+react实现的markdown编辑器客户端

演讲和讲义

  • 16/12月公司内部分享 《Angular+Typescript构建cnode社区》 angular-cnode
  • 6月公司内部演讲 《大数据应用平台前端选型》
  • 7月公司内部分享 《通用报表系统前端架构》
  • 7月公司内部培训 《React浅析》