Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The new WebKit is AWESOME
Search
Cesare Rocchi
November 24, 2014
Programming
0
500
The new WebKit is AWESOME
My presentation on the new WebKit APIs introduced in iOS8.
@Cocoaconf Boston 2014
Cesare Rocchi
November 24, 2014
Tweet
Share
More Decks by Cesare Rocchi
See All by Cesare Rocchi
In the customer's shoes
funkyboy
0
130
What the heck is JavaScriptCore?
funkyboy
0
140
The new WebKit is awesome
funkyboy
1
370
Designing with Cognitive Science in Mind
funkyboy
0
150
The new WebKit is AWESOME
funkyboy
0
180
Choosing a back end for your mobile app:
funkyboy
0
640
Apps and Mental Models
funkyboy
0
220
Auto Layout? Oh boy!
funkyboy
1
240
Auto Layout? Oh boy!
funkyboy
0
140
Other Decks in Programming
See All in Programming
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
220
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
210
Build your own WebP codec in Swift
kishikawakatsumi
2
840
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
300
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
190
Reactをクライアントで使わない
yusukebe
7
6.3k
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.8k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
880
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
650
dynamic!
moro
9
4.5k
CSC509 Lecture 03
javiergs
PRO
0
320
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
840
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Writing Fast Ruby
sferik
629
62k
What's in a price? How to price your products and services
michaelherold
246
12k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Transcript
The new Webkit is AWESOME Cesare Rocchi @_funkyboy
TOC • History • What’s new • Demo
Who am I?
UX designer and developer
studiomagnolia.com
baasbox.com
upbeat.it
@_funkyboy
Who are you?
History
The full Safari engine is inside of iPhone. And so,
you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. SJ, 2007 “ ”
History • No plugins • Flash • Applets
None
Adobe, don’t even think about it!
None
None
History • Nitro was introduced in iOS 4.3 • Uses
JIT • Transform JS into native code Needs to mark memory w+x • Security issues
None
var temp = {}; temp[10123] = "cocoaconf";
Progress
iOS 3.2 -> iOS4 https://developer.apple.com/LIBRARY/ios/releasenotes/General/iPhone40APIDiffs/index.html Added UIWebView.allowsInlineMediaPlayback Added UIWebView.mediaPlaybackRequiresUserAction
iOS 4.3 -> iOS5 https://developer.apple.com/LIBRARY/ios/releasenotes/General/iOS50APIDiff/index.html Added UIWebView.mediaPlaybackAllowsAirPlay Added UIWebView.scrollView
iOS 5.1 -> iOS6 https://developer.apple.com/LIBRARY/ios/releasenotes/General/iOS60APIDiffs/index.html Added UIWebView.keyboardDisplayRequiresUserAction! Added UIWebView.suppressesIncrementalRendering
iOS 6.1 -> iOS7 https://developer.apple.com/library/IOS/releasenotes/General/iOS70APIDiffs/index.html Added UIWebView.gapBetweenPages Added UIWebView.pageCount Added
UIWebView.pageLength Added UIWebView.paginationBreakingMode Added UIWebView.paginationMode Added UIWebPaginationBreakingMode Added UIWebPaginationBreakingModeColumn Added UIWebPaginationBreakingModePage Added UIWebPaginationMode Added UIWebPaginationModeBottomToTop Added UIWebPaginationModeLeftToRight Added UIWebPaginationModeRightToLeft Added UIWebPaginationModeTopToBottom Added UIWebPaginationModeUnpaginated
iOS 6.1 -> iOS7 https://developer.apple.com/library/IOS/releasenotes/General/iOS70APIDiffs/index.html Added #def JSC_OBJC_API_ENABLED Added JSCheckScriptSyntax()
Added JSClassRef Added JSContextGroupRef Added JSContextRef Added JSEvaluateScript() Added JSGarbageCollect() Added JSGlobalContextRef Added JSObjectRef Added JSPropertyNameAccumulatorRef Added JSPropertyNameArrayRef Added JSStringRef Added JSValueRef Added #def WTF_EXPORT_PRIVATE Added #def WTF_PLATFORM_IOS Added JSContext Added -[JSContext JSGlobalContextRef] Added +[JSContext contextWithJSGlobalContextRef:] Added +[JSContext currentArguments] Added +[JSContext currentContext] Added +[JSContext currentThis] Added -[JSContext evaluateScript:] Added JSContext.exception Added JSContext.exceptionHandler Added -[JSContext globalObject] Added -[JSContext init] Added -[JSContext initWithVirtualMachine:] Added -[JSContext objectForKeyedSubscript:] Added -[JSContext setObject:forKeyedSubscript:] Added JSContext.virtualMachine Added JSContext(JSContextRefSupport) Added JSContext(SubscriptSupport) Added #def JSContext_h Added JSContextGetGlobalObject() Added JSContextGetGroup() Added JSContextGroupCreate() Added JSContextGroupRelease() Added JSContextGroupRetain() Added JSGlobalContextCreate() Added JSGlobalContextCreateInGroup() Added JSGlobalContextRelease() Added JSGlobalContextRetain() Added JSExport Added #def JSExportAs Added JSManagedValue Added -[JSManagedValue initWithValue:] Added +[JSManagedValue managedValueWithValue:] Added -[JSManagedValue value] Added #def JSManagedValue_h Added JSClassAttributes Added JSClassCreate() Added JSClassDefinition Added JSClassRelease() Added JSClassRetain() Added JSObjectCallAsConstructor() Added JSObjectCallAsConstructorCallback Added JSObjectCallAsFunction() Added JSObjectCallAsFunctionCallback Added JSObjectConvertToTypeCallback Added JSObjectCopyPropertyNames() Added JSObjectDeleteProperty() Added JSObjectDeletePropertyCallback Added JSObjectFinalizeCallback Added JSObjectGetPrivate() Added JSObjectGetProperty() Added JSObjectGetPropertyAtIndex() Added JSObjectGetPropertyCallback Added JSObjectGetPropertyNamesCallback Added JSObjectGetPrototype() Added JSObjectHasInstanceCallback Added JSObjectHasProperty() Added JSObjectHasPropertyCallback Added JSObjectInitializeCallback Added JSObjectIsConstructor() Added JSObjectIsFunction() Added JSObjectMake() Added JSObjectMakeArray() Added JSObjectMakeConstructor() Added JSObjectMakeDate() Added JSObjectMakeError() Added JSObjectMakeFunction() Added JSObjectMakeFunctionWithCallback() Added JSObjectMakeRegExp() Added JSObjectSetPrivate() Added JSObjectSetProperty() Added JSObjectSetPropertyAtIndex() Added JSObjectSetPropertyCallback Added JSObjectSetPrototype() Added JSPropertyAttributes Added JSPropertyNameAccumulatorAddName() Added JSPropertyNameArrayGetCount() Added JSPropertyNameArrayGetNameAtIndex() Added JSPropertyNameArrayRelease() Added JSPropertyNameArrayRetain() Added JSStaticFunction Added JSStaticValue Added kJSClassAttributeNoAutomaticPrototype Added kJSClassAttributeNone Added kJSClassDefinitionEmpty Added kJSPropertyAttributeDontDelete Added kJSPropertyAttributeDontEnum Added kJSPropertyAttributeNone Added kJSPropertyAttributeReadOnly Added JSChar Added JSStringCreateWithCharacters() Added JSStringCreateWithUTF8CString() Added JSStringGetCharactersPtr() Added JSStringGetLength() Added JSStringGetMaximumUTF8CStringSize() Added JSStringGetUTF8CString() Added JSStringIsEqual() Added JSStringIsEqualToUTF8CString() Added JSStringRelease() Added JSStringRetain() Added JSStringCopyCFString() Added JSStringCreateWithCFString() Added JSValue Added -[JSValue JSValueRef] Added -[JSValue callWithArguments:] Added -[JSValue constructWithArguments:] Added JSValue.context Added -[JSValue defineProperty:descriptor:] Added -[JSValue deleteProperty:] Added -[JSValue hasProperty:] Added -[JSValue invokeMethod:withArguments:] Added -[JSValue isBoolean] Added -[JSValue isEqualToObject:] Added -[JSValue isEqualWithTypeCoercionToObject:] Added -[JSValue isInstanceOf:] Added -[JSValue isNull] Added -[JSValue isNumber] Added -[JSValue isObject] Added -[JSValue isString] Added -[JSValue isUndefined] Added -[JSValue objectAtIndexedSubscript:] Added -[JSValue objectForKeyedSubscript:] Added -[JSValue setObject:atIndexedSubscript:] Added -[JSValue setObject:forKeyedSubscript:] Added -[JSValue setValue:atIndex:] Added -[JSValue setValue:forProperty:] Added -[JSValue toArray] Added -[JSValue toBool] Added -[JSValue toDate] Added -[JSValue toDictionary] Added -[JSValue toDouble] Added -[JSValue toInt32] Added -[JSValue toNumber] Added -[JSValue toObject] Added -[JSValue toObjectOfClass:] Added -[JSValue toPoint] Added -[JSValue toRange] Added -[JSValue toRect] Added -[JSValue toSize] Added -[JSValue toString] Added -[JSValue toUInt32] Added -[JSValue valueAtIndex:] Added -[JSValue valueForProperty:] Added +[JSValue valueWithBool:inContext:] Added +[JSValue valueWithDouble:inContext:] Added +[JSValue valueWithInt32:inContext:] Added +[JSValue valueWithJSValueRef:inContext:] Added +[JSValue valueWithNewArrayInContext:] Added +[JSValue valueWithNewErrorFromMessage:inContext:] Added +[JSValue valueWithNewObjectInContext:] Added +[JSValue valueWithNewRegularExpressionFromPattern:flags:inContext:] Added +[JSValue valueWithNullInContext:] Added +[JSValue valueWithObject:inContext:] Added +[JSValue valueWithPoint:inContext:] Added +[JSValue valueWithRange:inContext:] Added +[JSValue valueWithRect:inContext:] Added +[JSValue valueWithSize:inContext:] Added +[JSValue valueWithUInt32:inContext:] Added +[JSValue valueWithUndefinedInContext:] Added JSPropertyDescriptorConfigurableKey Added JSPropertyDescriptorEnumerableKey Added JSPropertyDescriptorGetKey Added JSPropertyDescriptorSetKey Added JSPropertyDescriptorValueKey Added JSPropertyDescriptorWritableKey Added JSValue(JSValueRefSupport) Added JSValue(StructSupport) Added JSValue(SubscriptSupport) Added #def JSValue_h Added JSType Added JSValueCreateJSONString() Added JSValueGetType() Added JSValueIsBoolean() Added JSValueIsEqual() Added JSValueIsInstanceOfConstructor() Added JSValueIsNull() Added JSValueIsNumber() Added JSValueIsObject() Added JSValueIsObjectOfClass() Added JSValueIsStrictEqual() Added JSValueIsString() Added JSValueIsUndefined() Added JSValueMakeBoolean() Added JSValueMakeFromJSONString() Added JSValueMakeNull() Added JSValueMakeNumber() Added JSValueMakeString() Added JSValueMakeUndefined() Added JSValueProtect() Added JSValueToBoolean() Added JSValueToNumber() Added JSValueToObject() Added JSValueToStringCopy() Added JSValueUnprotect() Added kJSTypeBoolean Added kJSTypeNull Added kJSTypeNumber Added kJSTypeObject Added kJSTypeString Added kJSTypeUndefined Added JSVirtualMachine Added -[JSVirtualMachine addManagedReference:withOwner:] Added -[JSVirtualMachine init] Added -[JSVirtualMachine removeManagedReference:withOwner:] Added #def AVAILABLE_AFTER_WEBKIT_VERSION_5_1 Added #def AVAILABLE_WEBKIT_VERSION_1_3_AND_LATER_BUT_DEPRECATED_AFTER_WEBKIT_VERSION_5_1 Added #def WEBKIT_OBJC_METHOD_ANNOTATION Added #def WEBKIT_VERSION_1_0 Added #def WEBKIT_VERSION_1_1 Added #def WEBKIT_VERSION_1_2 Added #def WEBKIT_VERSION_1_3 Added #def WEBKIT_VERSION_2_0 Added #def WEBKIT_VERSION_3_0 Added #def WEBKIT_VERSION_3_1 Added #def WEBKIT_VERSION_4_0 Added #def WEBKIT_VERSION_LATEST Added #def WEBKIT_VERSION_MAX_ALLOWED Added #def WEBKIT_VERSION_MIN_REQUIRED 232 APIs }
None
iOS7 -> iOS8 https://developer.apple.com/library/prerelease/ios/releasenotes/General/iOS80APIDiffs/frameworks/WebKit.html
1 Class 1 Protocol
UIWebView UIWebViewDelegate
14 Classes 3 Protocols
WKWebView WKFrameInfo WKBackForwardList WKBackForwardListItem WKNavigation WKNavigationAction WKNavigationResponse WKPreferences WKProcessPool WKUserContentController
WKWebViewConfiguration WKWindowFeatures WKScriptMessage WKUserScript ! WKNavigationDelegate WKScriptMessageHandler WKUIDelegate
XPC • Greatly improved in iOS8 • Third party keyboards
• Sharing extensions
XPC find /Applications -name \*.xpc | grep Web | wc
-l
XPC • Split app in multiple processes • E.g. Sourcekit
• http://www.jpsim.com/uncovering-sourcekit/
r167958
None
Optimizing JS
Fun with JS
jsc sudo ln -s /System/Library/Frameworks/ JavaScriptCore.framework/Versions/Current/Resources/jsc /bin/jsc
None
JS bytecode LLInt JIT DFG optimization
function sum(a, b) { return a + b; ! }
LLInt JIT DFG optimization function sum(a, b) { return a
+ b; }
LLInt JIT DFG
LLVM
LLVM • Infrastructure • Meant to optimize *time • Started
by Mr. Swift
LLInt JIT DFG
LLInt JIT DFG FTL
What’s new
Observable values
Observable values • loading • title • URL • estimatedProgress
Observable values webView.addObserver(self, forKeyPath: "loading", options: .New, context: nil)
Observable values override func observeValueForKeyPath(...) { switch keyPath { case
"loading": println("\(webView.loading)") case "estimatedProgress": println("\(webView.estimatedProgress)") … ! } }
Injecting
Action Request Response Rendering
Action Request Response Rendering
Action Request
Action Request webView:decidePolicyForNavigationAction:decisionHandler
Response Rendering
Response Rendering webView:decidePolicyForNavigationResponse:decisionHandler:
func webView(webView: WKWebView!, decidePolicyForNavigationAction navigationAction: WKNavigationAction!, decisionHandler: ((WKNavigationActionPolicy) -> Void)!)
{ ! if (navigationAction.navigationType == .LinkActivated && navigationAction.request.URL.host?. lowercaseString.hasPrefix("cocoaconference.com/") != nil) { ! // Open Safari UIApplication.sharedApplication().openURL(navigationAction.request.URL); decisionHandler(.Cancel) ! } else { ! decisionHandler(.Allow) ! } ! }
Native code HTML Page JS Data
Data is serialized into native objects!
Injecting 1. Create configuration 2. Wrap JS script in a
WKUserScript 3. Add script to configuration controller 4. Set up handler 5. Use configuration to build a Web view
let speakersWebViewConfiguration = WKWebViewConfiguration()
let scriptURL = NSBundle.mainBundle().pathForResource("fetchSpeakers", ofType: “js") ! let jsScript =
String(contentsOfFile:scriptURL!, encoding:NSUTF8StringEncoding, error: nil) ! let fetchAuthorsScript = WKUserScript(source: jsScript!, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
speakersWebViewConfiguration. userContentController. addUserScript(fetchAuthorsScript)
speakersWebViewConfiguration. userContentController. addScriptMessageHandler(self, name: MESSAGE_HANDLER)
speakersWebView = WKWebView(frame: CGRectZero, configuration: speakersWebViewConfiguration)
speakersWebView!.addObserver(self, forKeyPath: "loading", options: .New, context: nil) ! speakersWebView!.addObserver(self, forKeyPath:
"estimatedProgress", options: .New, context: nil)
let speakersRequest = NSURLRequest(URL:speakersURL) speakersWebView!.loadRequest(speakersRequest)
None
None
None
None
None
Demo
https://github.com/ funkyboy/Cocoaconf- Boston-2014
Caution
https://developer.apple.com/app-store/review/guidelines/
https://developer.apple.com/app-store/review/guidelines/
https://developer.apple.com/app-store/review/guidelines/
https://developer.apple.com/app-store/review/guidelines/
Building a native app is like building a custom browser
Building a native app is like building a custom browser
Me, now
Summing up
None
Links • https://www.webkit.org/blog/3362/ introducing-the-webkit-ftl-jit/ • http://trac.webkit.org/changeset/167958 • https://www.destroyallsoftware.com/ talks/wat •
WWDC Video #206
Contact •
[email protected]
• @_funkyboy