diff --git a/docs/README.md b/docs/README.md index 314bbbe22f6..c820bf0815a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,26 +1,45 @@ -# Hippy 概述 +# Hippy 简介 + +Hippy 是 TDF 腾讯端框架(Tencent Device-oriented Framework)下的开源跨平台应用开发解决方案。 Hippy 可以理解为一个精简版的浏览器,从底层做了大量工作,抹平了 iOS 和 Android 双端差异,提供了接近 Web 的开发体验,目前上层支持了 React 和 Vue 两套界面框架,前端开发人员可以通过它,将前端代码转换为终端的原生指令,进行原生终端 App 的开发。 -同时,Hippy 从底层进行了大量优化,在启动速度、可复用列表组件、渲染效率、动画速度、网络通信等方面都提供了业内顶尖的性能表现。 +同时,Hippy 从底层进行了大量优化,在启动速度、渲染性能、动画速度、内存占用、包体积等方面都提供了业内顶尖的性能表现。 + +在Hippy 3.0版本,我们对 Hippy 架构做了一次比较大的重构, 采用 Driver,Dom Manager,Renderer 分层解耦的设计理念,其设计目标就是希望框架在未来具有很好的可扩展性,以复用的 DOM 管理、排版布局为核心连接上层 Driver 和下层 Renderer,同时支持不同 Driver 和 Renderer 的接入和自由切换。 + +## 和 Web 接近的开发体验 + +* Hippy 对齐浏览器 DOM 的事件、网络、日志、定时器、Performance 等API, 前端开发同学没有太高的学习成本。 + +* Hippy-Vue、Hippy-React兼容 Vue 和 React 框架, 使用 Vue、React 开发的 Web 项目基本无缝迁移。 + +* 完全支持 Flex 布局, 和常用的 CSS 属性。 + +* 兼容 Webpack/Rollup 等打包工具, 支持分包, 代码动态加载, 有完善的 devtools 工具, 对齐前端的开发体验。 + + +## 一次开发,多端运行 + +使用 Hippy 框架开发后,代码可以同时运行在 Android、iOS、 Web等多个平台。 + +## 出色的性能表现 -## 功能对比 +Hippy 有比竞品更出色的性能表现。 -Hippy 从底层增加了很多和浏览器相同的接口,方便了开发者使用,这里有几个 Hippy 的独有功能。 +### 渲染性能 -| 分类 | 特性 | 说明 | 支持情况 | -| ---- | ------------------------ | ------------------------ | -------- | -| 接口 | fetch | Http/Https 协议请求 | ✅ 支持 | -| | WebSocket | 基于 Http 协议的即时通讯 | ✅ 支持 | -| 事件 | onClick | 点击事件 | ✅ 支持 | -| | onTouchStart/onTouchDown | 触屏开始事件 | ✅ 支持 | -| | onTouchMove | 触屏移动事件 | ✅ 支持 | -| | onTouchEnd | 触屏结束事件 | ✅ 支持 | -| | onTouchCancel | 触屏取消事件 | ✅ 支持 | -| 样式 | zIndex | 界面层级 | ✅ 支持 | -| | backgroundImage | 背景图片 | ✅ 支持 | +ListView 在滑动时的性能对比,Hippy 可以一直保持十分流畅的状态。 -## 包体积 +渲染性能 + +### 内存占用 + +而在内存占用上,初始化 List 时 Hippy 就略占优势,在滑动了几屏后内存开销的差距越来越大。 + +![内存占用](assets/img/listmeicun.png) + +### 包体积 Hippy 的包体积在业内也是非常具有竞争力的。 @@ -32,21 +51,25 @@ Hippy 的包体积在业内也是非常具有竞争力的。 上图是在前端搭建了一个最简单的 ListView 后,前端打出的 JS 的包大小对比。 -## 渲染性能 +## 可扩展的架构设计 -ListView 在滑动时的性能对比,Hippy 可以一直保持十分流畅的状态 +
+3.0架构 -渲染性能 +### 驱动层 -## 内存占用 +驱动层为业务封装了对接DOM层的渲染指令和底层接口, 用户可以使用 Hippy 框架提供的 React/Vue 驱动层来开发业务,也支持扩展其它任意 DSL 语言进行驱动。详见 [Hippy-React](api/hippy-react/introduction)、[Hippy-Vue](api/hippy-vue/introduction)。 -而在内存占用上,初始化 List 时 Hippy 就略占优势,在滑动了几屏后内存开销的差距越来越大。 +### DOM层 -![内存占用](assets/img/listmeicun.png) +DOM Manager 从 Java/OC 抽离到 C++,作为中间枢纽,除了接收处理来自上层的消息,进行 DOM Tree 的创建和维护外,还负责与不同渲染引擎,排版引擎和调试工具的对接通信。 + +### 渲染层 -## 跟 Web 接近的开发体验 +* Native Renderer:使用 Android/iOS 原生组件进行渲染, 详见 [Android](architecture/render/android/native-render)、[iOS](architecture/render/ios/native-render)。 +* Voltron Renderer:使用 Flutter 渲染, 详见 [Voltron](architecture/render/voltron/voltron-render)。 +* Web Renderer:使用 WebView 渲染(Web 同构), 详见 [Web](architecture/render/web/web-render)。 -Hippy 在开发体验上也进行了大量优化,包含但不限于,跟浏览器一样的 onClick、onTouch 系列触屏事件,更加简单的动画方案,hippy-vue 提供了和 Vue 的完全兼容等等。 ## 交流链接 @@ -57,4 +80,4 @@ Hippy 在开发体验上也进行了大量优化,包含但不限于,跟浏 ## 总结 -如果您准备好了,那就 [开始接入 Hippy](development/integration.md) 吧。 +如果您准备好了,那就 [开始接入 Hippy](development/demo.md) 吧。 diff --git a/docs/_navbar.md b/docs/_navbar.md index bf7d78eac63..e05bf600fc8 100644 --- a/docs/_navbar.md +++ b/docs/_navbar.md @@ -1,3 +1,4 @@ +* [简介](/) * [开发指引](development/demo.md) * [API](api/hippy-react/introduction.md) * [特性](feature/feature3.0/vfs.md) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 983e0df7900..39f4d37d09e 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -1,4 +1,5 @@ +* [简介](/) * [开发指引](development/demo.md) * [API](api/hippy-react/introduction.md) * [特性](feature/feature3.0/vfs.md) diff --git a/docs/architecture/introduction.md b/docs/architecture/introduction.md index bb459a51ecc..2a9098dda2f 100644 --- a/docs/architecture/introduction.md +++ b/docs/architecture/introduction.md @@ -4,12 +4,24 @@ # Hippy 3.x 架构 -Hippy 正在进行 3.x 架构的升级,在 3.x 中业务与渲染层中的具体实现可根据用户实际场景进行切换:业务层上不再局限于 JS 驱动,还可选择(如:DSL/Dart/WASM 等)其它语言进行驱动;DOM Manager 从 Java/OC 下沉到 C++,作为中间枢纽,除了接收处理来自上层的消息进行 DOM Tree 的创建和维护外,还负责与不同渲染引擎,排版引擎和调试工具的对接通信;在渲染层中,渲染引擎除了支持现有原生(Native)渲染之外,还可以选择其他渲染 Renderer,如 Flutter(Voltron) 渲染。Hippy 3.x 能够弥补当前 Hippy 2.x 在性能,双端一致性以及组件支持方面的一些短板,敬请期待! +Hippy 正在进行 3.x 架构的升级,在 3.x 中业务与渲染层中的具体实现可根据用户实际场景进行切换:业务层上不再局限于 JS 驱动,也支持切换其它任意 DSL 语言进行驱动;DOM Manager 从 Java/OC 下沉到 C++,作为中间枢纽,除了接收处理来自上层的消息进行 DOM Tree 的创建和维护外,还负责与不同渲染引擎,排版引擎和调试工具的对接通信;在渲染层中,渲染引擎除了支持现有原生(Native)渲染之外,还可以选择其他渲染 Renderer,如 Flutter(Voltron) 渲染。Hippy 3.x 能够弥补当前 Hippy 2.x 在性能,双端一致性以及组件支持方面的一些短板,敬请期待!
-
3.0架构 -
+ +## 驱动层 + +驱动层为业务封装了对接DOM层的渲染指令和底层接口, 用户可以使用 Hippy 框架提供的 React/Vue 驱动层来开发业务,也支持切换其它任意DSL 语言进行驱动。详见 [Hippy-React](api/hippy-react/introduction)、[Hippy-Vue](api/hippy-vue/introduction)。 + +## DOM层 + +DOM Manager 从 Java/OC 抽离到 C++,作为中间枢纽,除了接收处理来自上层的消息,进行 DOM Tree 的创建和维护外,还负责与不同渲染引擎,排版引擎和调试工具的对接通信。 + +## 渲染层 + +* Native Renderer:使用 Android/iOS 原生组件进行渲染, 详见 [Android](architecture/render/android/native-render)、[iOS](architecture/render/ios/native-render)。 +* Voltron Renderer:使用 Flutter 渲染, 详见 [Voltron](architecture/render/voltron/voltron-render)。 +* Web Renderer:使用 WebView 渲染(Web 同构), 详见 [Web](architecture/render/web/web-render)。