AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

Samurai-Native架构设计与项目构建 by Geek Zoo Studio

发布者 mobile
发布于 1467679461404  浏览 1995 关键词 架构, 移动开发 
分享到

第1页

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

Geek Zoo Studio @ GMTC 2016, Beijing



第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 View JSPatch Business JSPatch Foundation

Hybrid app



Browser



WebCore

v.s.

JSCore



Platform API



Foundation



Web app



第18页

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



App 全站动态化



View 界面动态化



JSPatch Business



运行时补丁



JSPatch Foundation



运行时补丁



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



第19页

Bring web standards to native platform



第20页

Demo

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

• SDWebImage • MBProgressHUD • AFNetworking



第21页

HTML + Native Component CSS + Property Mapping



Include file & Require class Define Native Class

OC > JS Callback

Using Obj-C Syntax JS > OC Invocation



第22页

JS Logic



HTML Layout

Native Ability



CSS Style



第23页

UIML

Style Sheet



UIView



Script



Transformer



JSRuntime



JSEngine

Native Runtime



第24页

架构概览



CocoaScript Support



CocoaKit / App



High level framework



JS / HTML / CSS



JSCore



WebCore



DOM / Style / Render



Device / System



Framework



Network / Event



iOS



第25页

WebCore 实现



第26页

WebCore 作用



<UIImageView/>

UIImageView { width: 100%; color: red;

}

DSL Code



UIView Tree

Native UI



第27页

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



第28页

HTML CSS



WebCore 工作流



Parse DOM



Parse CSS



Compute Style



Build RenderTre

e



DONE



Apply Frame



Compute Frame



Layout RenderTre

e



Relayout



第29页

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



第30页

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



第31页

布局算法 (1)

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



第32页

Begin layout

Finish layout



布局算法 (2)



Compute Element

Lines

Compute Content

Size



Compute Element Frame

Positioning



Render





Render





1 Render



Render 3



Render Text





第33页

用户代理

• UserAgent Setting • 默认 font / color / metrics

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



第34页

对原生组件支持



<UIActivityIndicatorView/>



<UITextField/>



<UIScrollView/>



<UIButton/>



<UITextView/>



<UIProgressView/>



<UIImageView/>



<UISlider/>



<UISlider/>



<UIPageControl/>



<UISwitch/>



<UIStepper/>



<UILabel/>



<UIView/>



<UIWebView/>



Support all of UIKit components



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





第35页

对原生组件扩展

• <UIButton/> • 两步搞定

• 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页

Vendor Library



JSCore 架构



Boxing / Unboxing / Invocation



Bridging / Callback Support Code



JSRuntime



JS Struct Encoder



JS Struct Decoder



JavaScriptCore



JSPlugin



第39页

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



JSCore 实现



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



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



第40页

对象传递 Boxing/Unboxing



Obj-C Object

Obj-C Object



__boxObject __unboxObject



JS Object

JS Object



Different from JSPatch, boxing/unboxing in JS side



第41页

对象打包 Boxing



Obj-C Object

NSObject



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

}

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

}

{ ‘__nil__’ : ‘__nil__’

}



JS Object

BoxedObject BoxedClass



第42页

对象解包 Unboxing



Obj-C Object

NSObject



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

}

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

}

{ ‘__nil__’ : ‘__nil__’

}



JS Object

BoxedObject BoxedClass



第43页

BoxedObject BoxedClass

JS Object



从 JS 到 OC 调用 (1)



.invoke( ‘alloc’, [] )



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

}



[alloc]



OC Object __OC__invokeMethod

NSObject



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



Symbol Tree



Transform



ES5 Code



[obj doSth:arg]



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



第54页

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



第55页

App Bundle (1)



• \www



• __init__.js main entry



• \css



style files here



• \html template files here



• \js javascript files here



第56页

App Bundle (2)



Native Runtime



App Start up



Initialize WebCore



Initialize JSCore



__init__.js



User Interaction



Define ViewControl

ler



Define AppDelegate



main()



JS Runtime



第57页

App Bundle (2)



第58页

数据绑定

[view cocoa_setData:{model: value}];



第59页

事件转发、处理



第60页

Signal handling (1)

@ {ClassName} . {EventName}



第61页

Signal handling (2)



JSCore



Render



Render



Render



Render



UIView



第62页

Signal handling (3)



JSCore



Render



Render



Render



Render



UIView



第63页

Liveload



第65页

Samurai-Native 0.2



第66页

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



第67页

Thanks

Geek Zoo Studio @ GMTC 2016, Beijing



第68页

Be Hungry, Be Foolish

Geek Zoo Studio @ GMTC 2016, Beijing



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。