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

Geek Zoo Studio @ GMTC 2016, Beijing

@老郭为人民服务 | https://github.com/gavinkwoe

来自 Geek-Zoo Studio，BeeFramework & Samurai-Native 作者. A coder, a geek, a ghost of samurai in human shell.

• 历史回顾 • Demo • 架构设计 • 实现细节 • QA



议程

历史回顾

1994

Web 出现

- 21年前 - Netscape navigator 浏览器发布 - 使用 HTML+CSS 编写网页

2008

Native App 出现

- 8年前 - Apple iOS 发布 - 使用 OC 开发原生App

2011

Hybrid App 出现

- 5年前 - Adobe PhoneGap 发布 - 使用 HTML+CSS 开发App

2015

Semi-Hybrid App 出现

- 1年前 - Facebook React-Native 发布 - 使用 Reactjs 开发原生App

2015-2016

更多垂直框架出现

- 最近几个月 - WEEX 发布 - JSPatch 发布

技术在不断新陈代谢，Hybrid模式更适合移动场景



Web

Semi Hybrid



性能需求 用户体验 开发体验 动态性需求 设备能力需求



Native Hybrid

最近一年技术栈也已经发生变化，新的技术涌现



动态视图 动态逻辑 动态补丁



Lua



JSPatch JSPatch



JSPatch JSPatch



通过分析软件包资源

为什么 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

从近年技术发展看，WebKit 正在被重新发明



App View JSPatch Business JSPatch Foundation

Hybrid app



Browser



WebCore

v.s.

JSCore



Platform API



Foundation



Web app

通过不同垂直场景的解决方案，解决不同角度问题



App 全站动态化



View 界面动态化



JSPatch Business



运行时补丁



JSPatch Foundation



运行时补丁



第三方软件正在解决实际需求

Bring web standards to native platform

Demo

• 通过 JS/HTML/CSS 编写iOS App • 生成纯原生 UI 界面 • 可通过第三方扩展

• SDWebImage • MBProgressHUD • AFNetworking

HTML + Native Component CSS + Property Mapping



Include file & Require class Define Native Class

OC > JS Callback

Using Obj-C Syntax JS > OC Invocation

JS Logic



HTML Layout

Native Ability



CSS Style

UIML

Style Sheet



UIView



Script



Transformer



JSRuntime



JSEngine

Native Runtime

架构概览



CocoaScript Support



CocoaKit / App



High level framework



JS / HTML / CSS



JSCore



WebCore



DOM / Style / Render



Device / System



Framework



Network / Event



iOS

WebCore 实现

WebCore 作用



<UIImageView/>

UIImageView { width: 100%; color: red;

}

DSL Code



UIView Tree

Native UI

Render workflow Layout algorithm



WebCore 架构



HTML UserAgent

HTML Doc



Template



HTML Render



HTML Layout



HTML DOM



HTML Element



CSS Resolver



CSS Value



CSS StyleSheet



gumbo parser



katana parser



Document workflow UserAgent Config

HTML CSS



WebCore 工作流



Parse DOM



Parse CSS



Compute Style



Build RenderTre

e



DONE



Apply Frame



Compute Frame



Layout RenderTre

e



Relayout

Stylesheets

stylesheet 1 stylesheet 2 stylesheet 3



WebCore 树结构



Dom tree



Render tree



html Render



View tree

UIScrollView



head



body



aa



Render



Render



Render



UIView UIView



h1 h1 “hello”



Render Text



UILabel

UIView2

subview

UIView3

subview



Style Restyle



1:1 Relayout



Reload



UIView1

1:1



Render Object



1:1



1:1



Layout



UIView Controlle

r

1:1



DOM



n:1



Docume nt



1:1

Template

布局算法 (1)

• display: inline/block/flex/table • Inline layout • Block layout • Flex layout • Table layout

Begin layout

Finish layout



布局算法 (2)



Compute Element

Lines

Compute Content

Size



Compute Element Frame

Positioning



Render





Render





1 Render



Render 3



Render Text

用户代理

• UserAgent Setting • 默认 font / color / metrics

• UserAgent StyleSheet • 默认样式及元素与组件关系 • samurai-html-hierarchy.css • samurai-html-useragent.css

对原生组件支持



<UIActivityIndicatorView/>



<UITextField/>



<UIScrollView/>



<UIButton/>



<UITextView/>



<UIProgressView/>



<UIImageView/>



<UISlider/>



<UISlider/>



<UIPageControl/>



<UISwitch/>



<UIStepper/>



<UILabel/>



<UIView/>



<UIWebView/>



Support all of UIKit components



<UITableView/> <UITableViewCell/> <UICollectionView/> <UICollectionViewCell/>

…

对原生组件扩展

• <UIButton/> • 两步搞定

• html_applyDom: • 解析DOM数据

• html_applyRender: • 应用计算好的样式

JSCore 实现

JSCore 作用

JS Runtime



Call OC from JS



JS Context



Bridging



OC Runtime



Call JS from OC



将底层Runtime所有能力导出给JS Context

Vendor Library



JSCore 架构



Boxing / Unboxing / Invocation



Bridging / Callback Support Code



JSRuntime



JS Struct Encoder



JS Struct Decoder



JavaScriptCore



JSPlugin

• Native 部分 • 获取类 • 创建类 • 调用方法 • 读写属性 • 读写变量 • 加载文件



JSCore 实现



• Runtime 部分 • 方法Hook • 方法重定向 • 对象类型转换 • 返回值处理 • Block支持 • Context



• JS 部分 • BoxedObject • BoxedClass • 打包/解包对象 • 分发/处理回调 • 引用原生类 • 引用文件

对象传递 Boxing/Unboxing



Obj-C Object

Obj-C Object



__boxObject __unboxObject



JS Object

JS Object



Different from JSPatch, boxing/unboxing in JS side

对象打包 Boxing



Obj-C Object

NSObject



{ ‘__obj__’ : <obj>, ‘__cls__’ : ‘NSObject’

}

{ ‘__func__’ : <func>, ‘__args__’ : []

}

{ ‘__nil__’ : ‘__nil__’

}



JS Object

BoxedObject BoxedClass

对象解包 Unboxing



Obj-C Object

NSObject



{ ‘__obj__’ : <obj>, ‘__cls__’ : ‘NSObject’

}

{ ‘__func__’ : <func>, ‘__args__’ : []

}

{ ‘__nil__’ : ‘__nil__’

}



JS Object

BoxedObject BoxedClass

BoxedObject BoxedClass

JS Object



从 JS 到 OC 调用 (1)



.invoke( ‘alloc’, [] )



BoxedObject.prototype.invoke = function() { __OC__invokeMethod()

}



[alloc]



OC Object __OC__invokeMethod

NSObject



JSContext

从 JS 到 OC 调用 (2)

从 OC 到 JS 调用 (1)

NSObject



OC Object



__JS__forwardInvocation:



JSContext



global.runtimeClassCallback



function.apply( self, … )



Find class info & method function

从 OC 到 JS 调用 (2)

JSContext 实现

• Get/Create Class • Invoke Method • Get/Set Property • Get/Set Variable • (在OC中，Class也是Object）

JSRuntime 实现

• BoxedObject • BoxedClass • __boxObject( any ) • __unboxObject( any ) • global.runtimeClassCallback • global.runtimeFunctionCallback

从JS中创建OC类

• OC • __OC__createClass

• JS • BoxedClass

CocoaKit

CocoaKit 作用

App Bundle (/www) CocoaScript

UIComponents

提供高阶的App Bundle支持，及CocoaScript编程语言支持

CocoaKit

• CocoaScript Transformer • 运行时将 Obj-C 代码转换为 可运行的JS 代码 • Sketch插件官方御用语言 • 原作者是 ccgus（FMDB），对原版进行升级改造

• 支持数据绑定 • 支持更多UIKit组件

CocoaScript Transformer (1)



Cocoa Script



Tokenizer



Symbol Tree



Transform



ES5 Code



[obj doSth:arg]



obj.invoke(‘doSth’, [arg])

CocoaScript Transformer (2)

• Transform 规则 • [a b] -> a.invoke( ‘b’ ) • [a b:c] -> a.invoke( ‘b:’, c ) • a[i] -> a[i]

• [[a.b.c() d:[e f] g:h i:j.k().l([m.n().o p])] q:([r.s]) t:u[1] v:w(1+2)] • TODParseKit

App Bundle (1)



• \www



• __init__.js main entry



• \css



style files here



• \html template files here



• \js javascript files here

App Bundle (2)



Native Runtime



App Start up



Initialize WebCore



Initialize JSCore



__init__.js



User Interaction



Define ViewControl

ler



Define AppDelegate



main()



JS Runtime

App Bundle (2)

数据绑定

[view cocoa_setData:{model: value}];

事件转发、处理

Signal handling (1)

@ {ClassName} . {EventName}

Signal handling (2)



JSCore



Render



Render



Render



Render



UIView

Signal handling (3)



JSCore



Render



Render



Render



Render



UIView

Liveload

Samurai-Native 0.2

Open source timeline

• 0.1）Apr, 2015 • First commit, Open source on github.com • https://github.com/hackers-painters/samurai-native

• 0.1）Jul, 2015 (Internal) • ACID1 pass • ACID2 50%

• 0.2）Aug, 2016 (External) • Open Source

Thanks

Geek Zoo Studio @ GMTC 2016, Beijing

Be Hungry, Be Foolish

Geek Zoo Studio @ GMTC 2016, Beijing