前端架构之移动端混合架构（hybrid）

前端架构之移动端混合架构（hybrid）

从过去的切图仔到如今的大前端，前端这一新兴发展起来的领域已经在软件行业变得尤为重要，一款重前端产品的成败更在于他的架构。

架构

软件整体结构与内部组件，外部软件高效配合的合理设计。

好架构的标准

• 扩展性
• 稳定性
• 维护性

移动端混合架构（hybrid）

使用场景

• 创业型公司：这种类型公司的产品前期只有较为明确的理论基础，并没有很多实战经验和较大的用户群体，还处于较为盲目混乱的阶段。快速迭代产品，更快占领市场是他们的核心诉求。
• 更新较为频繁的展现较多的产品：网页的一大优点就是更新快，无需发布。
• 性能要求不高对手机硬件依赖较弱：网页的缺点是无法直接调用本地硬件，采用该架构一定避免其劣势。

基本结构

---

此架构主要分为三大部分：

• 数据 根据使用场景不同选择最优存储介质。

1. 需要和app共享的数据可以放在app的存储空间中通过jsBrige获取和存储。
2. 需要持久化并且要在不同用户直接共享的数据存储在服务端也就是数据库中，使用ajax交互。
3. 单纯在h5页面直接共享的数据放在内存或者cookie中。

• 视图 根据不同的技术栈和场景使用不最优的前端框架。
• app app提供一系列通用组件例如登录，城市列表等。

关键问题

app需要提供的通用方法和组件

• 网络状态
• 加密，解密方法
• toast提示
• 本地相册
• 本地摄像头

app和web的界线

由于该架构属于混合开发，难免出现某一个需求应该应该由app开发还是web开发。开发者可以根据以下特征定位，例如登录模块，不会频繁更新，具有通用性，对性能要求较高，并且设计到安全问题，所以更加适合由app开发。对于手机硬件的使用app尽量提供对应接口供web使用，界面和功能解耦。二者开发都合适优先使用web开发，毕竟web开发速度快。

---

未完待续

转载于:https://juejin.im/post/5b44dc616fb9a04fa13f1f11