What the heck is JavaScriptCore?

Slides for my presentation at CocoaConf: http://cocoaconf.com/session/details/694

Transcript

1. What the heck is JavaScriptCore? Cesare Rocchi @_funkyboy
2. TOC • History • What’s JSCore • Demos • What’s new in WebKit
3. Who am I?
4. UX designer and developer
5. studiomagnolia.com
6. upbeat.it
7. appversion.io
8. podrover.com
9. Who are you?
10. History
11. stringByEvaluatingJavaScriptFromString:
12. 10.2
15. iOS7
16. iOS7
17. JSContext
18. JSValue
19. NSString *scriptPath = [[NSBundle mainBundle] pathForResource:@"temperature" ofType:@"js"];
20. NSString *scriptCode = [NSString stringWithContentsOfFile:scriptPath encoding:NSUTF8StringEncoding error:nil];
21. self.context = [[JSContext alloc] init]; [self.context evaluateScript:scriptCode];
22. NSString *scriptPath = [[NSBundle mainBundle] pathForResource:@"temperature" ofType:@"js"]; NSString *scriptCode = [NSString stringWithContentsOfFile:scriptPath encoding:NSUTF8StringEncoding error:nil]; self.context = [[JSContext alloc] init]; [self.context evaluateScript:scriptCode];
23. JS <-> Native
24. Blocks
25. JSExport
26. Demo Objc Demo Swift
27. React.js
28. #define RCT_EXTERN_REMAP_METHOD(js_name, method) \ - (void)__rct_export__##method { \ __attribute__((used, section("__DATA,RCTExport"))) \ __attribute__((__aligned__(1))) \ static const char *__rct_export_entry__[] = { __func__, #method, #js_name }; \ } https://github.com/facebook/react-native/blob/b99744a164f96be2989d686495a1c7d1afac737a/React/Base/ RCTBridgeModule.h#L141
29. Questions?
30. No plugins Flash Applets
31. 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 “ ”
32. History • No plugins • Flash • Applets
34. Adobe, don’t even think about it!
37. History • Nitro was introduced in iOS 4.3 • Uses JIT • Transform JS into native code Needs to mark memory w+x • Security issues
39. var temp = {}; temp[10123] = "cocoaconf";
40. Progress
41. iOS 3.2 -> iOS4 https://developer.apple.com/LIBRARY/ios/releasenotes/General/iPhone40APIDiffs/index.html Added UIWebView.allowsInlineMediaPlayback Added UIWebView.mediaPlaybackRequiresUserAction
42. iOS 4.3 -> iOS5 https://developer.apple.com/LIBRARY/ios/releasenotes/General/iOS50APIDiff/index.html Added UIWebView.mediaPlaybackAllowsAirPlay Added UIWebView.scrollView
43. iOS 5.1 -> iOS6 https://developer.apple.com/LIBRARY/ios/releasenotes/General/iOS60APIDiffs/index.html Added UIWebView.keyboardDisplayRequiresUserAction Added UIWebView.suppressesIncrementalRendering
44. 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
45. 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 }
47. iOS7 -> iOS8 https://developer.apple.com/library/prerelease/ios/releasenotes/General/iOS80APIDiffs/frameworks/WebKit.html
48. 1 Class 1 Protocol
49. UIWebView UIWebViewDelegate
50. 14 Classes 3 Protocols
51. WKWebView WKFrameInfo WKBackForwardList WKBackForwardListItem WKNavigation WKNavigationAction WKNavigationResponse WKPreferences WKProcessPool WKUserContentController WKWebViewConfiguration WKWindowFeatures WKScriptMessage WKUserScript WKNavigationDelegate WKScriptMessageHandler WKUIDelegate
52. XPC • Greatly improved in iOS8 • Third party keyboards • Sharing extensions
53. XPC find /Applications -name \*.xpc | grep Web | wc -l
54. XPC • Split app in multiple processes • E.g. Sourcekit • http://www.jpsim.com/uncovering-sourcekit/
55. r167958
57. Optimizing JS
58. Wat? https://www.youtube.com/watch?v=20BySC_6HyY
59. jsc sudo ln -s /System/Library/Frameworks/ JavaScriptCore.framework/Versions/Current/Resources/jsc /bin/jsc
60. JS bytecode LLInt JIT DFG optimization
61. function sum(a, b) { return a + b; }
62. LLInt JIT DFG optimization function sum(a, b) { return a + b; }
63. LLInt JIT DFG
64. LLVM
65. LLVM • Infrastructure • Meant to optimize *time • Started by Mr. Swift
66. LLInt JIT DFG
67. LLInt JIT DFG FTL
68. What’s new
69. Observable values
70. Observable values • loading • title • URL • estimatedProgress
71. Observable values webView.addObserver(self, forKeyPath: "loading", options: .New, context: nil)
72. Observable values override func observeValueForKeyPath(...) { switch keyPath { case "loading": println("\(webView.loading)") case "estimatedProgress": println("\(webView.estimatedProgress)") … } }
73. Injecting
74. Action Request Response Rendering
75. Action Request Response Rendering
76. Action Request
77. Action Request webView:decidePolicyForNavigationAction:decisionHandler
78. Response Rendering
79. Response Rendering webView:decidePolicyForNavigationResponse:decisionHandler:
80. 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) } }
81. Native code HTML Page JS Data
82. Data is serialized into native objects!
83. 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
84. let speakersWebViewConfiguration = WKWebViewConfiguration()
85. 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)
86. speakersWebViewConfiguration. userContentController. addUserScript(fetchAuthorsScript)
87. speakersWebViewConfiguration. userContentController. addScriptMessageHandler(self, name: MESSAGE_HANDLER)
88. speakersWebView = WKWebView(frame: CGRectZero, configuration: speakersWebViewConfiguration)
89. speakersWebView.addObserver(self, forKeyPath: "loading", options: .New, context: nil) speakersWebView.addObserver(self, forKeyPath: "estimatedProgress", options: .New, context: nil)
90. let speakersRequest = NSURLRequest(URL:speakersURL) speakersWebView!.loadRequest(speakersRequest)
96. Demo
97. https://github.com/ funkyboy/Cocoaconf- SanJose-2015
98. Caution
99. https://developer.apple.com/app-store/review/guidelines/
100. https://developer.apple.com/app-store/review/guidelines/
101. https://developer.apple.com/app-store/review/guidelines/
102. https://developer.apple.com/app-store/review/guidelines/
103. https://developer.apple.com/programs/terms/ios/standard/ ios_program_standard_agreement_20140909.pdf An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built- in WebKit framework, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.
104. https://developer.apple.com/programs/terms/ios/standard/ ios_program_standard_agreement_20140909.pdf An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built- in WebKit framework, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.
105. Building a native app is like building a custom browser
106. Building a native app is like building a custom browser Me, now
107. Summing up
109. 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
110. Contact • cesare@studiomagnolia.com • @_funkyboy