• 个人博客

精通前端,熟悉后端和设计

编织有艺术感的代码

  • JavaScript & TypeScript

    精通 JavaScript,掌握 TypeScript。亲历从前后端混合、前后端分离,到模块化、工程化,再到 MVVM 框架流行的整个发展历程。掌握 jQuery、Vue.js、Nuxt.js 的使用,也维护着多个开源工具库和组件。

  • HTML & CSS

    有扎实的 HTML 和 CSS 功底,掌握浮动布局和弹性盒子布局;能通过媒体查询和 rem/vw/vh 处理屏幕尺寸的适配;具备丰富的兼容性问题处理经验。

  • Node.js

    掌握 Node.js。曾开发多个命令行工具和基于 Express 的 Web 应用。

  • SQL

    熟悉 MySQL、SQLite 等 DBMS 的使用,能熟练设计中、小规模应用的数据库。

  • Design

    具备一定的审美和设计能力,能使用 Photoshop 进行简单的图片处理和平面设计。

对 Web 充满热情

学生时代就踏上了开发之路

2001 年 9 月至 2004 年 6 月在广州市第八十六中学就读,课余开发了以黄埔军校为主题的网站「黄埔军魂」,获以下奖项:

  • “第三届全国中小学生电脑制作活动”广州市初赛高中网页二等奖;
  • “广州市中学生历史科‘研究性学习’个案征集评比活动”一等奖。

2004 年 9 月至 2008 年 6 月在华南师范大学修读软件工程专业,取得学士学位。期间:

  • 在院系的“班级网页制作大赛”中获一等奖;
  • 在社团「师大青年」任职,主导网站的重写和改版,被评为“年度优秀校园媒体工作者”。

16 年工作经验

曾在知名互联网企业任职

现在

易方信息科技股份有限公司

前端经理

负责前端团队管理,团队规模最大时达到 20 人以上。主要工作包括前端基建、团队建设、版本迭代管理等。

2021 年前,主要关注 SaaS 产品的迭代;2021 年起,工作重心转移到 PaaS 能力的建设,主导了前端 SDK 化改造。后来还担任组件产品线负责人,推进可复用功能的沉淀,提升业务线的开发效率。

2022 年,产出得到认可,先后获“阿波罗 12”二等功、“阿波罗 13”三等功

2018/11

广州市贝聊信息科技有限公司

前端经理

负责 4 人团队的管理。工作重心是前端基建,包括:

  • 开发 Back2Front 框架,承载内容展示为主的页面。
  • 基于 Vue CLI 创建的项目进行二次开发,形成团队的项目模板,用于开发数据交互多的项目。模板内置调试工具,能有效提升 WebView 下的调试效率。

此外,还组织团队内的技术分享,并把优秀分享选为「前端讲坛」的主题。

因工作上的成绩,获“二〇一七年度最佳员工奖”。

后因公司缺乏有效盈利模式、缩减规模而离职。

2016/12

广州绽放信息科技有限公司

高级前端开发工程师

作为前端技术负责人,基于 Node.js 搭建中间层实现前后端分离,并在此基础上带领 2 名工程师共同开发美黛拉手机站和 PC 站。

因公司盈利欠佳、调整业务重心而离职。

2015/4

广州市千钧网络科技有限公司

高级前端开发工程师

主导 JavaScript 代码的模块化重构,并负责视频上传、播放等核心业务。

此外,还作为内部讲师分享了技术原理和开发经验。

因公司被搜狐收购,要长期应付对自身没有太大提升的整合对接工作而离职。

2012/9

广州奔步广告设计有限公司

前端开发工程师

主要负责外包网站的开发和维护,也为业务系统团队提供前端协助。

因平台小、工作技术含量低而离职。

2011/5

广州久邦数码科技有限公司

ASP.NET/前端开发工程师

前期作为 ASP.NET 工程师参与了内部流量统计系统和手机门户网站的开发;后期响应公司战略,回到前端岗位参与 hybrid 应用的开发。

工作一段时间后,认为公司缺乏核心竞争力,故离职。

2010/11

广州网易信息科技有限公司

页面工程师

初期负责专题页面的制作。部门结构调整后,因 JavaScript 水平拔尖,转而负责网易跟贴内部 CMS 等重要项目的开发。

因部门搬迁到北京而离职。

2008/5
2007/9

动网先锋网络科技有限公司

ASP 技术员(实习)

大三暑假时的实习工作。前期负责动网论坛定制业务,后期参与了 JScript 版动网论坛的开发。

实习三个月后离职。

2007/7

以架构对抗熵增

保持稳定和高效

主导 SDK 化改造

2021 年起,主导保利威 Web 端产品的 SDK 化改造,制定了逻辑与界面分离的开发模式:

  • 逻辑部分即 SDK 层,以 TypeScript 编写。
  • 界面部分即 UI 层,基于 Vue.js 2.7 开发。UI 层代码是开源的,客户可进行二次开发。

SDK 和 UI 除了提供给客户集成,也用于自家 SaaS 产品,从而避免了在 SaaS 侧和 SDK 侧的重复开发。

改造过程中,还开发了部署 SDK 的脚手架,在 CI/CD 中调用。功能包括:

  • 调用 ali-oss 把构建生成的文件传到阿里云 OSS
  • 创建子进程执行 npm 命令,把构建生成的代码包发布到 npm 源

应对风险和定制

保利威 SaaS 产品拥有大量客户,一方面对稳定性有很高要求,另一方面也要快速迭代

2020 年,借鉴微前端的思想,使前端应用在运行时根据后端接口返回值,去加载、运行特定分支构建出来的代码

基于该机制,实现了实验功能的灰度发布和定制功能的定向发布

探索同构渲染

2015 年,在美黛拉任职期间,开发了基于 ExpressXTemplate 的中间层实现前后端分离。

加入贝聊后,于 2017 年把该中间层改造为 Back2Front 框架,并开发了对应的构建工具。该框架在一定程度上支持同构渲染单文件组件,但不具备监测数据变化去更新 DOM 的能力,所以更适用于以内容展示为主的应用。

推动模块化

2012 年,加入 56 网后,在团队内主导 JavaScript 的模块化改造:

  • 分享了模块化的机制、优点,以及模块加载器的实现原理。
  • 开发了模块加载器 Bowl.js 及其构建工具
  • 开发了模块化的基础库和 UI 组件,支撑业务开发。

搜狐收购 56 网时,56 网主要的 Web 端产品均已完成模块化改造。

打造低代码

2010 年,作为主要开发人员参与「网易可视化专题系统」的开发。

该系统支持在所见即所得的界面中,通过模块拼装快速制作专题页面。系统中的每个模块都有两套模板:前端模板(Micro-Templating)与后端模板(Velocity)。前者用于在编辑界面中渲染 HTML,实现所见即所得;后者才是真正生成的代码。

为了避免后端的改动,用于二次编辑的页面结构数据(JSON)是以 Velocity 注释的形式保存在最终生成的代码中。

主导多次项目重构

充分体会延迟满足

保利威直播观看页

重构与页面改版同时进行,基于 Vue.js 2.6 开发。

主要负责前期设计规范的沟通、项目搭建,以及页面总体布局的编写,具体功能开发由团队成员负责。

为避免全量替换旧版导致大面积故障,新版采用灰度发布的方式逐步开放给客户使用。

保利威直播观看页

保利威网校平台

基于 Nuxt.js 重构,兼顾 SEO;在服务器上通过 PM2 运行。

页面中与用户身份无关的主数据在 Node.js 端进行请求并完成渲染,与用户身份相关的数据则在前端请求和渲染。在这种模式下,页面可以通过 CDN 进行缓存,减轻 Node.js 端的负载。

56 网 PC 视频播放页

观看视频的主页面,有普通播放页、专辑播放页、剧集播放页三种类型。重构过程中,通过把页面功能模块化按需引入,达到高度复用的目的。

为提高性能,采用了内联播放器代码延迟加载延迟渲染事件代理等优化方式。

此外,还对页面异常信息进行采集,以便及时发现和排查故障。

56网PC视频播放页

网易跟贴

Micro-Templating 渲染 JSON 数据的方式实现前后端分离。

跟贴的嵌套式“盖楼”结构以递归方式渲染。以当时浏览器的性能,一旦渲染大量高楼层跟贴,页面就有崩溃的风险,故以 70 层为最大楼层数。

网易跟贴

拥抱开源

造更好的轮子

Just4

2008 年,在网易任职期间,开发了 JavaScript 基础库 ntes_jslib,用于整个门户网站。在多次迭代,并剥离了网易的业务逻辑后,形成了对外开源的 JRaiser v1 版本。

2012 年,对 JRaiser 进行模块化改造,形成了支撑 56 网业务开发的 v2 版本。此后多年,都在该版本基础上迭代。

2018 年,再次对项目进行调整,使其可以发布到 npmjs,即 v3 版本。

2020 年,以现代化的前端工程模式对 JRaiser 进行重构,并改名为 Just4。Just4 以 TypeScript 重写,通过 TypeDoc 生成 API 文档。它提供 ES 标准的模块、带有类型声明,且大部分功能兼容至 IE 9。以下为部分功能模块:

  • @just4/dom:DOM 操作库,实现了 jQuery 的大部分接口。
  • @just4/request:HTTP 请求库,能在浏览器和微信小程序下运行,且支持通过适配器在其他环境下运行。
  • @just4/virtual-list:封装了虚拟列表功能中,随数据量及可视区域变化而执行的数据请求和 DOM 节点增删操作。

UA Detector

在 56 网任职期间,主导了「访客环境统计系统」。

该系统的核心就是用 Node.js 编写的 User-Agent 分析器,能识别出设备品牌操作系统浏览器内核浏览器

开发过程中以 56 网生产环境的 Nginx 日志作为样本,提高匹配度;在后续几家公司任职过程中,也持续分析其生产环境的日志更新特征库。

UA Detector

LetsBlog

2009 年,基于 ASP.NET 和 SQLite 开发了博客发布系统 TidyBlog,并以此搭建了个人博客。

随着 Node.js 的成熟,基于 Node.jsMySQL 进行重写:

  • 通过 ORM 框架 sequelize 操作数据库。
  • 前台部分基于 Back2Front 框架开发。
  • 后台部分基于 Vue.jsRESTful API 开发。

这个新的博客发布系统命名为 LetsBlog。完成重写后,个人博客也更换为新系统。

个人博客

从程序员到讲师

分享是更好的提升

加入创业型公司后,为了提高团队的技术氛围,开始组织技术沙龙——前端讲坛

2015 年 12 月首次组织该活动,参与者均为熟人。

2016 年 4 月组织第二期,参与者为熟人及其朋友。

2016 年 8 月组织第三期,以分组讨论加强参与者和讲师之间的互动。

2017 年 4 月组织第四期,参与人数达到 40 人以上。

2017 年 9 月、2018 年 8 月分别组织第五期第六期,均在「活动行」平台发布。