前言

虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念,
经过不断的迭代,演化才逐步稳定

明确目标

首先明确需要做成一个什么样的框架?

大致就是:

  • 一套API规范(统一AndroidiOS),所有API异步调用(防止阻塞)

  • 提供大部分原生功能的API(包括很多常用的功能给H5使用)

  • 原生需要能调用到H5中注册的方法(用关于原生主动通知)

  • 部分API需要支持H5环境(譬如alert需要在AndroidiOS、浏览器中同时运行)

  • API类别需要包括事件监听(如网络变化),页面跳转(如打开页面,关闭通过回调回传值),UI显示(调用后立即执行)等

整体架构

其中:

  • quick API指的就是quick hybrid框架提供给H5调用的JS API

  • 最外层的统一JSAPI规范就是quick API

  • 多平台支持的意思是-譬如调用了quick.ui.alert,在quick hybrid容器中会有响应(原生的弹窗),
    同时在浏览器中也会有响应(H5实现的弹窗),或者在其它容器中(如DD)也会有响应(其它容器实现的弹窗)

  • 多平台支持并不是所有API都会支持,而是指一些常用的API在多个平台下都有实现(比如UI类API一般都会支持,但是原生设备相关就不会在浏览器支持)

【目标分析】需要哪些工作

根据quick hybrid的整体架构与目标,我们需要先分析需要实现哪一些内容:

  • 【核心工作】制定quick平台下前端和原生容器的交互规则(JSBridge

  • 【核心工作】前端和原生(Android/iOS)分别实现JSBridge交互(包括互相调用,回调等机制)

  • 【核心工作】完成前端调用多平台的支撑(API在不同平台下有不同实现,并会根据不同环境自动转换)

  • 【重要工作】规划功能API(需要提供哪些功能,并且每一个功能应该在哪些平台下有实现)

  • 【重要工作】前端和原生(Android/iOS)分别实现这些功能API(第一步根据二八原则实现重点API即可)

  • 【重要工作】处理好短期API(即调即用,立即回收),长期API(一个页面中能被多次触发,如导航了按钮监听),事件监听API(整个应用生命周期内监听,如网络变化)等不同类型

  • 【优化完善】原生API实现的优化,前端代码的优化,权限认证,本地资源等等

然后就可以基于这些目标,逐步完成每一个规划的内容

【分解目标】总体规划

  • 【quick hybrid】JSBridge的实现

  • 【quick hybrid】H5和原生的职责划分

  • 【quick hybrid】API的分类:短期API、长期API

  • 【quick hybrid】API规划

拓展:

  • 【quick hybrid】H5和Native交互原理

【分解目标】API的实现

  • 【quick hybrid】API多平台支撑的实现

  • 【quick hybrid】组件(自定义)API的实现

  • 【quick hybrid】JS端的项目实现

  • 【quick hybrid】Android端的项目实现

  • 【quick hybrid】iOS端的项目实现

【分解目标】优化与完善

  • 账号体系、Cookie还是Token?

  • hybrid容器的优化与完善

返回根目录

源码

github上这个框架的实现

quickhybrid/quickhybrid

【quickhybrid】架构一个Hybrid框架的更多相关文章

  1. quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

  2. 【quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

  3. 分享一个hybrid框架ionic

    ionic 是一个 HTML5 应用程序开发框架. 可以使用 HTML.CSS 和 Javascript 构建接近原生体验的移动应用程序.具有速度快,界面现代化.美观等特点.下面一起看一下如何使用 安 ...

  4. 架构漫谈:自己开发一个Log框架

    前言 在日常开发中我们常常都会用到写日志的功能,现在网上的写Log的框架有很多,但是对于我个人而言,过于庞大:我们往往只为了使用框架中的某一个功能就不得不引用整个框架. 所以,我们今天就来自己动手开发 ...

  5. 成都app开发:架构一个App需要学会哪些技术呢?

    成都亿合科技小编为您分享: 随着APP应用的流行,越来越多的人想自己学习怎么开发APP应用,那架构一个APP需要学些什么技术呢?首先要了解App都有哪些类型,不同的类型适用于哪些需求,用户可以根据自己 ...

  6. 如何实现一个php框架系列文章【开篇】

    1.本系列文章的目的 实现一个小而美的产品级别php框架 自己动手实现一个新框架仅用于学习交流,不打算替代市面上现有的其他主流框架. 2. 我要一个怎样的PHP框架 简单实用,安全优雅,博采众长 安装 ...

  7. Hybrid框架UI重构之路:一、师其长技以自强

    这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不 ...

  8. ASP.NET Core 企业级开发架构简介及框架汇总

    企业开发框架包括垂直方向架构和水平方向架构.垂直方向架构是指一个应用程序的由下到上叠加多层的架构,同时这样的程序又叫整体式程序.水平方向架构是指将大应用分成若干小的应用实现系统功能的架构,同时这样的系 ...

  9. 如何架构一个合适的企业API网关

    API Gateway(API GW / API 网关),顾名思义,是出现在系统边界上的一个面向API的.串行集中式的强管控服务,这里的边界是企业IT系统的边界,主要起到隔离外部访问与内部系统的作用. ...

随机推荐

  1. [转发]读取txt防止读到乱码--自动根据文件编码进行读取

    以下是摘抄 /// <summary> /// 获取文件的编码格式 /// </summary> public class EncodingType { /// <sum ...

  2. Vim自动补全神器YouCompleteMe的配置

    简介:YouCompleteMe号称Vim的自动补全神器,该项目在github的地址:YouCompleteMe:以下在10.0.1 build-1379776平台配置完成 插件安装操作: 1.确保V ...

  3. OpenTSDB - 分布式可扩展的监控系统

    OpenTSDB - A Distributed, Scalable Monitoring System http://opentsdb.net/getting-started.html http:/ ...

  4. 【Java入门提高篇】Day1 抽象类

    基础部分内容差不多讲解完了,今天开始进入Java提高篇部分,这部分内容会比之前的内容复杂很多,希望大家做好心理准备,看不懂的部分可以多看两遍,仍不理解的部分那一定是我讲的不够生动,记得留言提醒我. 好 ...

  5. 【架构研习】欲善其事先利其器-Robot Framework实战演练之框架的选择

    (原创文章,转载请注明出处.) 之前有提到过,自己曾基于公司业务系统从无到有码过一套测试框架,但由于开发时的思想同时受限于公司业务及框架的适用性上,导致最终虽然框架可完美支持业务,但在易用性.兼容性及 ...

  6. kafka原理和实践(二)spring-kafka简单实践

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...

  7. A workaround to change shared memory size for Docker containers in AWS ECS

    Issue Because of not supporting to specify the following docker run parameter, containers in ECS can ...

  8. Ceph编译安装教程

    Ceph官方版本目前支持的纠删码很有限,实验室这块希望能够整合我们自主开发的纠删码BRS(Binary Reed–Solomon encoding),所以需要编译Ceph环境.Ceph官方目前推荐的安 ...

  9. Servlet交互【重定向 与 请求分派】详解

    Servlet交互 在serlvet中,需要调用另外一个资源来对浏览器的请求进行响应,两种方式实现: 调用HttpServletResponse.sendRedirect 方法实现 重定向 调用Req ...

  10. pymysql 模块介绍

    pymysql模块是python与mysql进行交互的一个模块. pymysql模块的安装: pymysql模块的用法: import pymysql user=input('user>> ...