HERO 一个更好的移动跨平台开发方案
hero移动开发方案源起于点融网LB业务部门的一次无心的尝试,在点融的黑帮文化中发展出来的一个业界领先的开发方案。
先来一个类似产品的对比
react native | weex | 小程序 | ionic | hero |
---|---|---|---|---|
性能 | 良 | 良 | 尚可 | 尚可 |
布局 | 无序性能差 | 无序性能差 | 尚可 | 无序 |
设备能力 | 完全 | 完全 | 不完全 | 完全 |
开发成本 | 高级跨平台工程师 | 不详 | 高级web工程师 | 高级web工程师 |
开发工具 | 多种 | 不详 | 微信web开发工具 | 多种 |
框架代码量 | 巨大 | 巨大 | 非开源 | 大 |
入门难度 | 难 | 难 | 普通 | 有点难 |
解释上述表格
- 性能
react native和weex界面表现层是原生的,但是构造元素本身的操作,和元素的所有逻辑在js中,导致性能有影响。小程序还有一个h5 canvas转原生性能莫名其妙的慢的问题。Hero中元素的所有操作都在原生代码中,只有业务明确需要某个操作结果才会调用到js代码。 - 布局能力
CSS几乎可以表示一切形式的界面,无设计语言约束,但是最终效果有时候与平台的冲突会造成编程的困惑与体验的变差,react native 和weex的css依赖webview的渲染,再将结果发送给原生导致性能损失很大。微信在自家产品中的约束样式反而还不错。Hero是另辟蹊径定义了一套扩展后的frame布局,并且在各平台原生实现这套方案,布局能力达到并兼容原生app。 - 设备能力
微信提供了有限受控的设备能力,其它皆有完全的设备能力(系统支持) - 开发成本
由于react native开发门槛较高,学习曲线很陡,特别是对移动开发人员,很难适应web开发模式,而web工程师对iOS本身的接口不熟悉,很难做出原生体验的app出来,weex应该也类似。还有不管是react native 还是weex所开发出来的页面不是完全跨平台的,它们只是开发方式是跨平台的,具体页面还是要分开开发。导致开发人员需求依旧那么多,甚至更多。而hero是一种依赖 定义<->实现 的开发方案,所开发的界面是平台无关的,再加上统一的元素定义格式,对于具体的页面开发人员来说,只是在配制显示的元素,非常简单。 - 开发工具
目前Hero的开发没有限定开发工具,sublime和atom都可以,调试就在chrome里面调试web页面就好了。集成编码、调试、托管服务端的Hero开发者工具正在开发过程当中。开发者工具本身也是用hero框架开发,目录在hero-js/heroapp当中。只需要切换到heroapp目录,使用nwjs .即可打开预览版本。 - 框架代码量
hero框架技术上并不复杂,核心逻辑代码不过200行。 - 入门难度
Hero框架中只有一个固定的controller,其它全部都是element,相比其它的MVP、MVVM、MVC有着复杂的逻辑关系,Hero中的模式就是** e , **ee, eeeeee…,通通都是element,controller除了用来显示element,给element传递json数据之外就没有额外的逻辑了。element 中只有一个函数处理json对象,除此之外再无其它接口。每个element 都是绝对独立的,与其它元素毫无瓜葛。这样开发、测试元素都是及其简单的。
Hero 框架图
快速开始
- 下载Hero代码,使用node her.js启动服务端。
- 打开http://localhost:3000 可以看到一个Hero的主页,这里面有hero的概念展示、API doc等常用信息。
- iOS版本中集成https://github.com/dianrong/hero-ios 这个SDK,然后用HeroViewController打开一个包含Hero元素的页面即可。
- android版本中集成https://github.com/dianrong/hero-android 这个SDK,使用HeroActivity打开一个包含Hero元素的页面即可。
快速开始做页面
- 在chrome中访问http://localhost:3000/start.html
- 使用sublime2 打开start代码文件夹,尝试修改index.html
{
class:"HeroLabel",
name:"name",
textColor:"ffffff",
text:"Hello hero !",
size:22,
frame:{"w":"1x",h:"80"},
alignment:"center"
},
class 一个界面元素必须包含的部分是,这指定了使用原生类的类型,
frame 指定了元素在界面中的布局,这个布局是三个平台上统一实现的
name 如果这个元素需要接收数据,那么给它设置一个name
其它option的属性,取决于元素是否实现
setTimeout(function() {
API.out({command:'refresh'});
}, 2000);
开发过程中使用定时刷新实现即时性效果,开发完成后注释掉
setTimeout(function() {
API.out({globle:{key:'finishLoading'}});
}, 100);
每个APP的第一个页面需要使用通过globle通知发送finishLoading告诉app关闭封面,上新功能的时候也可以发送一个showLoading来展示一个新功能slider,展示期间可以缓存新的HTML页面
快速开始新的元素
- 新建一个元素只需要继承自原生元素中有类似功能的一个元素,然后实现一个on方法,与此元素相关的一切功能都通过on方法中传递过来的json对象来实现。
- on方法需要调用父类的on方法,基础的布局,背景,边框,hidden等属性都是在HeroView中已经实现好了,一般元素类只需要实现此元素特有的几个属性即可。
- 例:
@implementation HeroLabel
-(void)on:(NSDictionary *)json{
[super on:json];
if (json[@"text"]) {
self.text = json[@"text"];
}
if (json[@"alignment"]) {
NSString *alignment = json[@"alignment"];
if ([alignment isEqualToString:@"center"]) {
self.textAlignment = NSTextAlignmentCenter;
}else if ([alignment isEqualToString:@"left"]){
self.textAlignment = NSTextAlignmentLeft;
}else if ([alignment isEqualToString:@"right"]){
self.textAlignment = NSTextAlignmentRight;
}
}
if (json[@"size"]) {
double size = ((NSNumber*)json[@"size"]).doubleValue;
self.font = [UIFont systemFontOfSize:size];
}
if (json[@"textColor"]) {
self.textColor = UIColorFromStr(json[@"textColor"]);
}
if (json[@"font"]) {
double size = ((NSNumber*)json[@"size"]).doubleValue;
if ([@"bold" isEqualToString:json[@"font"]]) {
self.font = [UIFont boldSystemFontOfSize:size];
}
}
}
@end
**android的实现稍微有一点不同,由于java没法多继承,也没办法往系统库中注入方法,所以在android中实现一个基础类需要在on方法中调用的HeroView的静态方法on(view,json)来完成view的初始化。如果新元素继承了Hero元素则只需要和iOS一样调用super.on(json)即可。**
Hero 不止是一个开发框架,而是一个开发方案
开发过程管理
- 新的框架需求可以提交代码到hero-js/test/test/unit_test/目录,具体的提交内容是一个json文件类似
{
class:"MyLabel", //新功能的元素名
p1:"xxxxx", //新熟悉接受什么样的参数,结果如何
text:"Hello hero !",
size:22,
frame:{"w":"1x",h:"80"},
alignment:"center"
},
测试系统会自动为这个元素生成测试用例,如果各个平台上打开此测试用例结果都正确,表明这个元素实现完成。单元测试如下图
- 测试驱动开发,由于任何新的功能都是先有测试用例才能开始,这是先天性的测试驱动开发。
- 全平台自动化测试,如图
用户行为分析
在Hero框架中有一个理念,页面上不应该有任何的逻辑,页面(view controller\activity\page)只负责显示元素,元素本身只接json数据,界面显示成什么样子完全由接收到的json数据来决定,而且页面本身只有 in 和 out 两个函数分别对应元素反馈数据,和给元素的数据。我们在js中重载这两个函数,并将数据发送到日志服务器。就可以知道一个用户的所有操作,并可以对操作进行完整的回放。我们截取了一段不包含敏感数据的截屏如下图:
hero不只是一个前端框架
Hero的核心理念是任何一个功能元素有且只有一个接口与外界交换数据。我曾经写了一个工具去检测一般项目中类之间的关系,方法是先找出当前项目的类列表,如果一个类中出现其它列表中的类就加1,结果是50个类平均结果是200左右,100个类平均结果是800左右,而且这个数以大于正比例曲线增长。大家可以想象一下一个新人面对一个大项目时候的囧迫,这简直是一张大网。传统的面向对象编程也许本身没有问题,但是在实际的的实践中遭遇了巨大的挑战,函数式编程是一种,而Hero是另外一种。
在服务端,Hero也有一个初步但是完整的实践,目录在hero-js/server当中。这里不再展开叙述。
Hero milestone
贡献
提交到
https://github.com/dianrong/Hero
https://github.com/dianrong/Hero-ios
https://github.com/dianrong/Hero-android