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