现在的中大型app中,为了满足快速迭代以及动态更新的需求,就往往需要使用混合架构,来达到动态更新的目的。这里就来简单介绍下目前比较主流的混合框架及其优劣。
目前的框架我大致将他归为为3种:
这个目前最具有代表性的就是js-native了,还有一些像lua-native等,由于很久没有人维护了,就不做介绍了。
自从前端框架出现了virtual dom这个技术,就给我们的native化创造了先决条件,下面的技术都是根据virtual dom来驱动的。
这是一个非常热门的项目了,贡献者就达到了1.4k,是其他项目无法比拟的,可以说是目前世界上最热门的项目之一了。
功能强大,可以说项目本身就基本包含了所有app功能。你可以不用写一行native代码,就能写一整个应用。也可以单独去渲染部分页面,非常灵活。作为一个需要快速迭代和动态更新的页面,往往也不需要特别高的交互性,所以单纯的展示已经足够了,react-native本身所提供的功能其实已经远大于渲染一个页面了。目前我尝试下来也没遇到什么坑。
正因为热门,所以社区支持非常完善,遇到什么问题,google、Stack Overflow上都有答案。所以不用担心遇到什么无法解决的问题。文档和例子也非常完善,有大量优秀的开源组件支持,很多功能都被封装为单独的组件,不需要自己去重新写了。
debug功能非常强大,而且非常好用。而且有非常多第三方的debug tools。比如专门对redux的react-dev-tools。
但是react本身就是一个非常大的话题,需要一定的学习成本。同时react-native的目标并不是统一多平台实现,而是把多平台实现转化到react,所以难以只写一份代码就能兼容所有平台,所以还是需要很多的兼容代码。这样就需要写代码的人对多平台都有所了解,同时又要理解前端技术,可以说这样的人才其实还是很少的。当然,如果只是写比较简单的页面,使用各平台通用的一些组件,还是比较简单的。
这里就有一个例子,之后也会用这个列子来验证:
这里的图片是动态显示的,有才会显示。布局如下
------------------
| Title | |
| SubTitle | Image |
------------------
| name |
------------------
实现如下:
import React from 'react'
import {
View, Text, Image, StyleSheet
} from 'react-native'
import Sep from './seperator'
export default class Answer extends React.Component {
render() {
let {data} = this.props
return (
<View style={style.container}>
<View style={style.content}>
<View style={style.textContent}>
<Text style={style.title} numberOfLines={2}>{data.question.title}</Text>
<Text style={style.subTitle} numberOfLines={3}>{data.description}</Text>
</View>
{
data.images && data.images.length &&
<Image style={style.image} source={{uri: data.images[0]}} />
}
</View>
<View style={style.textSep}></View>
<Text style={style.nickName}>{data.author.nickname}</Text>
<Sep style={style.sep}/>
</View>
)
}
}
let style = StyleSheet.create({
container: {
marginLeft: 20,
marginRight: 20,
alignItems: 'stretch'
},
content: {
marginTop: 20,
width: '100%',
flexDirection: 'row'
},
textContent: {
flexDirection: 'column',
flexShrink: 1
},
image: {
marginLeft: 10,
width: 100,
borderRadius: 2,
aspectRatio: 1
},
textSep: {
height: 1,
width: 20,
backgroundColor: '#ccc',
marginTop: 10
},
title:{
fontSize: 16,
lineHeight: 20,
fontWeight: '600',
marginTop: 0
},
subTitle: {
marginTop: 8,
fontSize: 13,
lineHeight: 17,
color: '#999'
},
nickName: {
marginTop: 14,
fontSize: 12,
color: '#999'
},
sep: {
marginTop: 20
}
})
在使用下来,没有任何的问题,不论布局还是元素内容。由于使用的是js和jsx,和前端的编码非常类似,所以如果从前端转过来的学习成本会非常低。同时css布局使用的是flex,几乎完全兼容web端的布局方式。
官方的debug工具如下:
现在来看下非常相似的weex,由阿里出品。号称能多平台使用一份代码。那么真实情况是怎么样的呢?我也去尝试了下。
weex使用的是vue框架,所以更像web的编码方式,所以学习成本会低一些。
weex的文档也比较完整,但是开源组件显然就少了很多。
虽然weex号称能够统一多平台,但是能够使用的特性只有多平台共有的特性,这一点其实react-native也能做到。这样就导致weex被限定在一个比较小的方面了。
同时weex说能够无缝降级为h5实现,然而我实践下来发现其实并不能做到完全的无缝,因为两者之间有些东西并不能等价。react-native降级会更为麻烦一些,还要考虑多平台的原生组件。所以实际上weex的降级方案并没有他说的那么好用。
布局系统,虽然三方(h5,weex,react-native)都可以使用flex布局来实现,但还是有部分出入。react-native和web的flex兼容的最好,上面就是按照web的方式来写的,但是有部分是web没有的。weex比较奇怪,他实现了部分flex功能,同时又自己自创了几个,所以说降级并没有那么好用。下面的例子就是就可以看出来,如果按照web的写法会有一些错乱。
可以这么认为:
react-native flex (Yoga) > web flex > weex flex
weex的社区支持比较小,也就国内的几个厂家在使用,所以能获得的帮助也会少一些。
下面就是使用weex来实现的例子,css和上面的保持一致,发现有些布局已经发生错乱:
<template> <div class='container'> <div class='content'> <div class='textContent'> <text class='title'>{{answer.question.title}}</text> <text class='subTitle'>{{answer.description}}</text> </div> <image v-show="cover" class='image' :src='cover' ></image> </div> <div class='textSep'></div> <text class='nickName'>{{answer.author.nickname}}</text> <div class='sep'/> </div> </template> <script> export default { props: { answer: Object }, computed: { cover() { return this.answer.images && this.answer.images.length && this.answer.images[0] } } } </script> <style> .container { margin-left: 40; margin-right: 40; align-items: stretch; } .content { margin-top: 40; flex-direction: row; } .textContent { flex-direction: column; flex-shrink: 1; flex-grow: 1; } .image { margin-left: 20; width: 200; height: 200; border-radius: 4; flex-shrink: 0; /* aspect-ratio: 1; */ }
.textSep { height: 2; width: 40; background-color: #ccc; margin-top: 20; } .title { lines: 2; font-size: 32; line-height: 40; font-weight: 600; margin-top: 0 } .subTitle { lines: 3; margin-top: 16; font-size: 26; line-height: 34; color: #999; } .nickName { margin-top: 28; font-size: 24; color: #999; } .sep { margin-top: 40; height: 2; background-color: #ccc; } </style>
官方提供的工具可以看下:
如果你要问我选用哪个框架,根据上面的两个例子,心里应该就有选择了。react-native是一个非常大型的完善的项目,如果你不想折腾,那么就选择react-native吧。如果你想要极致的选择,你可以尝试下weex。而多平台支持并不是你选择的理由,react-native的子集完全可以做到多平台支持。
这是一个非常古老,但是非常有效的策略了。而且不需要更多的学习成本。缺点当然就是没有native那么的高效。
最有名的当然就是cordova这个开源项目了。他把很多native的功能通过module的方式暴露给web,让web能够使用很多的原生功能。而事实上很多情况下web只是作为一个app的附加功能,并不会给web如此多的权限。所以如果整个app是架构在web的基础上的话,可以尝试下cordova这类的项目。而仅仅是内嵌web,则需要考虑到控制不同的web需要拥有不同的权限。
另外一个非常有名的项目是JSWebviewBridge,他可以让我们定制化的注入几个功能,提供web端调用。这种定制比较简单,也没有module的概念,不能够构建复杂的功能。
h5最为常用和成熟,而且和原生系统关系不大,所以这里就简单介绍下。
剩下的基本就可以概括为模板技术和DSL技术了。这两者的应用面更加狭窄,往往作为并不要求那么灵活多变的场景。但是这种方式更为稳定和搞笑。
淘宝首页的模块化技术。可以想到,淘宝首页对动态化的要求没有那么高,首页的运营都是非常稳定的,样式也是非常稳定的,只有内容变化非常大,那么模板技术就是最适合的了。
其实很多app都在用这种方案,只是做的更加的简单些,比如:
[
{
"type": 1,
"data": {}
},
{
"type": 2,
"data": {}
}
]
这种数据结构,type
所对应的就是模板的代号。只是Tangram将这个更加的泛化了而已,并且增加了很多后台配置和管理的功能。
官方的例子:
这是一个依赖于JSON的DSL,包括布局、事件处理都可以在JSON中配置完成。
布局使用UITableView
,UICollectionView
,UIStackView
来实现,所以也有部分的兼容问题。
同时对于新的DSL,学习成本比较大,也缺乏debug和开发工具,手写JSON太不友好了。
这是我用Jasonette写的例子:
基本的布局可以实现,但有些布局还是不能很好的完成。
官方的例子:
这是利用xml或者html来布局的框架,虽然可以做到绑定事件,但并不能处理事件,所以局限非常大。这两者已经很久没人维护了。
可以看到目前这类想法除了模板技术,其他的都已经被X-native所替代了,因为这种技术的局限性实在是太大了。所以也建议大家慎重考虑这种局限比较大的方案。
以上介绍了目前比较热门的几种hybrid方案,就目前的情况来说,除了h5,其他都在向javascript-native方向发展,可能因为javascript这门语言的火热,同时又有大量前端开发。可见一个方案的优劣还是需要从更大的方面来看待,而不是从功能的实现上来看待,易用和学习成本还是非常重要的。
本文来自网易实践者社区,经作者段家顺授权发布。