当我写H5时，我到底在写什么？

背景

“活动宣传写个H5就可以了”，”学生节不如做一个H5小游戏吧，比如之前那种学堂路躲避乌鸦“……在这几年的学习和生活中我听到过很多次H5，也真正看到过、使用过、制作过H5，但是我对H5这一个词的真正定义还是不太了解。它给我的直观印象就是在手机上运行的、包含许多动画甚至音乐的纯前端/弱后端页面，最常见于微信群、公众号和朋友圈，或许这也是大多数人对其的印象。对自己接触的东西一点也不了解是不能接受的，所以要简单调查调查。

H5的由来

几种定义

• h5是HTML的第5级标题标签；
• H5是在手机上运行的、包含许多动画甚至音乐的纯前端/弱后端页面；
• h5是2014年10月由W3C制定的HTML新一代标准，其中包含了新标签、新属性、多媒体和本地存储等特性。

H5为什么火？

H5是HTML的第5代标准，它不是一个新的应用，不是一个编程语言，甚至不是一个实体(Web应用、微信小程序等)，他就是常规意义上的HTML新版本，和C++17、C++20差不多。HTML等Web应用相关语言和Golang、C++等语言还不一样，它们的标准还需要各大浏览器的运行时支持才算是“真正”拥有了新特性。但是如今大多数用户都能够很方便地通过电脑、手机接触到Web应用，其中不乏动画酷炫、插画精美、音乐好听、让人眼前一亮的应用，开始有人将这样的应用叫做H5，后来逐渐传开再也无法很好地定义了。

普通用户是不会去了解H5到底是什么的，隔行如隔山，弄明白这个对用户来说作用不大。据我观察，各大H5应用模板网站也不会强调这个H5到底是怎么做的，而是统一作为模板打包卖给用户就行。H5可能是纯前端的，也有可能有弱后端，但是“注重呈现”应该是H5的核心，有“动态海报”内味儿。接下俩的H5统一取第二个定义。

H5的组成

H5也是Web应用，那么就离不开HTML、CSS和JavaScript，HTML负责文档结构、CSS负责视觉样式、JS负责业务逻辑，在写H5的时候其实是在写这三种语言。HTML5中的如<canvas>、<audio>、<video>和<svg>等新标签确实为前端的图形渲染提供了良好的载体，但是应用的代码组织与以前差别并不是很大。如今许多浏览器都支持HTML5标准，许多前端程序员也在使用HTML5标准提供的新标签，那么可以说现在只要是写前端都是在写H5。

SPA - 高级H5

单页面应用(Single Page Application)的说法最近几年非常流行，前后端分离的开发风格、Web技术和云计算的发展使得浏览器中运行的Web应用无论是开发流程还是使用体验上都越来越接近原生应用(Native Application)。许多SPA的功能全体量大，不输给原生应用。HTML5中提供的本地存储(localStorage)特性相信许多开发者都用过，使用它可以构建相当强大的功能。那么把它叫做高级H5也不过分吧？（doge

另外，如Vuejs、Reactjs等在内的前端开发框架也简化了SPA的开发。

我以前接触过Vuejs和微信小程序，当时觉得微信小程序是大部分借鉴了Vuejs的精髓。前一阵子又看了看Reactjs的文档，发现微信小程序的架构里也能发现Reactjs的影子……虽然React有facebook官方的支持，但是有一说一它的中文文档是真的不行，过时的文档google出来结果竟然还在前列。相比之下Vue虽然没有大公司支持，但是越来越赢得开发者的青睐，其文档的完善也是一大因素吧。