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

章节目录

一些感慨

踏入前端领域满打满算也两年多了。到现在,主要方向已经是由Android原生转到了偏前端领域。

期间,不提自己的技术进步、视野拓宽,最大的产出之一应该就是从0开始构建了一个Hybrid框架了。

正值最近开始进行技术梳理,因此就准备写一系列文章沉淀起来。

本系列包含的内容清单

  • Hybrid框架的原理以及架构系列
  • JavaScript部分的原理以及源码系列(包括部分API的多容器的兼容)
  • Android部分的原理以及源码系列(仅覆盖核心实现以及API部分,不包含实际业务代码)
  • iOS部分的部分原理(一些坑会特别提出,理论上根据原理应该可以还原出)
    • 由于本人没写过iOS应用,因此目前没有直接提供源码,后续有时间可以考虑进一步提供

什么样的Hybrid框架?

核心宗旨:H5页面基于该框架可以替代80%以上的原生业务页面。

更详细一点:

  • 适用于需要开发大量项目级APP的场景
  • 不是用于完全替代原生开发,而是替代里面的80%原生业务页面(模式是: 原生部分 + H5部分)
  • 框架人员至少需要一名Android原生,一名iOS原生,一名前端架构(如果全栈,可以考虑合一)
  • 部分API(如UI显示类)考虑到了H5的兼容
  • 并没有做到产品级别的优化(需求优先级别较低)

之所以不基于第三方框架而是自己重新实现,是由具体的环境与需求决定的。譬如要求自己必须完全掌握源码,某些功能必须通过特定安全检测等。

另外,本系列不与任何市面上的其他框架进行比较,仅是自己的经验总结。

此框架是否有实践经验?

此框架不是平地起高楼而来的,而是在接近两年的项目实战中慢慢演化出的,内部已经迭代过多个版本

另外,它已经在一个项目型公司全面推广使用了。(N+级别)

这里要说明下:

  • 实际项目中,Hybrid框架仅仅是其中的一部分,还会包括一些原生通用组件,业务模块等
  • 但是本系列仅止步于Hybrid框架(处于诸多因素考虑,包括核心实现以及API实现)

如何应用与自己的项目中?

最后的源码部分仅提供核心实现以及API部分,对于一些简单项目来说,其实也就够用了,
但是如果功能较复杂的,肯定需要进一步封装自己的原生功能。

实际上推荐使用以下人员配置:

  • 一名资深Android原生(负责Android容器)
  • 一名资深iOS原生(负责iOS容器)
  • 一名资深前端(前端部分不要小觑,要配合排查问题的)
  • 总架构(推荐是以上三人中的一人担任,譬如本系列是由前端来统一架构的-但前提是必须懂点原生原理,否则抓瞎)

因为每一个人精力有限,所以除非特别厉害和全能,否则不建议一人担任两职
(譬如像我转入前端后,以前的Android就遗忘的很快,但是如果重点兼顾Android,前端水准肯定无法快速提升)

N+项目时的模式大致如下:

  • 三名框架人员负责核心框架容器部分(框架还需要提供一些通用模块与组件)
  • 各个业务线的APP中可以专门分配不同的原生人员负责打包APP(1对N,协助排查各自可能的业务问题)
  • 每一个APP中可以有若干H5业务开发人员(由不同的复杂度而定,主要业务都是线上的H5形式)
  • 三名对于的框架人员负责处理过滤后的真正框架BUG(由业务负责人过滤)

注意,以上是最小配置。(譬如可以分配更多的框架人员,优化提升等)

最后,以上是实际的经验总结,仅做参考。

框架更新与迭代

实际上不同框架的更新迭代方式都是不一样的,比如本系列中就是基于需求迭代

也就是说遇到问题才修复,优化,累积一段时间后开始考虑下一代的优化提升(迫于投入的窘迫性)

一般来说,整体的交互架构以及API是由对于的负责人规划的,然后安排给对于的容器实现

版本号的化仍然是以下经典形式:

大版本.小版本.修正版

譬如本框架在两年内迭代了个大版本(涉及到底层),
使用起来变化较大就会变动小版本,
平时个别API新增和修复是修正版

这里因人而异,比如有的喜欢将API新增也变为小版本更新

借鉴与不足

本框架中在实现是吸取了不少市面上已有框架的经验,譬如:

  • 钉钉(API设计上,可惜无法看到它底层实现...)
  • phonegap,html5+,apicloud,appcan等都有接触过(但参考的不多)
  • 一些github开源库,譬如marcuswestin/WebViewJavascriptBridge

另外,在文章总结时,参考了一些博文,包括我以前写的文章(会在参考来源中)

源码

github上这个框架的实现

quickhybrid/quickhybrid

时间: 2024-10-05 01:25:26

【quickhybrid】如何实现一个Hybrid框架的相关文章

【quickhybrid】架构一个Hybrid框架

前言 虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念, 经过不断的迭代,演化才逐步稳定 明确目标 首先明确需要做成一个什么样的框架? 大致就是: 一套API规范(统一Android与iOS),所有API异步调用(防止阻塞) 提供大部分原生功能的API(包括很多常用的功能给H5使用) 原生需要能调用到H5中注册的方法(用关于原生主动通知) 部分API需要支持H5环境(譬如alert需要在Android.iOS.浏览器中同时运行) API类别需要包括事件监听(如网络变化

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

前言 在日常开发中我们常常都会用到写日志的功能,现在网上的写Log的框架有很多,但是对于我个人而言,过于庞大:我们往往只为了使用框架中的某一个功能就不得不引用整个框架. 所以,我们今天就来自己动手开发一个自己的Log框架. 活动图 我们在项目中一般都会把日志存到文件.系统日志.数据库这个三个地方.所以,作为一个Log框架我们需要在框架内预实现这三种存储方式.但有些时候,我们这三个方式并不能完全满足我们的需求,所以我们需要对外暴露出一个接口,并且可让用户实现并加载到我们框架中使用.如下图: 上图在

QUARTZ.NET 一个定时任务框架

<1> Quartz.NET-1.0.3文件下载地址 (这是老版本了,现在已经有新版本了.用法好像不一样了) 首先要添加Quartz.NET-1.0.3 文件下面的  bin/3.5/Release/Quartz/ 目录下面的Common.Logging.dll文件和Quartz.dll文件 然后添加引用.将连个文件引入到项目中来 using Quartz; using Quartz.Impl; using System; using System.Collections.Generic; u

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

1.本系列文章的目的 实现一个小而美的产品级别php框架 自己动手实现一个新框架仅用于学习交流,不打算替代市面上现有的其他主流框架. 2. 我要一个怎样的PHP框架 简单实用,安全优雅,博采众长 安装简单,上手简单,扩展简单 不需要编译C扩展. 不需要知道什么是composer. 不需要改nginx.cnf .htaccess各种重写规则. 但支持各种环境,从最低端的虚拟空间到独立服务器,从单机xampp,phpstudy, 到各种云sae,bae,以及高大上的分布式架构部署方式.绿色无需安装,

AngularJS - 下一个大框架

AngularJS AngularJS是web应用的下一个巨头. AngularJS如果为创建web应用而设计,那它就是HTML的套路了.具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明式模板和出色的可测试性都是用纯客户端 JavaScript来实现的! AngularJS 是一个创建富客户端应用的JavaScript MVC框架,它组织良好,经过严格测试,多功能,强大并且十分灵活.你仍然需要具有服务端后台,但大多数的用户交互逻辑将优雅地放到客户端上处理. AngularJS是一个

简单实现一个rpc框架

与其说框架不如讲是个小demo,废话不多说直接上代码 package com.tang.rpc; import java.io.IOException; import java.io.ObjectInputStream; import java.io.ObjectOutputStream; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Pr

Android Afinal框架学习(二) FinalActivity 一个IOC框架

框架地址:https://github.com/yangfuhai/afinal 对应的源码: net.tsz.afinal.annotation.view.* FinalActivity FinalActivity是一个基础类,结合注解实现了,依赖注入(view的资源id,常用的监听器), 利用set方式注入 完全注解方式就可以进行UI绑定和事件绑定,无需findViewById和set event Listener 这个过程:initInjectedView>findViewById.set

Ember.js:一个JavaScript框架

Ember.js v2.7.3 发布了. Ember.js是一个JavaScript框架,它极大地减少了构建Web应用程序所需要的时间,精力和资源(腾云科技ty300.com).它的重点是使开发者尽可能高效地处理重复和琐碎的评论,能更好地参与Web项目的开发. Ember.js还为大家提供了Javascript,HTML和浏览器(基础教程qkxue.net),为你创建下一个杀手级的web应用程序提供一切最先进功能的访问. 构建Ember.js 确认Node.js 和 bower 已经安装.运行

一个iOS 框架介绍:MKNetworkKit

http://blog.csdn.net/kmyhy/article/details/12276287 http://blog.csdn.net/mobailwang/article/details/25056959 ASIHTTPRequest (作者:BenCopsey) 是一个使用简单,可用于各种从简单到复杂的 HTTP 请求,或者可用于处理 Amazon S3.Rackspace 等REST 服务的强大框架. 不幸的是,Ben 早在 2011 年 9 月 21 日就已经声明停止开发和支持