/trending-plus

APP 跨平台开发技术分析

Primary LanguageJavaScriptMIT LicenseMIT

APP 跨平台开发技术分析

大纲

  1. 技术背景
  2. 技术方案
  3. 框架成熟度
  4. 公司案例与行业采用
  5. React Native
  6. 行业内案例与公司案例
  7. 技术积累与沉淀
  8. 总结与展望

技术背景

APP 跨平台开发是目前比较热门的方向，采用 web 框架开发，以 web 的开发体验快速构建应用，提高了迭代的效率。同时 web 开发方式大多使用动态语言，能够绕过原生开发限制动态加载，因此具备热加载、热更新的能力。用跨平台技术开发的应用无论性能还是用户体验都很接近原生应用。

技术方案

  1. Cordova / WebView

    利用 Android 和 iOS 上的 WebView 容器，APP 能够执行 html、css 和 js 脚本，展示 web 页面。如果需要原生功能就添加 bridge 供 JavaScript 调用。具有开发效率高、跨平台、支持动态发布等特点。

  2. React Native

    React Native 这类方案，使用 JavaScript 来构建界面，在运行时翻译成原生组件展示出来，实际上所有界面都是用原生组件。支持跨平台，热加载，性能和用户体验高于 WebView，更接近原生应用，是当前热门的跨平台开发技术。

  3. Flutter

    Flutter 使用了一种全新的方式，自己重写了一个平台无关的渲染引擎，它只提供画布，所有的 UI 组件、渲染逻辑都是在这个引擎上处理的。最大程度上保证了各平台下的一致性，同时也拥有媲美原生的高性能体验。

注: 基于 webview 的框架目前已在很多 APP 开发中应用，各种利弊都已得到充分验证，这个技术具有开发效率、跨平台、动态发布等方面的优点，但缺点也明显，性能 和 用户体验 上都很糟糕。

框架成熟度

React Native 是在 2015 年发布的，经过 4 年多的发展，已经比较成熟。React Native 社区发展也很活跃，贡献了大量的开源代码。

Flutter 是在 2018 年 6 月份才推出发布预览版，社区也刚刚发展。所以，Flutter 还需要时间。

以 Github 上打开的 issue 的数量来看，截止到 2018-10-28，React Native 有 630 个，Flutter 有 5000+，这也说明了 Flutter 目前尚不稳定。

行业技术统计

我们不得不承认一点, 那就是技术发展过程一直都是: 国外一线互联网公司 (Google/Apple/Facebook/微软等) -> 国外开发者 -> 国内一线互联网公司 (腾讯/阿里/百度等) -> 国内二线互联网公司 (美团/滴滴) -> 国内企业

全球 JS 技术调查

React Native

React Native 是 React 在原生移动应用平台的衍生产物，与 React 的区别在于虚拟 DOM 映射的对象是什么，React 中虚拟 DOM 最终会映射为浏览器 DOM 树，而 React Native 中虚拟 DOM 会通过 JavaScript Core 映射为原生控件树。

公司案例与行业采用

同行业案例:

  1. 移动营销服务平台 (移动柜面) - 上海银行

    // TODO 架构图

  2. 智能风控项目 (风险助手) - **银行

  3. 信用卡营销 - 上海银行

  4. 建启善源 - 建设银行

  5. 移动营销 - 百信银行

互联网公司采用情况:

  1. 手机百度
  2. 手机 QQ, QQ 空间, QQ 音乐
  3. 京东商城, 京东金融
  4. 携程 App
  5. 爱奇艺
  6. 美团
  7. 抖音
  8. 58 同城
  9. 去哪儿
  10. 同花顺

技术积累与沉淀

  1. 第三方库与工具
  2. 自定义插件与代码模板
  3. 交互式命令行工具 (CLI)
    1. 新建项目 (react/react native/koa)
    2. 新建业务模块
    3. 新建业务模块内部界面
    4. 新建第三方 lib 工具

总结与展望

当我们选择一个技术时，社区生态是一个重要的考量。一个繁荣的社区，有很多成熟的工具、库、工程体系、最佳实践可以供我们使用和借鉴。无论从框架的成熟度，开发效率，社区，兼容性，动态性，性能等方面考虑，React Native 无疑是现阶段最适合的移动端跨平台框架。

展望:

  1. 我们将为命令行工具添加新的功能, 直接生成原生相关模块, 并提供代码编写规范, 自动实现注册原生模块功能, 使开发人员只需关注原生功能。
  2. 我们将寻找使 React Native 开发的项目, 直接生成 H5 页面的方法, 也就是说, 同一份项目, 能够生成 Android App, iOS App 和 HTML 页面。

任重而道远, 我们要经历长期的奋斗。

THINK YOU

感谢大家百忙之中抽出时间, 希望大家有所收获。