什么是 Hippy
Hippy 是一款卓越的高性能跨端开发框架，其独特之处在于能够为开发者快速构建移动双端应用提供极大便利。
与传统 web 相比，Hippy 应用不仅在性能上表现出色，同时还具备出色的扩展性。此外，它还支持动态更新功能，而且不会带来任何协议风险。因此，Hippy 是那些需要快速迭代且对性能有严格要求的移动场景的不二之选。
为什么选择 Hippy
如果你对用户体验有高要求，并且追求高效的开发迭代过程，那么毫无疑问，Hippy将是你最佳的选择。Hippy具备以下一系列显著优势，让你的开发过程更为轻松高效：
首先，Hippy具有出色的开发效率。根据实际使用Hippy进行业务开发的经验来看，相较于传统的Android和iOS双端开发方式，使用Hippy开发能够节省高达70%的人力成本。
其次，Hippy拥有卓越的稳定性。目前，Hippy引擎的日启动次数已超过15亿次，并且引擎加载成功率高达99.9992%，业务加载成功率达到99.985%。这个令人瞩目的数据直接说明了Hippy在稳定性方面的优势。
此外，Hippy还具备快速迭代的能力。使用Hippy进行业务开发，能够将业务发版周期缩短75%至100%。这意味着你可以更快地推出新功能和更新，以满足快节奏的市场需求。
最后，Hippy在性能方面也表现出众。平均帧率超过同期竞品，自研的Layout引擎更是超越了Yoga。这意味着你的应用在使用Hippy开发后，将拥有更流畅、更高效的性能表现。
Hippy 示例
demo 上手
今天我决定尝试使用 Hippy React Demo 这个经典示例，它可以在官方仓库 https://github.com/Tencent/Hippy 找到。我计划将其编译成一个 Android 应用程序，以便进行入门学习。
项目包图：
代码语言：java复制Hippy
├── examples # 前终端范例代码。
│ ├── hippy-react-demo # hippy-react 前端范例代码。
│ ├── hippy-vue-demo # hippy-vue 前端范例代码。
│ ├── ios-demo # iOS 终端范例代码。
│ └── android-demo # Android 终端范例代码。
├── packages # 前端 npm 包。
│ ├── hippy-debug-server # Hippy 的前终端调试服务。
│ ├── hippy-react # Hippy 的 React 语法绑定。
│ ├── hippy-react-web # hippy-react 转 Web 的库。
│ ├── hippy-vue # Hippy 的 Vue 语法绑定。
│ ├── hippy-vue-css-loader # 用来将 CSS 文本转换为 JS 语法树以供解析的 Webpack loader。
│ ├── hippy-vue-native-components # hippy-vue 中浏览器中所没有的，额外的，终端定制组件。
│ └── hippy-vue-router # 在 hippy-vue 中运行的 vue-router。
├── ios
│ └── sdk # iOS SDK。
├── android
│ ├── support_ui # Android 终端实现的组件。
│ └── sdk # Android SDK。
├── core # C 实现的 JS 模块，通过 Binding 方式运行在 JS 引擎中。
├── layout # Hippy 布局引擎。
├── scripts # 项目编译脚本。
└── types # 全局 Typescript 类型定义。一. 准备环境
Android Studio和NDK是用来编译Android应用程序的开发工具。Node.JS则是用来运行前端编译脚本的工具。我们建议使用Node v16和NPM v7版本。现在，您可以拉取样例代码来开始您的开发工作。
使用vscode打开样例项目
在这个文件夹中存在许多打包文件，我们暂时不必过多关注，首先要确保编译成功。
执行npm install执行npm run web:dev
在成功执行后，我们就可以在本地的web环境中打开项目了。现在让我们先来看一个实例，以更好地理解。
如果你想构建一个web包，只需执行npm run web:build命令即可，在执行成功后会生成一个名为"dist"的目录。
然而，如果你想构建一个android包，你需要先退出当前目录，返回到example根目录下，然后执行相应的命令。
如果在执行下面的命令时遇到超时或其他错误，我建议你将npm的官方源切换为国内镜像源。这样做可以提高下载速度并避免一些网络问题。
npm config set registry该命令会进行换源。
npm run init
该命令由 npm install && npx lerna bootstrap && npm run build 组成，你也可以分别执行这几个命令
#编译hippy-react-demonpm run buildexample hippy-react-demo
#如果上一条命令有异常，可以执行以下命令
cd examples/hippy-react-demo npm install --legacy-peer-deps
cd ../..
npm run buildexample hippy-react-demo
执行完命令后，构建的产物将会被打包并放置在examples/hippy-react-demo/dist目录中。这个目录中的内容类似以下所示：
代码语言：java复制examples/hippy-react-demo/dist
├── android
│ ├── assets
│ │ ├── defaultSource.jpg
│ │ └── hippyLogoWhite.png
│ ├── asyncComponentFromHttp.android.js
│ ├── asyncComponentFromLocal.android.js
│ ├── index.android.js
│ ├── vendor-manifest.json
│ └── vendor.android.js
└── ios
├── assets
│ ├── defaultSource.jpg
│ └── hippyLogoWhite.png
├── asyncComponentFromHttp.ios.js
├── asyncComponentFromLocal.ios.js
├── index.ios.js
├── vendor-manifest.json
└── vendor.ios.js总结
当前的使用门槛相对较高，适合有一定基础的开发者。对于初学者来说，可以先了解并记录这个新的开源方案。在社区生态完善之后，可以根据业务需求和公司资源配置的情况，综合比较Flutter、React Native、Weex以及基于H5的Hybrid等其他方案，并选择适合自己业务开发的框架和模式。这个开源方案由鹅场出品，后续还有更多可期待的发展。
