前终端一体化开发解决方案 腾讯 lucaspei（裴伟）.

Presentation on theme: "前终端一体化开发解决方案 腾讯 lucaspei（裴伟）."— Presentation transcript:

1 前终端一体化开发解决方案 腾讯 lucaspei（裴伟）

2 背景介绍 传统移动端开发模式，无法满足业务精细化运营需求，需寻找一种高性能、跨平台、动态发布的开发解决方案。 Web Native
开发效率高 支持双平台 可动态发布 体验差 能力弱 Native 开发效率低 无法跨平台 发版复杂 体验好 能力强 QQ浏览器 最早采用 React Native 作为解决方案， 但在实践过程中发现其存在大量的问题： BSD + Patents License List 滑动性能差 启动速度慢 SDK 包太大，增加了 7.5M 双端 API 大量未对齐 没有发布系统 …

3 Hippy简介 Hippy 动态运营解决方案由 Hippy SDK 与 Hippy 发布系统 组成：
Hippy SDK 是一套多端统一的开发框架，它能通过脚本语言（JavaScript）高效率的开发出跨平台（安卓，iOS，Web）、高性能的原生应用，尤其适合需要快速迭代又追求高性能的产品。 Hippy 发布系统 涵盖代码构建、在线发布、报表监控等动态运营所需的各个环节，并支持灰度、ABTest、差量包等高级特性。 React.js Library User Code JavaScript Vue.js Library 前端主导 支持最流行的框架 向阳而生 代码全面内部开源 Android Platform iOS Platform Web Platform

4 使用情况 QQ 浏览器内有 20个 业务采用 Hippy 实现，占总业务数 56% 业务发版周期缩短 75% ~ 100%*即时发布
而人力投入仅需原来的 30% (QQ 浏览器首屏信息流) QQ 浏览器 QQ 音乐 应用宝 天天K歌 天天快报 理财通 腾讯体育 VOOV 直播 大丰证券 心悦俱乐部 WiFi 管家 游云南 科蓝 速看 T-PaaS 云视听极光

5 项目架构 Hippy SDK 采用三层设计，其中： JavaScript 层：提供业务代码运行时的前端上下文环境；
Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块； Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染至目标平台； DOM/CSS Hippy Layout Text Component Text... Node Render Portable UI Hippy Buffer Bridge Network... Module V8/JSC JS Executor Native Framework JS2Native JavaScript Native2JS Console Global Console... Global Method React.js Library Android Platform User Code JavaScript iOS Platform Vue.js Library Web Platform

6 如何门槛更低？ 如何标准化？ 面向前端的框架 抹平了不同平台间的差异，并可向 3 端输出 让开发者使用 熟悉的网页开发方式
支持 2 款前端常用框架 React.js / Vue.js 对前端框架无侵入，便于跟随社区升级，单元测试覆盖率 80% 支持 42 种 CSS 布局样式 布局计算与 X5 内核（网页）计算方式完全相同，比起同类产品支持度更高，对前端更友好！ 支持 29 种 CSS 外观样式 独家支持 background[image|position|size] / zIndex / display 前端常用样式！ 支持 5 种 CSS 选择器 让开发者使用 熟悉的网页开发方式 开发原生应用 GOAL （CSS 雪碧图） 如何门槛更低？ 如何标准化？ W3C CSS Selector Class Selectors(.) Id Selectors(#) Universal Selectors(*) Attribute Selectors([attribute]) Descendant combinator(E F)

7