加收藏
Hybrid App走向“轻混”：剖析 WeX5 开源高性能H5 App开发框架 by 王洁,宋兴烈
第1页
Hybrid App 走向“轻混”
剖析 WeX5 开源高性能 H5 App 开发框架
宋兴烈、王洁 北京起步科技有限公司
剖析 WeX5 开源高性能 H5 App 开发框架
宋兴烈、王洁 北京起步科技有限公司
第2页
2016-4-23
第3页
议程
nHybrid App的技术发展历程：从“重 混”到“轻混”
n构建高性能H5 App开发框架 nWeX5可视化快速开发实践
nHybrid App的技术发展历程：从“重 混”到“轻混”
n构建高性能H5 App开发框架 nWeX5可视化快速开发实践
第4页
Hybrid App的技术发展历程 从“重混”到“轻混”
第5页
苹果和谷歌开启了移动应用新时代
2007年6月，乔布斯发布第一代iPhone。 2008年10月，Google发布第一部 Android智能手机。
一个应用两套实现
2007年6月，乔布斯发布第一代iPhone。 2008年10月，Google发布第一部 Android智能手机。
一个应用两套实现
第6页
Hybrid App混合应用应运而生
Web成为Hybrid App的首选技术
技术简单、支持广泛、开发者众多、更擅长“炫”的页面
Hybrid App = Web + Native
但是在Hybrid App技术发展的早期，Web的运 行性能成为主要瓶颈！！！
iPhone3G（CPU：620MHZ， RAM：256MB）
Web成为Hybrid App的首选技术
技术简单、支持广泛、开发者众多、更擅长“炫”的页面
Hybrid App = Web + Native
但是在Hybrid App技术发展的早期，Web的运 行性能成为主要瓶颈！！！
iPhone3G（CPU：620MHZ， RAM：256MB）
第7页
为解决性能问题Hybrid App走向“重混”
重混
重混
第8页
“重混”的优缺点
优点：
– 提升了运行性能 – 增强了交互体验
缺点：
– Web和Native技术交叉混杂 – 需要同时掌握Web和Native技术，学习难度增加 – 一个页面有Web组件也有Native组件，编程调试困难
优点：
– 提升了运行性能 – 增强了交互体验
缺点：
– Web和Native技术交叉混杂 – 需要同时掌握Web和Native技术，学习难度增加 – 一个页面有Web组件也有Native组件，编程调试困难
第9页
随着时代的发展，性能不再是瓶颈
H5已经可以支持复杂应用，并拥有良好的运行性能
移动设备 硬件能力
大幅提升
无线网络技术
浏览器技术
H5已经可以支持复杂应用，并拥有良好的运行性能
移动设备 硬件能力
大幅提升
无线网络技术
浏览器技术
第10页
又一个伟大的公司重新定义了移动应用
2011年1月，腾讯推出了微信；2012年8月，微信公众平台上线。
“重混”框架废了
2011年1月，腾讯推出了微信；2012年8月，微信公众平台上线。
“重混”框架废了
第11页
“轻混”成为Hybrid App的必然选择
界面交互 设备接口
界面交互 设备接口
第12页
构建高性能H5 App跨端框架
第13页
H5 App框架结构
H5 App简单理解就是以网页技术为主来实现的移动应用。 H5 App由网页和外壳两部分组成。网页主要负责界面的显示和交互；而外壳会内置 一个浏览器来提供网页的运行环境，并且会通过插件为网页提供扩展的原生调用能 力。
设备信息 通讯录
外壳
浏览器+插件
语音 拍照 地理位置 网络 支付 分享
网页
HTML5 JavaScript
CSS3
微信应用的本质也是H5 App，微信作为App外 壳来提供网页的运行环 境，微信同样为网页提 供了大量的JS插件接口。
H5 App简单理解就是以网页技术为主来实现的移动应用。 H5 App由网页和外壳两部分组成。网页主要负责界面的显示和交互；而外壳会内置 一个浏览器来提供网页的运行环境，并且会通过插件为网页提供扩展的原生调用能 力。
设备信息 通讯录
外壳
浏览器+插件
语音 拍照 地理位置 网络 支付 分享
网页
HTML5 JavaScript
CSS3
微信应用的本质也是H5 App，微信作为App外 壳来提供网页的运行环 境，微信同样为网页提 供了大量的JS插件接口。
第14页
Native框架的选择
ü 业界最主流的开源移动跨端框架 ü HTML + CSS + JS + 原生插件 ü 开放式的原生插件框架 ü “干净”的轻混合跨端框架
ü 业界最主流的开源移动跨端框架 ü HTML + CSS + JS + 原生插件 ü 开放式的原生插件框架 ü “干净”的轻混合跨端框架
第15页
H5页面框架的选择
多页应用模式MPA（Multi Page Application）
http://xxx/page1.w 页面资源
公用资源（JS、CSS等）
http://xxx/page2.w
URL 跳转
页面资源
整页 公用资源（JS、CSS等）
刷新
单页应用模式SPA（Single Page Application）
http://xxx/shell.w（外壳页面）
http://xxx/shell.w #page1.html 页面资源
AJAX DHTML
局部 刷新
http://xxx/shell.w #page2.html 页面资源
公用资源（JS、CSS等）
多页应用模式MPA（Multi Page Application）
http://xxx/page1.w 页面资源
公用资源（JS、CSS等）
http://xxx/page2.w
URL 跳转
页面资源
整页 公用资源（JS、CSS等）
刷新
单页应用模式SPA（Single Page Application）
http://xxx/shell.w（外壳页面）
http://xxx/shell.w #page1.html 页面资源
AJAX DHTML
局部 刷新
http://xxx/shell.w #page2.html 页面资源
公用资源（JS、CSS等）
第16页
单页应用的核心问题：页面隔离
外壳页面
元素ID隔离
设计时用属性xid替代id，运行时动态生成id。 生成规则：xid + 页面实例标识 = id 访问方法：this.getElementByXid(xid)、this.comp(xid)
元元元素元素元素I素DI素DIDI冲D冲ID冲突冲突冲突突突 样样样式样式样式定式定式定义定义定义冲义冲义冲突冲突冲突突突
CSS样式隔离
每个页面都有一个同名的css样式文件，只作用于当前页面。 技术实现：编译时为页面文件中每个元素的class属性和样式文 件中的样式选择器都添加一个“页面标识”，使局部样式文件 中定义的样式只能作用于class包含“页面标识”的HTML元素。
变变变量变量变量函量函量函数函数函数冲数冲数冲突冲突冲突突突
Javascript隔离
RequireJS
外壳页面
元素ID隔离
设计时用属性xid替代id，运行时动态生成id。 生成规则：xid + 页面实例标识 = id 访问方法：this.getElementByXid(xid)、this.comp(xid)
元元元素元素元素I素DI素DIDI冲D冲ID冲突冲突冲突突突 样样样式样式样式定式定式定义定义定义冲义冲义冲突冲突冲突突突
CSS样式隔离
每个页面都有一个同名的css样式文件，只作用于当前页面。 技术实现：编译时为页面文件中每个元素的class属性和样式文 件中的样式选择器都添加一个“页面标识”，使局部样式文件 中定义的样式只能作用于class包含“页面标识”的HTML元素。
变变变量变量变量函量函量函数函数函数冲数冲数冲突冲突冲突突突
Javascript隔离
RequireJS
第17页
RequireJS
• 模块隔离
– define定义模块
test.js
define([], function() { return { hello: function() { alert("Hello World！"); } }
});
– require加载模块
require(['test'], function(test) { test.hello();
});
• 资源按需动态加载
– Javascript、CSS、TXT
• 模块隔离
– define定义模块
test.js
define([], function() { return { hello: function() { alert("Hello World！"); } }
});
– require加载模块
require(['test'], function(test) { test.hello();
});
• 资源按需动态加载
– Javascript、CSS、TXT
第18页
页面管理
• 外壳Shell——负责管理所有的页面
– justep.Shell.loadPage(url, params) – justep.Shell.showPage(url, params) – justep.Shell.closePage()
• 卸载页面防止内存泄漏
– 卸载HTML片段 – 释放组件对象
• 路由管理
– 支持前进、后退 – 基于HTML5 History API实现 – http://xxx/shell.w#page1.html
• 外壳Shell——负责管理所有的页面
– justep.Shell.loadPage(url, params) – justep.Shell.showPage(url, params) – justep.Shell.closePage()
• 卸载页面防止内存泄漏
– 卸载HTML片段 – 释放组件对象
• 路由管理
– 支持前进、后退 – 基于HTML5 History API实现 – http://xxx/shell.w#page1.html
第19页
WeX5整体技术架构
移动App（安卓、苹果） 、微信App、网页App
客户端
XPage（页面框架）
XComponents（组件框架）
XData（数据绑定）
jQuery
RequireJS
Bootstrap （统一样式库）
Native API （统一原生API）
HTML5
CSS3
Javascript
Cordova （安卓、苹果…）
WeChat （微信）
服务端
JSON
AJAX WebSocket
socket.io
XBaaS（后端服务）
数据服务
支付 地图 ……
JAVA PHP
.NET Node.js
第三方服务
移动设备
移动App（安卓、苹果） 、微信App、网页App
客户端
XPage（页面框架）
XComponents（组件框架）
XData（数据绑定）
jQuery
RequireJS
Bootstrap （统一样式库）
Native API （统一原生API）
HTML5
CSS3
Javascript
Cordova （安卓、苹果…）
WeChat （微信）
服务端
JSON
AJAX WebSocket
socket.io
XBaaS（后端服务）
数据服务
支付 地图 ……
JAVA PHP
.NET Node.js
第三方服务
移动设备
第20页
WeX5可视化快速开发实践
第21页
WeX5是基于HTML5的开源跨端可视化快 速开发工具
上百个页面组件 可视化页面设计 模板化快速开发 编码、调试、发布 一体化集成开发环境 无需原生开发经验
Android App IOS App WeChat(微信) App
时尚的扁平化样式风格 响应式布局自适应分辨率 内置触摸滑动等手势操作 页面极速加载操作流畅 媲美原生的交互体验 完整原生设备能力支持 支付、地图、分享、消息…
永久免费 运行框架全部开源 Apache开源协议商业友好
上百个页面组件 可视化页面设计 模板化快速开发 编码、调试、发布 一体化集成开发环境 无需原生开发经验
Android App IOS App WeChat(微信) App
时尚的扁平化样式风格 响应式布局自适应分辨率 内置触摸滑动等手势操作 页面极速加载操作流畅 媲美原生的交互体验 完整原生设备能力支持 支付、地图、分享、消息…
永久免费 运行框架全部开源 Apache开源协议商业友好
第22页
完全可视化设计
所见即所得，拖拽式页面设计，简单易学
所见即所得，拖拽式页面设计，简单易学
第23页
轻松设计复杂页面
上百个页面组件，各种布局任意组合
上百个页面组件，各种布局任意组合
第24页
强大的组件封装
拖拽组件、设置属性即可完成复杂技术能力
拖拽组件、设置属性即可完成复杂技术能力
第25页
开放式组件框架
所有组件全部开源，开放式框架，可自定义扩展组件
所有组件全部开源，开放式框架，可自定义扩展组件
第26页
应用模板向导快速生成
内置丰富的可扩展应用模板，常见功能快速向导生成
内置丰富的可扩展应用模板，常见功能快速向导生成
第27页
极客编程
智能提示、代码模板、支持Emmet极客编程
智能提示、代码模板、支持Emmet极客编程
第28页
调试无死角
模拟调试、真机调试，全部开源，调试无死角
模拟调试、真机调试，全部开源，调试无死角
第29页
向导式快捷打包发布
发布向导，一键打包，无需任何原生编程经验
发布向导，一键打包，无需任何原生编程经验
第30页
时尚的显示风格
扁平化风格，自定制皮肤，满足个性化需求
扁平化风格，自定制皮肤，满足个性化需求
第31页
响应式布局
页面自动适应设备分辨率，不需要开发者特殊处理
页面自动适应设备分辨率，不需要开发者特殊处理
第32页
扫码体验
Q&A
Q&A