詹韬-前端工程师-简历

个人信息

1
2
3
4
5
6
7
8
9
10
{
  title: 詹韬/男/1996/大专
  working life: 3年
  phone: 13161472239
  Email: cacivy@foxmail.com
  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重写前端部分，实践了前端工程化，系统管理的增删改查页面可以通过配置columns，searchList等信息自动生成，并且可以自定义操作菜单

  • 使用React+Mobx+Ant-design搭建
  • 通过git-hook的pre-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进行绑定
  • 权限管理: 通过vuex中premission信息判断是否显示操作按钮，通过后端返回状态码(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浅析》