hippy-react 三端同构

1. Hippy简介

1.1 简介

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

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

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

Hippy 官方文档： http://hippyjs.org/#/guide/integration

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基础vendo

├── hippy-webpack.android.js // 打包android业务代码配置

├── hippy-webpack.dev.js // 终端本地调试配置

├── hippy-webpack.ios-vendor.js // 打包ios基础vendo

├── 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 // 配置vendo



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();



// 使用serviceWorke

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 属性尚未支持数组格式