移动·web前端高效开发实战/Chapter 1 .初识移动web前端

移动·web前端高效开发实战

技术栈：html5、css3、 javascript 、webpack 、react native 、vue.js 、node.js

作者：iKcamp著

出版社：电子工业出版社

Chapter 1 .初识移动web前端

1、三大阶段

• 静态技术阶段

• 动态技术阶段

• 后web2.0阶段

2、H5新特性

• 语义化：拥有更加丰富的标签，对微数据、微结构等有着非常友好的支持，赋予网页更好的意义和结构

• 本地存储：基于该技术开发的网页应用拥有更短的启动时间，更快的联网速度，甚至可以做到离线使用

• 设备兼容：h5为开发者提供了非常丰富的API，让开发者能够在功能上有更好的体验和优化选择

• 连接特性：Server-Sent Event和WebSocket技术，使得连接工作效率更加有效，特别是在实时聊天和网页游戏方面，大大提高了用户体验

• 多媒体：网页标签自身支持音频和视频的播放，完全打破了依赖Flash的困局，为开发降低成本提高效率的同时，用户体验也得以提升。

• 图形特效：h5提供了诸如Canvas、WebGL等图形和三维功能，使普通网页也能呈现出惊人的视觉效果。

3、移动web兴起的原因

• 移动设备的普及

• h5自身固有特点（如：视口控制Viewport、媒体查询、音视频播放）

4、移动web与原生应用的优劣势

• 移动web：以移动端浏览器为载体面向网页的开发，这种应用或服务一般需要通过一个URL来打开

• 原生应用：APP的开发模式，会针对不同的操作系统采用不同的开发语言和框架，专门针对某一类设备而研发

移动web优势：

• 跨平台：运行在浏览器上，跟系统无关

• 开发成本低：没有平台问题，开发者不需要掌握多种开发语言和框架

• 更容易迭代：应用所有资源都在服务端，不需要用户主动安装更新就可以实现产品升级迭代

移动web劣势:

• 功能有限：没跟系统对接，只能使用浏览器提供的部分功能，硬件设备独特功能无法使用

• 操作体验欠佳：用户操作并非由系统直接接收并响应，且浏览器质量参差不齐

• 无法离线使用：虽然h5提供了离线存储功能，但用户首次访问应用，本地无存储

• 很难被发现：用户获取APP的方式一般通过前往应用商店下载，web app并不具备在商店展示的条件

原生应用的优势：

• 功能完善：具备设备所有功能的访问权限，可以满足用户的各种需求

• 体验更好：速度快、性能高，使得原生应用的用户体验更具优势

• 可离线使用：由于原生应用的所有程序代码和静态字眼在用户安装时已经下载到本地，即便在断网的情况下，用户也可以进行部分操作

• 发现机会高：展示在应用商店易被发现

原生应用的劣势:

• 开发成本高：兼容操作系统

• 迭代不可控：更新上线需要应用商店的审核，其次用户何时升级也不完全受控制

• 内容限制：应用商店有自己的规范条例，应用功能、内容需要完全符合泽泻条例才允许上架

基于web与原生应用各自的优劣势，越来越多的APP走向混合开发模式，即原生+web同时存在，原生部分为用户提供更好的使用体验，web部分可以实现更为快速的迭代更新

5、移动web的现状

移动开发示意图

 

存在问题

• 浏览器种类繁多、参差不齐：UC、百度、腾讯、360、遨游

• 网速仍然是性能瓶颈：2G、3G、4G、5G

• 多框架造成高门槛：为了解决web前端攻城话、模块化、开发和委会成本等一系列问题，出现了大量框架