The new Webkit is AWESOME Cesare Rocchi @_funkyboy TOC History - - PowerPoint PPT Presentation

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

Adobe, don’t you even think about it!

History

• Nitro was introduced in iOS 4.3
• Uses JIT
• Transform JS into native code Needs to

mark memory w+x

• Security issues

var temp = {}; temp[10123] = "yow";

Progress

iOS 3.2 -> iOS4

https://developer.apple.com/LIBRARY/ios/releasenotes/General/iPhone40APIDifgs/index.html

Added UIWebView.allowsInlineMediaPlayback Added UIWebView.mediaPlaybackRequiresUserAction

iOS 4.3 -> iOS5

https://developer.apple.com/LIBRARY/ios/releasenotes/General/iOS50APIDifg/index.html

Added UIWebView.mediaPlaybackAllowsAirPlay Added UIWebView.scrollView

iOS 5.1 -> iOS6

https://developer.apple.com/LIBRARY/ios/releasenotes/General/iOS60APIDifgs/index.html

Added UIWebView.keyboardDisplayRequiresUserAction Added UIWebView.suppressesIncrementalRendering

iOS 6.1 -> iOS7

https://developer.apple.com/library/IOS/releasenotes/General/iOS70APIDifgs/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/iOS70APIDifgs/index.html

232 APIs

}

iOS7 -> iOS8

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

Optimizing JS

Fun with JS

jsc

sudo ln -s /System/Library/Frameworks/ JavaScriptCore.framework/Versions/Current/Resources/jsc /bin/jsc

JS bytecode

LLInt JIT DFG

• ptimization

function sum(a, b) { return a + b;

• }

LLInt JIT DFG

• ptimization

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",

• ptions: .New,

context: nil)

Observable values

• verride 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("yowconference.com.au/") != 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",

• fType: “js")
• let jsScript =

String.stringWithContentsOfFile(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",

• ptions: .New,

context: nil)

• speakersWebView!.addObserver(self,

forKeyPath: "estimatedProgress",

• ptions: .New,

context: nil)

let speakersRequest = NSURLRequest(URL:speakersURL) speakersWebView!.loadRequest(speakersRequest)

Demo

https://github.com/ funkyboy/YowSpeakers

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

Links

• https://www.webkit.org/blog/3362/

introducing-the-webkit-ftl-jit/

• http://trac.webkit.org/changeset/167958
• https://github.com/funkyboy/

YowSpeakers

• WWDC Video #206

Contact

• cesare@studiomagnolia.com
• @_funkyboy