H5，又见H5

发表于
本文字数： 4.8k 阅读时长 ≈ 8 分钟

从一个有趣的叫法出发，试着以梳理概念的角度，更加清晰地看待前端开发的发展和现状。

今天，你听见“H5”了吗

  1. 作为前端从业人员，最经常听见的就是甲方劈头盖脸的来一句：“需要你们这边做一个H5…”。emmmmmmmm，人的理解能力是很强的，比如就算字的序顺错了也不会我们妨碍阅读并理解其中的意思。
  2. 作为优秀的前端从业人员，稍微用一下鸭子思维，自然不用和甲方去争执一个名词的问题。但是时间久了后，不仅是甲方这么叫，前端从业人员之间也开始互相这么称呼了，一开始是因为省事，后来慢慢变成了一个模糊概念，一个“事实上”的称呼。

什么是“H5”

  1. HTML5的简称。
  2. HTML：是HyperText Markup Language的简称，也就是“超文本标记语言”，是一种用于创建网页的标准标记语言。用小黄鸭都能听懂的话说，你打开一个网址能看到页面，其中就有HTML的功劳。
  3. 所以从字面意思上说，HTML5其实是HTML最新的修订版本。技术和标准不断更新，带来的就是页面更加丰富和强大的展示能力。
  4. HTML以前还有HTML 2和HTML 3甚至HTML 4呢，以后是不是要改口“H6”？会不会有一堆人强忍尴尬，选择性地遗忘自己天天喊着的“H5”？
  5. 总之，HTML只是前端开发工作中涉及的技术里的一部分，指着前端开发说“做H5的”，其实就跟指着设计师说“P图的”差不多意思。
  6. 附上知乎上一个相关的讨论
  7. 要成为一个相关的技术从业人员，你需要学得不是“H5”，而是“前端技术”。

大大方方地接受“H5”吧

  1. “H5/HTML5”的叫法随处可见，比如各种“H5/HTML5播放器”，作为又臭又烂命还长的Flash播放器的优秀接班人，这样的叫法在业内如雷贯耳。
  2. HTML5标准在2014年提出，恰逢互联网第二浪潮风起云涌之际（第一波浪潮已经随着Web1.0时代的落幕伴随着互联网经济泡沫破裂成为过去时了）， HTML5标准带来的技术进步显而易见，所以也不能完全责怪非前端从业者对“H5”这个简洁、响亮名词的推崇和喜爱（当然也不妨碍我们吐槽其从来不想想自己怎么都没喊过“H4”）
  3. 事实上，绝非国内的特例，“HTML5”这种具有时代感的叫法，非常普遍。
  4. 因此，出于各种原因（接下来就会看到，较真起来绝对会招人讨厌的），我们大可大大方方地接受“H5”这样的叫法。
  5. 你看，“前端”这个叫法本身也很有趣。它也是软件开发不断演变后，诞生的新名词。不过都是“软件开发人员”罢了，只是随着软件开发方式的演变，根据职责的划分，诞生了所谓的“前端”、“后端”。
  6. 开发Web应用，就是让软件的图形用户界面（Graphical User Interface，简称GUI）运行在网页浏览器中。对应的开发者，即为前端工程师。对应的开发技术，就是Web开发技术。

Web开发中的一些概念

Website

  1. Web站点、Web页面、门户网站，随便怎么叫应该都无所谓。
  2. 从Web 1.0（姑且认为是1995～2001吧）时代就开始存在的类型。
  3. 门户网站大行其道，成为互联网第一波弄潮儿。个人也可以做网页，这个年代的页面都比较简单，主要功能是展示信息，承载的内容多为：新闻、图片、文章、广告。

Web App

  1. 2004年，Google公司发布了Gmail，标志着互联网应用程序（Web Application）这个概念的诞生。
  2. Web App的表现，更像是软件开发历史上的“桌面应用软件”，只不过我们不是双击了一个漂亮的图标，而是在一个浏览器里输入地址，打开了这个软件。
  3. 所以Web App可以说成：“在浏览器里打开的一个应用软件”，所以也可以称为“Web-based App”
  4. 同样是打开浏览器输入网址，区别于Website展示信息的主要目的，用户打开Web App往往不是为了查看、浏览、提交信息，而是为了进行某些操作，或者是为了使用一些功能。（比如google和gmail或者facebook的区别）
  5. 可以这么说，Web App概念的出现，象征着Web开发技术向传统应用软件工程的渗透。
  6. 相关的高大上名词就是“SaaS”（Software as a Service），也就是“软件即服务”。用户不再需要跟踪软件的更新，甚至不需要去下载、安装这个软件。打开浏览器，就能访问到最新的软件服务。本质上，是一种全新的、优秀的软件交付方式。
  7. 但人们很少这么说，接下来就会看到，“App”现在通常被用于称呼别的东西。

Mobile-Friendly Website && Mobile-Friendly Web App

  1. 随着移动设备和通信技术的发展，在移动设备上访问互联网变得普遍，其中的商机促进了软件工程的发展。
  2. 通过设备识别接口，我们可以得知用户尝试在移动设备里（一般就是指手机、平板）访问一个Website或者Web App，并给出相应的返回。
  3. Mobile-Friendly，就是要针对在移动设备里的浏览器访问，对Website或者Web App作出调整。
  4. 一般而言，需要对布局、样式都作出调整，还需要抹平兼容性上的问题。
  5. 通信技术是逐渐发展的，所以在早期，还特别需要控制移动端的下载量，避免让用户在流量上付出太多代价，或者是因为等待加载而让用户放弃浏览。
  6. 针对现在的智能设备，还需要针对特有的手势操作作出响应。

Hybrid App里的Mobile-Friendly Web App

  1. 乔布斯的卓越贡献之一，就是带来了Mobile App时代——也就是我们现在习以为常的，在智能移动终端上安装、使用各种应用。我们一般都简称这些移动终端上的应用为：“App”。
  2. Mobile App在运营上的意义表现在，你可以将它们提交到移动终端的应用市场里。（虽然有时候处于某些原因，我们不会这么做比如过不了审）
  3. Mobile App在运营上的意义还表现在，通过推送消息、更容易的内容分发、更容易实现的盈利等等。
  4. Mobile App其实根据技术实现的不同，可以分类为：
    • Native App：
      1. 移动端的操作平台，一如当年浏览器战争一样，曾经丰富多彩。只不过浏览器之间的差异却远远没有操作系统的差异那么大。
      2. 如今，就像Mac电脑上无法运行exe文件一样，在特定平台上，我们需要遵循其标准、使用不同的程序语言来开发软件。所以现在一款移动应用会同时需要iOS开发组和Android开发组来开发对应的App。
      3. 有时候我们会觉得苹果是一个封闭的帝国，但iOS和Android并没有在意义上有多大的差距，Android也不过是Google提供的一个略微开放的帝国罢了。所以就不得不说今年下半年的两开花华为鸿蒙系统，也是有存在的必要性的。
      4. 虽然Native App的开发受限与移动设备操作平台的特性，但也正因此，得到了相应的优化和足够的支持。Native App在移动设备上，可以说是表现最好的软件了。
      5. React Native，虽然在开发中使用了大量的Web开发技术，但生成的依然是Native App。可以理解为其实现了通过一种编程规则，来生成不同平台的App应用。是对开发工作的一种改进。
      6. 除了React Native，还有别的框架（比如Titanium、Weex），他们的共同特点，都是使用Web开发技术，但是通过框架编译成iOS App或者Android App。
      7. 除了使用Web开发技术来进行跨平台开发之外，也有如Flutter这样，使用Dart技术栈进行跨平台开发，本质上都是为了降低一个App需要多语言开发的囧境。
    • Hybrid App：
      1. 如字面意义，是Native App和Web App的混合体。特点是：Native App里的一些内容，是用WebView（可以理解成一个浏览器窗口）加载了Web App（更确切的说，是Mobile-Friendly Web App）提供给用户的。
      2. Web App可以通过WebView得到Native App的各种支持。因此比起直接在移动端浏览器里打开它，会具有更多的功能，更好的表现。
      3. Hybrid App可以像Native App那样被分发和管理，却具有极其灵活的内容展示。但WebView打开的Web App的显示效果、渲染性能和用户操作体验都较Native App要逊色不少。（移动端性能、WebView能调用到的资源、JavaScript单线程、DOM渲染高开销等都是原因）
      4. 同样，类似上面提到的，使用Hybrid App的架构，在另外一种意义上实现了“跨平台开发”，这对于项目组在成立初期产能不足的现状，是极具诱惑力的。跳出技术开发人员的视野，就会发现快速上线、快速迭代、快速试错，是创业获得初期成功的极其重要的一环。
      5. 在产品相对更加稳定，开发部门产能充足后，一般就会逐渐用Native来替换掉Web App的部分，加强用户体验，提供更加稳定优秀的展示和功能。但这不意味着Web开发技术会在其中就此凋零。一个具有生命力的企业，总会不断有“初步的尝试”的部分的。就我看来，Hybrid App，更多的是商业模式下催生的软件工程研发策略。
      6. 因此，现在很多Native App都乐于通过打开一个WebView灵活地加载内容，摇身一变成为Hybrid App，而比如Cordova开发的应用就更直接：完全只有一个Native App的外壳，几乎所有内容都通过WebView去加载Web App来展示。因此经常需要注水以免不过审…

小程序

  1. 既然提到了Native App，就不能不说小程序。
  2. Native App，或者说Mobile App，是凭依在Android、iOS平台上的软件；小程序也是依自己的平台/生态而生，比如微信小程序、支付宝小程序。微信平台还有公众号、小游戏，和小程序一样，其实也是前端开发的领域。
  3. 微信和支付宝，目前是作为Mobile App凭依在Android、iOS平台上的，却又各自提供了一个平台，约定了各自的开发规范，构建了各自的商业生态圈。

Progressive Web App

  1. 随着“App”概念的深入人心，Web开发技术在Mobile时代也有了精彩的进步，但是其表现形式是多种多样的。比如通过React Native，就将Web技术以优化开发效率的形式，加入到软件开发中。
  2. 至于PWA，也就是Progressive Web App，是在移动设备上，提升Web App体验的一系列新技术方法的总称。
  3. PWA提供给用户的软件，本质还是Web App，或者更准确的说，是Mobile-Friendly Web App。
  4. Web App逊于Mobile App的一个重要原因就是：用户粘性脆弱。说的通俗点，用户下载安装了Mobile App后，再次使用就只需要点击应用的图标。而Web App呢？既不能要求用户去浏览器里重复打开，又无法解决离线消息推送、内容分发等问题。
  5. 因此PWA这一系列的技术就包括了：让Web App可以被添加到手机桌面、离线消息推送、延迟发送用户行为（等待网络）等等。

小结

  1. Web开发技术至今，既有学术升级带来的推动（比如HTML 5），也有商业模式发展带来的创新（比如Hybrid App）。
  2. Web开发技术，或者说更常提到的“前端开发”，虽然是近年来的新概念，新岗位，但依然是软件开发工程技术里的普通组成而已。
  3. 软件技术的发展，又离不开硬件技术的升级（比如通信技术和手机芯片制造技术的发展，在Web2.0后时代引发的Mobile App时代），而这又反过来催促了学术标准的制定、推动了商业模式的开展。
  4. 科学技术和商业发展，在时代浪潮里相互作用，滚滚前行，展望即将到来的5G时代，又会有什么让人欣喜的变化呢？
  5. 本文从日常里一个有趣的说法“H5”讲起，站在个人角度表达了对前端开发的发展和现状的一点想法。欢迎老司机指点。