混合开发框架

混合开发是在开发App时用原生程序做个壳与用H5做界面,目的是省钱,开发快
这种App由HTML5网站和APP应用客户端 两部份构成

跨平台技术的诞生,跨平台技术 一套代码打开下省钱
五种分类 分别 Web App,Hybrid App,语言编译转换,原生渲染,自绘 UI

Web App

基于Web应用,运行于浏览器,网页加App壳
但Web App 主角的心 配角的命 ,性能低体验不好
无法调用原生API,网速慢体验差,没有离线功能,耗流量,用户留存率低
PWA/Progressive Web App
渐进式增强 Web 应用,用多种技术来增强 Web App功能
用 Service Worker + HTTPS +Cache Api + indexedDB 等web 技术实现离线加载和缓存
实现推送和通知,添加到手机的桌面上,用 Service Worker 进行后台同步
PWA是离线,推送,桌面访问,PWA 赋予 Web App 原生的体验,但一直不温不火
原因游览器对 PWA 技术支持不够

Hybrid App

用 HTML5 原生来进行混合开发就是 Hybrid
Hybrid App原生 UI 组件用来展示交互复杂和渲染要求高的界面
其他的交给 HTML展示
Hybrid App体验比不上原生
但Hybrid App开发效率高跨平台,对于需要快速试错,快速占领市场的团队Hybrid App 是个不错的选择
后期团队稳定下来后,最好还是要做体验更好的原生 APP 或者使用其他体验更好的跨平台技术
Hybrid 技术很多,比如 PhoneGap,Cordova,Ionic,VasSonic 等

Cordova

Cordova前身 PhoneGap,PhoneGap 面向 Web 开发人员,通过使用 HTML,CSS 和 Javascript构建跨平台 App,
Cordova开源,支持的平台有 Android,iOS,Windows,Mac OS X,Electron
Cordova 用 WebView 展示界面,Apache Cordova 维护了名为 Core Plugins 的插件
这些核心插件为 App 提供访问设备功能,如电池,相机,联系人等

Ionic

Ionic Framework 是个开源 UI 工具包,
最早的目标是使用 HTML,CSS 和 JavaScript 等 Web 技术开发移动应用程序
Ionic Framework 已与 Angular 正式集成,对 Vue 和 React支持正在开发中

VasSonic

VasSonic 腾讯VAS团队开发,轻量级高性能框架,加速Android 和 iOS 平台运行的 H5
VasSonic 服务器的静态或动态网站,兼容 Web 离线资源
VasSonic 自定义url 不是原始网络连接请求索引html,提前或并行请求资源避免等待视图初始化
VasSonic 通过WebKit 或 Blink 内核读取和呈现数据,无需等待数据流结束

微信小程序

开发语言JavaScript,小程序的开发同普通的网页开发
运行环境 分成 渲染层和逻辑层
渲染层的界面使用WebView渲染,逻辑层用 JsCore 线程运行JS 脚本
这两个线程的通信会经由微信客户端（Native）中的 JSBridage 做中转,逻辑层发送网络请求也经由 Native 转发
WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层
微信小程序和App不是竞争关系,是推广渠道,微信小程序的缺点明显,体验无法跟App 相提并论,功能受限于微信,无法进行拓展
微信小程序建立了次级生态,微信说的算,其他对手的发展会受到限制

uni-app

用 Vue开发前端应用的框架,一套代码到iOS、Android、H5、
及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台
uni-app官方网站 https://uniapp.dcloud.io/

语言编译转换

将某语言编译为平台下二进制文件
Xamarin 框架 在 Android 平台是内嵌了 Mono 虚拟机实现的,
在 iOS 平台下是以 AOT 的方式编译为二进制文件的,归到语言编译转换类型
微软Xamarin 是 Mono 项目的一个分支,基于.NET 的跨平台实现的一个开源项目
Xamarin在 iOS 和 Android 刚推出新的功能时,第一时间调用相应的 API
使用 PhoneGap 则需要等待 PhoneGap 封装的新的功能后才可以调用相应的 API

原生渲染

JavaScript开发且由原生控件渲染,代表有 React Native,Weex,快应用
React Native 是 Facebook 开源 Web UI 框架, 在原生移动应用平台的衍生产物
底层对 Android 和 iOS 平台的原生代码进行封装,通过JavaScript 编写原生代码
Virtual DOM 是 DOM 在内存中的轻量级表达方式,通过不同的渲染引擎生成不同平台下的 UI
React Native 与原生框架通过 Bridge 进行通信,用 Chrome 浏览器进行调试
 JavaScript 代码将运行在 Chrome V8 引擎中,通过 WebSocket 和原生代码进行通信

Weex

阿里开源的移动开发工具
兼顾性能与动态性,通过简捷的前端语法写出原生级别的性能,支持 iOS,Android,YunOS 及 Web 等多端部署
Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex页面开发,因此 Weex 支持 Vue 语法和 Rax 语法
而 React Native 只支持 JSX 语法
Weex将编Weex 源码,通过 transformer 转换成 JS Bundle
然后将 JS Bundle 部署在服务器,当接收到终端（Android,Web 端,iOS 端）的 JS Bundle 请求时
将 JS Bundle 下发给终端,在终端中,由 Weex 的 JS Framework 接收和执行 JS Bundle 代码
且执行数据绑定,模板编译等操作,然后输出 JSON 格式的 Virtual DOM,JS Framework 发送渲染指令给 Native
提供 callNative 和 callJS 接口,方便 JS Framework 和 Native 的通信

快应用

由小米,OPPO,VIVO,华为等国内主流厂商成立快应用联盟,以网页的形式开发, 原生渲染的效果体验
快应用框架深度集成进各手机厂商的手机操作系统,在操作系统层面形成用户需求与应用服务的无缝连接
快应用JavaScript 开发
React Native 和 Weex 的渲染引擎是集成到框架中的,每个 APP 都打包一份,安装包体积较大,
快应用渲染引擎是集成到 ROM 中的,应用中无需打包,安装包体积小
快应用实现划分为编译时,运行时两个方面,UX 页面源码经过编译时得到 JS,然后经过运行时得到界面 UI
每个页面由 HTML+CSS+JS 组成,编译运行后得到内存中的 DOM 树
多个页面组成一个项目,编译后得到 rpk 文件,最终运行时以应用形态呈现
快应用仍然不温不火,在流量和入口等关键数据都无法与小程序匹敌

自绘 UI

在不同平台实现统一接口的渲染引擎来绘制 UI,不依赖系统原生控件,保证平台UI 一致性
自绘 UI 框架的代表有 Qt 和 Flutter
Qt 产生的时间很早, 在 PC 领域发展良好,移动端表现不佳,
Flutter 谷歌的移动 UI 框架,在 Android 和 iOS 上构建高质量的原生用户界面, 前身是谷歌试验项目 Sky
Futter 一切皆 Widget ,除了文本,图片,卡片,输入框,布局方式和动画等都是由 Widget 组成,通过不同类型Widget,实现复杂的界面
Flutter 框架分层设计 的目标是帮助开发者使用更少的代码完成更多工作
Material 层是由 widgets 层的普通 widget 组成的,而 widgets 层本身是通过来自 rendering 层的低级对象构建的
Flutter 基础上开发的框架已经开始出现,这也证明了业界普遍开始认可 Flutter,并开始进行尝试