Samurai Native架构设计与项目构建 郭虹宇 2016 06 25

2020-03-01 190浏览

  • 1.Samurai-Native架构设计与项目构建 Geek Zoo Studio @ GMTC 2016, Beijing
  • 2.
  • 3.@老郭为人民服务https://github.com/gavinkwoe来自 Geek-Zoo Studio，BeeFramework & Samurai-Native 作者. A coder, a geek, a ghost of samurai in human shell.
  • 4.议程 • 历史回顾 • Demo • 架构设计 • 实现细节 • QA
  • 5.历史回顾
  • 6.1994 Web 出现 - 21年前 - Netscape navigator 浏览器发布 - 使用 HTML+CSS 编写网页
  • 7.2008 Native App 出现 - 8年前 - Apple iOS 发布 - 使用 OC 开发原生App
  • 8.2011 Hybrid App 出现 - 5年前 - Adobe PhoneGap 发布 - 使用 HTML+CSS 开发App
  • 9.2015 Semi-Hybrid App 出现 - 1年前 - Facebook React-Native 发布 - 使用 Reactjs 开发原生App
  • 10.2015-2016 更多垂直框架出现 - 最近几个月 - WEEX 发布 - JSPatch 发布
  • 11.技术在不断新陈代谢，Hybrid模式更适合移动场景 Web Semi Hybrid 性能需求 用户体验 开发体验 动态性需求 设备能力需求 Native Hybrid
  • 12.最近一年技术栈也已经发生变化，新的技术涌现 动态视图 Lua 动态逻辑 动态补丁 JSPatch JSPatch JSPatch 通过分析软件包资源 JSPatch
  • 13.为什么 WebKit 不好满足这些技术需求？
  • 14.Painter做为渲染后端，无法直接还原用户体验
  • 15.对开发者完全黑盒，缺失设备/运行时调用能力
  • 16.历史包袱过多，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
  • 17.从近年技术发展看，WebKit 正在被重新发明 App Browser View WebCore v.s. JSPatch Business JSPatch Foundation Hybrid app JSCore Platform Foundation API Web app
  • 18.通过不同垂直场景的解决方案，解决不同角度问题 JSPatch App 全站动态化 View 界面动态化 Business 运行时补丁 JSPatch Foundation 运行时补丁 第三方软件正在解决实际需求
  • 19.Bring web standards to native platform
  • 20.Demo • 通过 JS/HTML/CSS 编写iOS App • 生成纯原生 UI 界面 • 可通过第三方扩展 • SDWebImage • MBProgressHUD • AFNetworking
  • 21.Include file & Require class Define Native Class HTML + Native Component CSS + Property Mapping OC > JS Callback Using Obj-C Syntax JS > OC Invocation
  • 22.HTML Layout JS Logic CSS Style Native Ability
  • 23.UIML UIView Style Sheet Script Transformer JSRuntime JSEngine Native Runtime
  • 24.架构概览 CocoaScript Support JS / HTML / CSS Device / System CocoaKit / App JSCore WebCore Framework iOS High level framework DOM / Style / Render Network / Event
  • 25.WebCore 实现
  • 26.WebCore 作用UIImageView {width:100%;color:red; } DSL Code UIView Tree Native UI
  • 27.WebCore 架构 Template Render workflow Layout algorithm HTML UserAgent HTML Render HTML Layout HTML Doc HTML DOM HTML Element CSS Resolver CSS Value CSS StyleSheet gumbo parser katana parser Document workflow UserAgent Config
  • 28.WebCore 工作流 HTML CSS DONE Parse DOM Apply Frame Parse CSS Compute Style Build RenderTre e Compute Frame Layout RenderTre e Relayout
  • 29.WebCore 树结构 Stylesheets Dom tree Render tree View tree stylesheet 1 html Render UIScrollView Render UIView stylesheet 2 head body stylesheet 3 a a h1 h1 “hello” Render Render UIView Render Text UILabel
  • 30.Style Restyle UIView2 1:1 Relayout Reload Layout UIView Controlle r subview UIView1 1:1 Render Object 1:1 1:1 1:1 UIView3n:1DOM subview Docume nt 1:1 Template
  • 31.布局算法 (1) •display:inline/block/flex/table • Inline layout • Block layout • Flex layout • Table layout
  • 32.布局算法 (2) Begin layout Compute Element Lines Compute Element Frame 1 Finish layout Compute Content Size Positioning Render Render 5 Render 4 Render 3 Render Text 2
  • 33.用户代理 • UserAgent Setting • • 默认 font / color / metrics UserAgent StyleSheet • 默认样式及元素与组件关系 • samurai-html-hierarchy.css • samurai-html-useragent.css
  • 34.对原生组件支持… Support all of UIKit components
  • 35.对原生组件扩展 •• 两步搞定 • html_applyDom:• • 解析DOM数据 html_applyRender:• 应用计算好的样式
  • 36.JSCore 实现
  • 37.JSCore 作用 JS Runtime Call OC from JS JS Context Bridging OC Runtime Call JS from OC 将底层Runtime所有能力导出给JS Context
  • 38.JSCore 架构 Boxing / Unboxing / Invocation Bridging / Callback Support Code Vendor Library JSRuntime JS Struct Encoder JS Struct Decoder JavaScriptCore JSPlugin
  • 39.JSCore 实现 • Native 部分 • Runtime 部分 • JS 部分 • 获取类 • 方法Hook • BoxedObject • 创建类 • 方法重定向 • BoxedClass • 调用方法 • 对象类型转换 • 打包/解包对象 • 读写属性 • 返回值处理 • 分发/处理回调 • 读写变量 • Block支持 • 引用原生类 • 加载文件 • Context • 引用文件
  • 40.对象传递 Boxing/Unboxing Obj-C Object Obj-C Object __boxObject JS Object __unboxObject JS Object Different from JSPatch, boxing/unboxing in JS side
  • 41.对象打包 Boxing { ‘__obj__’ :, ‘__cls__’ : ‘NSObject’ } { Obj-C Object NSObject ‘__func__’ :, ‘__args__’ : [] } { ‘__nil__’ : ‘__nil__’ } JS Object BoxedObject BoxedClass
  • 42.对象解包 Unboxing { ‘__obj__’ :, ‘__cls__’ : ‘NSObject’ } { Obj-C Object NSObject ‘__func__’ :, ‘__args__’ : [] } { ‘__nil__’ : ‘__nil__’ } JS Object BoxedObject BoxedClass
  • 43.从 JS 到 OC 调用 (1) BoxedObject BoxedClass .invoke( ‘alloc’, [] ) JS Object [alloc] OC Object NSObject BoxedObject.prototype.invoke = function() { __OC__invokeMethod() } __OC__invokeMethod JSContext
  • 44.从 JS 到 OC 调用 (2)
  • 45.从 OC 到 JS 调用 (1) NSObject OC Object __JS__forwardInvocation:JSContext global.runtimeClassCallback function.apply( self, … ) Find class info & method function
  • 46.从 OC 到 JS 调用 (2)
  • 47.JSContext 实现 • Get/Create Class • Invoke Method • Get/Set Property • Get/Set Variable • (在OC中，Class也是Object）
  • 48.JSRuntime 实现 • BoxedObject • BoxedClass • __boxObject( any ) • __unboxObject( any ) • global.runtimeClassCallback • global.runtimeFunctionCallback
  • 49.从JS中创建OC类 • OC • • __OC__createClass JS • BoxedClass
  • 50.CocoaKit
  • 51.CocoaKit 作用 App Bundle (/www) CocoaScript UIComponents 提供高阶的App Bundle支持，及CocoaScript编程语言支持
  • 52.CocoaKit • CocoaScript Transformer • 运行时将 Obj-C 代码转换为 可运行的JS 代码 • Sketch插件官方御用语言 • 原作者是 ccgus（FMDB），对原版进行升级改造 • 支持数据绑定 • 支持更多UIKit组件
  • 53.CocoaScript Transformer (1) Cocoa Script Tokenizer [objdoSth:arg]Symbol Tree Transform ES5 Code obj.invoke(‘doSth’, [arg])
  • 54.CocoaScript Transformer (2) • • Transform 规则 • [a b] -> a.invoke( ‘b’ ) • [ab:c]'>b:c]