Hippy-VueConf

Size: px

Start display at page:

Download "Hippy-VueConf"

崎魏
5 years ago
Views:

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 Vue.js Library 前端主导支持最流行行的框架向阳而生代码即将对外开源 Android ios Web ( 发布平台 )

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 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

6 项目架构 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

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 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

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 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

15 模板 HTML clickhandler >Hello</a> Hippy Buffer { } name: "Text", // 组件名称转换 props: { value: "Hello", // 参数转换 onclick: true, // 事件绑定 }, <img src=" /> { } name: "Image", props: { source: { uri: " }, },

16 样式 CSS AST hippy-vue-cssloader CSS Matcher RegExp #id { color: red } #id.class { background-color: blue } [ { selector: [['#id']], style: [{ color: }], }, { selector: [['#id', '.class']], style: [{ backgroundcolor: }] } ] [ ] Matcher({ selector: [[IdSelector('id')]], style: [ { color: } ], }), Matcher({ selector: [[IdSelector('id'), ClassSelector('class')]], style: [ { backgroundcolor: } ] }) hello VueConf hangzhou CSS Reverse Selector Apply styles to DOM 0: [false, false] = Mismatch 1: [true, false] = Part Matched; 2: [true, true] = Full Matched; Hello VueConf Hangzhou

17 你们关心的问题 Vue 升级到 3.0 后?

18 核心升级不不影响 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() 更更方便便了了

19 Hippy 将在近期开源 Thx a lot Keep in touch

清华大学2013年毕业生就业质量报告

清华大学2013年毕业生就业质量报告清华大学 2013 年毕业生就业质量报告清华大学就业指导中心 2014 年 2 月 2013 年, 清华大学认真贯彻落实中央及教育部北京市关于大学生就业的各项政策, 并充分结合学校定位和学生发展, 以充分就业为基础, 以提升质量为重点, 以就