hippy-react 三端同构

1758

1. Hippy简介

1.1 简介

Hippy (github.com/Tencent/Hip…) 是腾讯在2019年12月20日开源跨端框架。

Hippy 在腾讯内部已经运行了3年,支持了18款线上业务,日均PV过亿,形成了一套完整的生态。

与其他跨端框架相比,Hippy紧贴W3C标准,对前端开发者更加友好,同时支持 ReactVue 两大前端主流框架

Hippy 官方文档: hippyjs.org/#/guide/int…

1.2 @hippy/react

@hippy/react 是基于 Facebook React 的官方自定义渲染器 react-reconciler 重新开发的 React 到终端的渲染层,可以使用 React 16.+ 的大部分特性。

在语法上 @hippy/react 更加接近底层终端,使用了类似 React Native 的语法。

: 由于 Hippy 页面挂在一个节点上,所以 Portals 暂时无法支)

1.2 @hippy/react-web

该项目仍在开发中,有不完善的地方

考虑到客户端页面在不少场景下,需要提供web版本,例如分享页,h5版本的应用。

Hippy 提供了 @hippy/react-web 框架来支持 @hippy/react 项目通过转译,生成可以运行在浏览器中的版本,从框架上支持三端同构,减少开发成本

@hippy/react-web 是通过实现 @hippy/react 的组件的方式,每个组件提供相同的功能和相同的api,从而达到直接将 @hippy/react 项目代码直接转化为 web 版本

2. 三端同构思路

Hippy 可以便捷地实现三端重构

2.1 架构图

  1. @hippy/react 使用 Virtual Dom 维护组件的布局,通过 Native Renderer 对组件进行渲染,在终端中显示出来
  2. @hippy/react-web 通过 Component 实现 @hippy/react 组件的功能,同时使用 Adapters 实现原生组件的特性
  3. 使用 Hippy 开发的项目,只组要简单进行打包配置,就可以实现多端兼容。

2.2 项目三端同构思路

在实际的业务开发过程中,会遇到很多需要同时出现的app和web的页面需求,使用hippy可以简单实现这一需求。

使用 Hippy 进行三端同构,主要思路是:

  1. 页面功能,组件的表现尽可能在三端表现一致
  2. web页面抛弃 CSS 文件,通过 StyleSheet 来管理页面组件样式
  3. 各端特性化功能,通过独立文件维护: **.hippy.jsx **.web.jsx
  4. 各端代码独立webpack打包入口,实现平台特性需求
  5. 对页面路由做相应的处理
  6. 在终端中没有 window 等浏览器的全局变量,所以在终端中调用这些变量会导致页面挂掉

2.3 项目文件架构

创建 Hippy 项目,可以参考 Hippy-React脚手架开发,快速创建项目

2.3.1. 项目文件结构

build/ // webpack 配置
├── hippy-webpack.android-vendor.js // 打包android基础vendor
├── hippy-webpack.android.js // 打包android业务代码配置
├── hippy-webpack.dev.js // 终端本地调试配置
├── hippy-webpack.ios-vendor.js // 打包ios基础vendor
├── hippy-webpack.ios.js // 打包ios业务代码配置
├── hippy-webpack.web.dev.js // web 开发配置
├── hippy-webpack.web.js // web 打包配置
├── run-ios.js // 拉起IPHONE模拟器
├── template.html // web index.html 模板
└── vendor.js // 配置vendor

index.js // 原生入口
index.web.js // web 入口

2.3.2 @hippy/react 重定向

在 web版本的 webpack 配置文件中,通过alias的方式,将'@hippy/react' 替换成 '@hippy/react-web'

// build/hippy-webpack.web.dev.js
// build/hippy-webpack.web.js
resolve: {
    extensions: ['.js', '.jsx', '.json'],
    modules: [path.resolve(__dirname, '../node_modules')],
    alias: {
      '@hippy/react': '@hippy/react-web',
    },
  },

2.3.3 入口文件

  • 终端入口文件
// index.js
import { Hippy } from '@hippy/react';
import App from './App';

new Hippy({
  appName: 'demo',
  entryPage: App,
}).start();
  • web 入口文件
import { Hippy } from '@hippy/react';
import App from './App';
import * as serviceWorker from './serviceWorker';

import './index.css'; // 通过引入css文件,对浏览器组件默认样式进行处理,以及一些需要使用伪元素的样式

new Hippy({
  appName: 'demo',
  entryPage: App,
}).start();

// 使用serviceWorker
serviceWorker.unregister();

2.3.4 平台个性化逻辑处理

Hippy 通过 Platform.OS 提供了平台判断,开发者可以根据平台实现不同的逻辑

import { Platform } from '@hippy/react';
const ISWEB = Platform.OS === 'web';
handleGoto (url) {
	if (ISWEB) {
		window.open(url)
		return;
	} else {
	    // 调用原生跳转逻辑
	}
}

3. 优缺点

3.1 优点

  1. 减少开发量,提高开发效率
  2. 在app内体验好
  3. app实现热更新,快速发布

3.2 缺点

  1. 需要抛弃一些平台特性,例如CSS的伪元素,transition等,某种情况下增加了开发复杂度
  2. Hippy 暂时对 Navigator 支持较弱,是通过创建新的 Hippy 实例来实现多页面,页面间的数据同步比较麻烦
  3. Hippy 页面是在终端的一个 View Container中,因此安卓物理返回键需要做特殊处理
  4. 部分组件尚未实现多端接口统一,例如 @hippy/react-web 中的 ScrollView 组件的 style 属性尚未支持数组格式