Samurai-Native架构设计与项目构建.pptx

Samurai-Native架构设计与项目构建 议程 • • • • • 历史回顾 Demo 架构设计 实现细节 QA 历史回顾 1994 - 21年前 - Netscape navigator 浏览器发布 - 使用 HTML+CSS 编写网页 Web 出现 - 8年前 - Apple iOS 发布 - 使用 OC 开发原生App 2008 Native App 出现 - 5年前 - Adobe PhoneGap 发布 - 使用 HTML+CSS 开发App 2011 Hybrid App 出现 2015 - 1年前 - Facebook React-Native 发布 - 使用 Reactjs 开发原生App Semi-Hybrid App 出现 2015-2016 更多垂直框架出现 - 最近几个月 - WEEX 发布 - JSPatch 发布 Native Hybrid Web Semi Hybrid 性能需求 用户体验 开发体验 动态性需求 设备能力需求 技术在不断新陈代谢，Hybrid模式更适合移动场景 JSPatch JSPatch JSPatch JSPatch Lua 动态视图 动态逻辑 动态补丁 最近一年技术栈也已经发生变化，新的技术涌现 通过分析软件包资源 为什么 WebKit 不好满足这些技术需求？ Painter做为渲染后端，无法直接还原用户体验 对开发者完全黑盒，缺失设备/运行时调用能力 历史包袱过多，W3C规范定制过慢，落后于实际需求 CSS 1.0 CSS 2.0 CSS 3.0 HTML 2.0 HTML 3.2 HTML 4.0 HTML 5.0 XHTML URL / URI Protocols Networks Graphics Audio / Video Math Mobile Web View Business App JSPatch WebCore JSCore Browser v.s. Platform API JSPatch Foundation Hybrid app Foundation Web app 从近年技术发展看，WebKit 正在被重新发明 View Business App JSPatch JSPatch Foundation 全站动态化 界面动态化 运行时补丁 运行时补丁 第三方软件正在解决实际需求 通过不同垂直场景的解决方案，解决不同角度问题 Bring web standards to native platform • • • Demo 通过 JS/HTML/CSS 编写iOS App 生成纯原生 UI 界面 可通过第三方扩展 • • • SDWebImage MBProgressHUD AFNetworking HTML + Native Component CSS + Property Mapping Using Obj-C Syntax JS OC Invocation Define Native Class OC JS Callback Include file Require class HTML Layout CSS Style JS Logic Native Ability UIView UIML Style Sheet Script Transformer JSRuntime JSEngine Native Runtime 架构概览 CocoaKit / App JSCore WebCore Framework iOS JS / HTML / CSS DOM / Style / Render CocoaScript Support High level framework Network / Event Device / System WebCore 实现 WebCore 作用 UIImageView/ UIImageView { width: 100%; color: red; } DSL Code UIView Tree Native UI CSS StyleSheet CSS Resolver CSS Value katana parser gumbo parser HTML UserAgent HTML Doc HTML Layout HTML Element HTML Render HTML DOM Render workflow Layout algorithm UserAgent Config Document workflow WebCore 架构 Template