物联网作发展至今，几乎囊括了未来我们生活中的所有设备：从腕上的手表，到家中监控的安防系统，再到汽车;这些都会通过网络连接PC、平板还有手机。那所有这些现实世界中的硬件怎样与用户最简单地交互呢?App必不可少。今天跟大家介绍一下现在互联网公司客户端开发流行的两种方式：native，hybird。
native即原生开发，正常互联网Android和IOS平台分开用原生组件开发，如果支持其他平台，还需要维护该平台原生代码如Windows。hybird则是在项目中采用跨平台技术来实现部分业务逻辑，同时也存在则大量的native原生代码。
互联网公司项目众多，技术实力较强，对新技术敢于尝鲜，又乐于挑战，因此作为后来者的hybird方案日渐流行，有慢慢成为主流的趋势。同时由于原生性能较高和技术成熟资料齐全的优点，native还是目前为止客户端的王者。而作为速度效率为王的创业公司，深圳酷宅科技公司易微联项目积极探索用hybird方案来提高开发效率，经过一段时间踩着石头过河的探索，在项目的多个模块落地了数套的hybird开发方案。和大家分享下项目平台app易微联的项目架构。
首先简单介绍下该项目的背景：
厂家设备控制页面和品牌页面是易微联根据后台配置的厂家和设备id，根据不容的配置项，如页面布局和设备信息等页面生成客户端操作页面。项目开始只采用纯web页面实现，上线运行后，由于网络和html本身的性能瓶颈，项目组决定采用时下众多公司纷纷试水的React-native方案结合动态升级来实现性能优化。
项目整体架构如图：
首先从整体上了解一下基于 RN 的 App 开发架构。架构共分为五个部分：
Native 组件/API 层、JS 中间层、JS 业务层、视图载体页、热更新平台。JS 业务层、JS 中间层、Native 组件/API 层三者运行于视图载体页中，且 JS 业务层和 JS 中间层的代码更新是通过热更新平台更新到用户手机应用中的。Native 组件/API 层是整个装置的基石，JS 业务层通过 JS 中间层调用 Native 组件与 API。
Native 组件/API 层与 JS 中间层是无状态，可以被复用的，它们被不同业务调用和组装，能形成不同的业务功能。在这里，一切业务都是基于组件的，任何业务的形成，都是调用 Native 组件及 API 来的。尤其是引入了 JS 中间层，不仅抹平了在不同平台(iOS/Android)上调用组件的差异性，还解耦了 JS 业务层与 Native 组件层。如果没有 JS 中间层，Native 一个组件或者 API 的变动，都需要通知所有的业务方去进行修改，在业务到达一定量的情况下，这种改动不仅费时费力还具有风险，会影响线上功能。引入了 JS 中间层之后，Native 组件及 API 的变动，都在 JS 中间层进行处理，JS 业务层毫无感知。
分别介绍：
1:Native 组件/API 层是在整个架构的最底层，也是整个装置的基础。
2:JS 中间层是非常关键的一层，是为上文中扩展的 Native 组件/API 来服务的。JS 中间层如上文所述，不仅能抹平在不同平台上调用 Native 组件/API 的差异，还解耦了 JS 业务层与 Native 组件/API 层。
3:JS 业务层主要专注了业务的实现，包括视图的渲染、组件的串联、UI样式的设置、Server API接口的调用与数据的处理。JS 业务层在改装置中是最终代码的落地，视图载体页加载的视图以及热更新系统更新的代码都是直接针对 JS 业务层的，只是这时业务层引用了 JS 中间层的代码来实现对 Native 组件的调用。
4:视图载体页在这里扮演了很重要的角色，是所有业务的一个统一载体。可以简单理解成业务模块通用的做法每一个业务一个载体页。因为载体页是 Native 代码写的，这使得当需要扩展一个业务线的时候，必须依赖发版。而统一了载体页后，只需要通过热更新平台将 JS 代码更新到 App 本地即可实现。
5:热更新平台
热更新平台是整个框架的核心。热更新平台的主要功能是将JS业务层及其引用的代码编译 link 好的 JSBundle 下载到 Native App 中。在此过程中，需要控制更新文件的大小以及失败情况的处理。
热更新平台涉及 JSBundle 资源管理系统(Server)、JSBundle 数据接口层(Server)、JSBundle Native 更新及管理层(Native)。JSBundle 资源管理系统负责将相关 JS 业务层代码编译 link 成 JSBundle 文件，并将相关更新写到一个数据缓存中心(例如 Redis 或 Memcached)。当 Native 通过 JSBundle 数据接口层提供的接口获取对应的 JSBundle 的信息时，数据接口层将从数据缓存中心查询数据并返回给 Native 端。Native 端为了提高用户体验，会对 JSBundle 进行缓存，用户访问相关页面的时候，先展示缓存，再访问接口，看是否有更新。
(G3商讯)
关键词:
