几种常见的大前端应用

什么是 Hybrid App

Hybrid App 是融合了 Native App 和 Web App 的混合 App,Web App 运行在 Native App 提供的 WebView 中,Web App 通过中间的 bridge 调用 Native 的功能。传统的 Hybrid App 开发技术有 Cordova,Phone Gap 和 Ionic。

按照混合模式,可分为三种类型:

  • 多 View 混合型
    在需要 Native View 的地方使用 Native View,在需要 Web View 的地方使用 Web View,Native View 和 WebView 单独交替出现。这种模式下,Native App 是主体,Web View 起到补充作用。
  • 单 View 混合型
    Native View 和 WebView 出现在同个页面,按照需要展示不同的内容,对于内容的展示也非常大的灵活性。
  • Web 主体型
    整个 App 都是使用 WebView 展示内容,Native App 只是提供一个壳。

新技术 React Native, Weex(类 React Native 技术) 和 Flutter 也可用于开发 Hybrid App。

React Native

React Native 使用 JavaScript 和 React 来编写原生 App 的开发方式。React 使用 JSX 语法来编写界面,使用 JavaScript 来进行交互和控制逻辑。JSX 生成的 Virtual DOM,通过 bridge 映射成原生组件;JavaScript 实现原生功能也是通过 bridge 调用原生 API 完成。

  • 优点
    1.使用前端技术 JavaScript 和 React 就能开发 App
    2.使用一套代码能同时开发 Android App 和 iOS App
  • 缺点
    1.iOS 平台机型少适配更简单,Android 平台机型多适配复杂,第三库对于 iOS 平台支持更好
    2.对于复杂动画,因为需要经过 bridge 映射,性能不足
    3.依赖原生的功能,如果开发的 App 需要复杂的原生功能支持,需要学习 Android 开发和 iOS 开发

React Native 技术架构

Flutter

无论是基于 WebView 的 Hybrid 技术,还是基于 Virtual DOM 转换成原生组件的技术,其页面的渲染效率和代码的执行效率都比较不足。Flutter 针对这两个痛点提出了不同的解决方案:基于 C++ 图形渲染库 Skia 开发渲染引擎,负责 UI 的渲染;逻辑处理使用支持 AOT 的 Dart 语言,提前将 Dart 代码编译成机器码,提高代码的运行效率。

JIT 和 AOT 两种编译方式对比

  • JIT(Just-In-Time)
    将程序实时编译为机器字节码,然后虚拟机读取,打开程序
  • AOT(Ahead-Of-Time )
    安装时将已经将程序编译为机器字节码,无需编译,打开可直接运行

小程序

小程序是基于指定容器 App,并使用指定技术的 Hybrid App。

参考资料