Hippy VueConf

1. 前终端统⼀一⽅方案 Hippy-Vue 设计和实现 腾讯 / QQ 浏览器器 SuperTeam / xqkuang
2. 背景介绍 传统移动端开发模式,⽆无法满⾜足业务精细化运营需求,急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 Web Native 前终端⼀一体化 开发效率⾼高 开发效率低 开发效率⾼高 ⽀支持多平台 ⽆无法跨平台 ⽀支持双平台 可动态发布 发布复杂 可动态发布 体验差 体验好 体验好 能⼒力力弱 能⼒力力强 能⼒力力强
3. Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成: • Hippy SDK 是⼀一套多端统⼀一的开发框架,它能通过 JavaScript ⾼高效率地开发出:跨平台(安卓/iOS/ Web)、⾼高性能的原⽣生应⽤用,尤其适合需要快速迭代⼜又追求⾼高性能的产品。 • Hippy 管理理平台 涵盖编译、发布、监控等动态运营所需的各个环节,并⽀支持灰度⽐比例例、ABTest、差量量包等 ⾼高级特性。 React.js Library User Code JavaScript 前端主导 向阳⽽而⽣生 ⽀支持最流⾏行行的框架 Android Platform Vue.js Library 代码即将对外开源 iOS Platform Web Platform ( 发布平台)
4. Hippy 底层三⼤大特性 ⾼高性能可复⽤用滚动列列表 动画和⼿手势实现 X5 内核团队提供⽀支持
5. 项⽬目架构 Hippy SDK 采⽤用三层设计,其中: • JavaScript 层:提供业务代码运⾏行行时的前端上下⽂文环境; • Native Framework 层:负责前终端通讯与 JavaScript VM,并提供 Native 相关模块; • Portable UI 层:提供基础 UI 组件与布局计算框架,并负责渲染⾄至⽬目标平台; JavaScript Vue.js Library JS2Native Bridge Console... Console Global Global Method Native2JS Bridge Android Platform Hippy Buffer Bridge X5 V8/JSC JS Executor iOS Platform Layout/Style Hippy Layout Node Render Native Framework User Code JavaScript Network... Text Module Component Portable UI React.js Library Text... Text Component Component Web Platform
6. 项⽬目架构 JavaScript JS2Native Bridge Console... Console Global Global Method Native2JS Bridge X5 V8 X5 团队特供 V8 引擎。 Native Framework Network... Text Module Component Hippy Buffer Bridge X5 V8/JSC JS Executor Layout/Style Hippy Layout Node Render Portable UI Text... Text Component Component Hippy Buffer ⼆二进制传输协议,编解码性能更更好。 Hippy Layout iOS、Android 共享布局引擎, 纯 C 开发,只有 50kb。
7. 项⽬目架构 Hippy SDK 采⽤用三层设计,其中: • JavaScript 层:提供业务代码运⾏行行时的前端上下⽂文环境; • Native Framework 层:负责前终端通讯与 Javascript VM,并提供 Native 相关模块; • Portable UI 层:提供基础 UI 组件与布局计算框架,并负责渲染⾄至⽬目标平台; JavaScript Vue.js Library JS2Native Bridge Console... Console Global Global Method Native2JS Bridge Android Platform Hippy Buffer Bridge X5 V8/JSC JS Executor iOS Platform Layout/Style Hippy Layout Node Render Native Framework User Code JavaScript Network... Text Module Component Portable UI React.js Library Text... Text Component Component Web Platform
8. Hippy-Vue 的初⼼心 容易易 复⽤用 纯粹
9. Hippy-Vue 三个⽬目标 容易易 前端开发所熟悉的 复⽤用 拥抱标准 纯粹 只做移动端的实现
10. Hippy-Vue 特性 同⼀一套代码,三端运⾏行行: 移动端⽤用 Hippy-Vue 渲染原⽣生代码 浏览器器⾥里里⽤用原版 Vue 渲染⽹网⻚页代码 终端扩展 Vue.Native,可以通过它 判断是否在终端运⾏行行,访问原⽣生能⼒力力。
11. Hippy-Vue 特性 同样的 div 浏览器器⾥里里⽀支持的背景图样式 Hippy-Vue 同样⽀支持 跟浏览器器⼀一样通过 overflow 样式 确定滚动⽅方向
12. Hippy-Vue 特性 CSS display 参数⽀支持 none 值 v-show 照样使⽤用
13. Hippy-Vue 特性 textarea 跟浏览器器⼀一模⼀一样 v-model 直接⽤用来做数据绑定 Emoji ⽀支持没问题 😋
14. Hippy-Vue 架构 Vue app User code Vue.js Library Web Platform Hippy-Vue Android Platform Compiler template/script/style vue-plugin Runtime DOM Emulating Document/Element/ Text… JavasSript Console Virtual Global DOM CSS AST hippy-vue-cssloader iOS Platform node-ops Vue.js Core vnode/events… CSS Matcher RegExp Renderer Component Map name/props/events… CSS Reverse Selector Apply styles to DOM Component CSS Selector Translator Apply the styles to Native
15. 模板 HTML Hippy Buffer { <a @click=“clickHandler”>Hello</a> name: "Text", // 组件名称转换 props: { value: "Hello", // 参数转换 onClick: true, // 事件绑定 }, } { name: "Image", props: { source: { uri: "http://www.qq.com/logo.png", }, }, <img src="http://www.qq.com/logo.png" /> }
16. 样式 CSS AST hippy-vue-cssloader #id { color: red } #id .class { background-color: blue } [ { selector: [['#id']], style: [{ color: 12345 }], }, { selector: [['#id', '.class']], style: [{ backgroundColor: 56789 }] <p>Hello</p> <p id="id"> VueConf <p class="class">Hangzhou</p> </p> CSS Reverse Selector Apply styles to DOM } ] CSS Matcher RegExp 0: [false, false] = Mismatch 1: [true, false] = Part Matched; 2: [true, true] = Full Matched; [ Matcher({ selector: [[IdSelector('id')]], style: [ { color: 12345 } ], }), Matcher({ selector: [[IdSelector('id'), ClassSelector('class')]], style: [ { backgroundColor: 56789 } ] }) ] Hello VueConf Hangzhou
17. 你们关⼼心的问题 Vue 升级到 3.0 后?
18. 核⼼心升级不不影响 Hippy-Vue Hippy-Vue 只更更改 Vue 的 输⼊入和输出,核⼼心逻辑并未 侵⼊入: • 通过 node-ops 接⼝口对 接⾃自定义 DOM • 转换 DOM 到终端。 • 单独实现 CSS 编译和解 析 Vue 3.0 升级后如果 node-ops 接⼝口不不变,则可 以直接升级适配。 更更新:有了了 createRender() 更更⽅方便便 了了。 Hippy-Vue Compiler template/script/style vue-plugin Runtime DOM Emulating Document/Element/ Text… JavaScript Console Virtual Global DOM CSS AST hippy-vue-cssloader node-ops Vue.js Core vnode/events… CSS Matcher RegExp Renderer Component Map name/props/events… CSS Reverse Selector Apply styles to DOM Component CSS Selector Translator Apply the styles to Native
19. Hippy 将在近期开源 Thx a lot Keep in touch