# 大厂 H5 开发概述

## H5 开发及其前世今生

![H5 开发的前世今生](https://user-gold-cdn.xitu.io/2018/3/2/161e5e2bebec560f?w=1207&h=127&f=jpeg&s=44914)

在腾讯，「H5 开发」有设立对应的实体岗位：「[UI 开发工程师](https://www.lagou.com/jobs/2634151.html)」，这个岗位早在两三年前由「网页重构工程师」演变而来，最早出现在 SNG（社交网络事业群）的用户体验设计部（[ISUX](https://isux.tencent.com/)）。与阿里和百度不同的是，腾讯的岗位职能分得比较细，传统的「网页重构工程师」虽然也属于前端范畴，但其工作职责主要负责静态网页制作（设计稿还原成为网页）和少量的 JavaScript 脚本逻辑开发，但随着 HTML5 和 CSS3 相关技术标准的出现与普及，重构工程师除了前面提及的基本工作，还要肩负「CSS3 动效开发」等 UI 相关的工作，「重构」的工作定义已然无法契合新时代的要求，于是便有了「H5 开发」的概念。

在京东，前端开发岗目前尽管没有细分出「H5 开发工程师」或「UI 开发工程师」这种实体的职位，但为了针对性地招聘人才，一些技术部门（如凹凸实验室）仍然会以「[H5 开发工程师](https://aotu.io/join/)」或「[H5 前端开发工程师](https://aotu.io/join/)」来招人。「H5 开发工程师」的职责要求其实与腾讯的「UI 开发工程师」基本一样，未来也许会统一沿用腾讯「UI 开发工程师」的叫法并设立相应的实体职位。「H5 开发」其实不太需要后端开发经验（有则为加分项），偏向界面还原制作、前端脚本逻辑的实现，同时与谷歌 2017 年提出的新岗位-动效设计师（[Motion Designer](https://design.google/jobs/motion-designer/)）也有交集，要求具备动效设计以及开发的能力，一句话来概括就是「基于 HTML5、CSS3 等网页技术，负责可视化 UI 界面及动效的开发」。

我们可以用一张图来直观表达「H5 开发」相关岗位的具体工作内容，如下：


![H5 开发内容示例](https://user-gold-cdn.xitu.io/2018/3/2/161e63ab485d5a19?w=1782&h=782&f=jpeg&s=221147)

一名合格的「H5 开发工程师」不仅需要会做「PC 端网页」、「移动端网页」，还需要会做各类强交互、多动效的「[ HTML5 营销活动页面](https://cases.aotu.io/)」，甚至还要做动效及脚本逻辑复杂的「[HTML5 小游戏](https://cases.aotu.io/cates/%E6%B8%B8%E6%88%8F%E5%9E%8B/index.html)」。


## H5 开发的能力模型

岗位划分了员工的专业范畴，而某个岗位的职位等级则划分了员工在其专业范畴上的能力及资历的高低深浅。这就是为什么京东、腾讯等公司会开设专业晋升通道，制定每个职级的能力模型，并以此来评估人们在其专业范畴上的综合水平。

而对于职位本身的专业能力要求，我们也同样可以梳理出相应的评估模型，了解这个模型，一方面可以帮助大家定位自己在某个专业方向上的水平和位置，而另一方面则可以作为岗位招聘者面试时对应聘者能力定位的初步评判依据。

参考前面提及的「H5 开发」相关岗位的具体工作内容，我们大致可以梳理出「H5 开发」的能力模型，如下：

![H5 开发能力模型](https://user-gold-cdn.xitu.io/2018/3/6/161f90458e69df9b?w=1442&h=536&f=jpeg&s=38516)

这个能力模型长着一张三角脸，往下代表能力的基础性，往上代表能力的进阶。其中「基础页面开发」、「响应式页面开发」、「滑屏应用开发」以及「动画效果开发」是岗位的基础能力要求，「游戏开发」是高阶能力要求。换一个说法，掌握「基础页面开发」，我们就能应付「PC 端网页」的开发；掌握「响应式页面开发」，我们可以撸「移动端网页」；掌握了「滑屏应用开发」以及「动画效果开发」，我们能开发各类强交互、多动效的「[ HTML5 营销活动页面](https://cases.aotu.io/)」；而掌握了「H5 游戏开发」，我们才能做动效及脚本逻辑复杂的「[HTML5 小游戏](https://cases.aotu.io/cates/%E6%B8%B8%E6%88%8F%E5%9E%8B/index.html)」。

具备基础能力要求的同学，只能说拿到了岗位应聘的敲门砖，能否进到门内，要看有没有具备高阶能力的同学与你竞争；而兼具基础能力和高阶能力的同学，应聘的时候已然是半条腿迈进了门。另外半条腿，则取决于通用能力方面（如沟通能力、稳定性等）的评估，以及薪资要求是否与职级评定相匹配等非技术方面的因素。

需要提一下的是，上面并没有把「性能优化」考虑进去，因为「性能优化」是每一个开发岗位所必需的通用意识和能力，并非「H5 开发」所特定的要求。

是不是有点像打怪通关升级？越往上说明你功力越深厚，竞争力越大。

问题是，我们该如何达成这些能力？有没有对应的指导方向或案例借鉴？

这本小册将围绕「基础页面开发」、「响应式页面开发」、「滑屏应用开发」以及「动画效果开发」这 4 大基础能力展开叙述。「H5 游戏开发」以 [微信小游戏开发入门：从 0 到 1 实现井字棋游戏](https://juejin.im/book/5b7be023e51d4538850305d0/section/5b7be024e51d45389400165b) 小册独立解读，有兴趣的读者可以关注下。

下面先从「基础页面开发」说起。