hippy-vue 设计和实现 · 2018. 11. 26. · hippy-vue 架构 android platform ios platform web...
TRANSCRIPT
-
前终端统⼀一⽅方案Hippy-Vue 设计和实现
腾讯 / QQ 浏览器器 SuperTeam / xqkuang
-
背景介绍
Web
开发效率⾼高
⽀支持多平台
可动态发布
体验差
能⼒力力弱
Native
开发效率低
⽆无法跨平台
发布复杂
体验好
能⼒力力强
传统移动端开发模式,⽆无法满⾜足业务精细化运营需求,急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。
前终端⼀一体化
开发效率⾼高
⽀支持双平台
可动态发布
能⼒力力强
体验好
-
Hippy 简介
腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成:
• Hippy SDK 是⼀一套多端统⼀一的开发框架,它能通过 JavaScript ⾼高效率地开发出:跨平台(安卓/iOS/
Web)、⾼高性能的原⽣生应⽤用,尤其适合需要快速迭代⼜又追求⾼高性能的产品。
• Hippy 管理理平台 涵盖编译、发布、监控等动态运营所需的各个环节,并⽀支持灰度⽐比例例、ABTest、差量量包等
⾼高级特性。
AndroidPlatform
iOSPlatform
WebPlatform
React.jsLibrary
Vue.jsLibrary
前端主导⽀支持最流⾏行行的框架
向阳⽽而⽣生代码即将对外开源
( 发布平台)
User Code JavaScript
-
Hippy 底层三⼤大特性
⾼高性能可复⽤用滚动列列表
动画和⼿手势实现
X5 内核团队提供⽀支持
-
项项⽬目架构
Hippy SDK 采⽤用三层设计,其中:
• JavaScript 层:提供业务代码运⾏行行时的前端上下⽂文环境;
• Native Framework 层:负责前终端通讯与 JavaScript VM,并提供 Native 相关模块;
• Portable UI 层:提供基础 UI 组件与布局计算框架,并负责渲染⾄至⽬目标平台;
Layout/StyleHippy Layout
TextComponent
Text...Component
NodeRender
Portable UI
Hippy BufferBridge
TextComponent
Network...Module
X5 V8/JSCJS Executor
Native Framework
JS2NativeBridge
JavaScript
Native2JSBridge
ConsoleGlobal
Console...Global Method
AndroidPlatform
iOSPlatform
WebPlatformReact.jsLibrary
Vue.jsLibrary
User CodeJavaScript
-
项项⽬目架构
Layout/StyleHippy Layout
TextComponent
Text...Component
NodeRender
Portable UI
Hippy BufferBridge
TextComponent
Network...Module
X5 V8/JSCJS Executor
Native Framework
JS2NativeBridge
JavaScript
Native2JSBridge
ConsoleGlobal
Console...Global Method
Hippy Buffer⼆二进制传输协议,编解码性能更更好。
X5 V8X5 团队特供 V8 引擎。
Hippy LayoutiOS、Android 共享布局引擎,纯 C 开发,只有 50kb。
-
项项⽬目架构
Hippy SDK 采⽤用三层设计,其中:
• JavaScript 层:提供业务代码运⾏行行时的前端上下⽂文环境;
• Native Framework 层:负责前终端通讯与 Javascript VM,并提供 Native 相关模块;
• Portable UI 层:提供基础 UI 组件与布局计算框架,并负责渲染⾄至⽬目标平台;
Layout/StyleHippy Layout
TextComponent
Text...Component
NodeRender
Portable UI
Hippy BufferBridge
TextComponent
Network...Module
X5 V8/JSCJS Executor
Native Framework
JS2NativeBridge
JavaScript
Native2JSBridge
ConsoleGlobal
Console...Global Method
AndroidPlatform
iOSPlatform
WebPlatformReact.jsLibrary
Vue.js Library
User CodeJavaScript
-
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 架构
AndroidPlatform
iOSPlatform
WebPlatform
Vue appUser code
Vue.jsLibrary
Component Mapname/props/events…
Renderer
Vue.js Core vnode/events…
DOM EmulatingDocument/Element/Text…
CSS MatcherRegExp
Runtime
template/script/stylevue-plugin
Compiler
CSS ASThippy-vue-css-loader
CSS SelectorApply the styles
ConsoleGlobal
JavasSriptVirtual DOM
CSS Reverse SelectorApply styles to DOM
Component Translatorto Native
node-ops
Hippy-Vue
-
模板
Hello
{ name: "Text", // 组件名称转换 props: { value: "Hello", // 参数转换 onClick: true, // 事件绑定 },}
{ name: "Image", props: { source: { uri: "http://www.qq.com/logo.png", }, },}
HTML Hippy Buffer
-
样式
CSS MatcherRegExp
CSS ASThippy-vue-css-loader
CSS Reverse SelectorApply styles to DOM
#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 } ] })]
Hello
VueConf
Hangzhou
Hello VueConf Hangzhou
0: [false, false] = Mismatch1: [true, false] = Part Matched;2: [true, true] = Full Matched;
-
你们关⼼心的问题
Vue 升级到 3.0 后?
-
核⼼心升级不不影响 Hippy-Vue
Hippy-Vue 只更更改 Vue 的输⼊入和输出,核⼼心逻辑并未侵⼊入:
• 通过 node-ops 接⼝口对接⾃自定义 DOM
• 转换 DOM 到终端。• 单独实现 CSS 编译和解析
Vue 3.0 升级后如果 node-ops 接⼝口不不变,则可以直接升级适配。
更更新:有了了 createRender() 更更⽅方便便了了。
Component Mapname/props/events…
Renderer
Vue.js Core vnode/events…
DOM EmulatingDocument/Element/Text…
CSS MatcherRegExp
Runtime
template/script/stylevue-plugin
Compiler
CSS ASThippy-vue-css-loader
CSS SelectorApply the styles
ConsoleGlobal
JavaScriptVirtual DOM
CSS Reverse SelectorApply styles to DOM
Component Translatorto Native
node-ops
Hippy-Vue
-
Hippy 将在近期开源
Thx a lotKeep in touch