Зачем нужен JavaScript в iOS-приложениях

2. JavaScript в iOS приложениях
Александр Денисов
Евгений Дымов

3. Часть 1
JavaScript и WebView

4. Почему WebView?

5. 5
Просто и удобно
Открытие веб-страниц
Safari
Пользователь остается в нашем приложении
WebView

6. Социальная авторизация
6
Потому что никто не любит регистрироваться

7. Просмотр документов
7
〉Pdf
〉Microsoft Office
〉iWork
〉Медиа-контент

8. UIWebView

9. WKWebView!

10. WKWebView
〉WebKit framework
〉Богатый API
〉Быстрый рендеринг
〉Быстрый JavaScript
〉Отдельный процесс
10
http://bigwol.com/surprised-baby-hd-widescreen-hd-free-wallpaper

11. Скорость выполнения JavaScript
SunSpider: https://www.webkit.org/perf/sunspider/sunspider.html
11
@ iPhone 5s, iOS 8.1
WKWebView
UIWebView
0 375 750 1125 1500
Время выполнения, мс

12. WKWebView
Бонус: “из коробки” получаем:
〉Навигация жестами
〉Звонок с другого  устройства
〉Открытие в новой вкладке
〉Заголовок страницы
API diff: http://nshipster.com/wkwebkit/
12

13. Как?

14. Что нам потребуется
〉Процесс загрузки страницы
〉Выполнение JavaScript
〉Связь JavaScript — нативный код
14

15. Процесс загрузки страницы
15
WKWebView
@protocol WKNavigationDelegate;
@protocol WKUIDelegate;
UIWebView
@protocol UIWebViewDelegate;

16. - (void)webView:(WKWebView*)webView
decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction
decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
- (void)webView:(WKWebView*)webView
decidePolicyForNavigationResponse:
(WKNavigationResponse*)navigationResponse
decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
- (void)webView:(WKWebView*)webView
didStartProvisionalNavigation:(WKNavigation*)navigation;
- (void)webView:(WKWebView*)webView
didReceiveServerRedirectForProvisionalNavigation:(WKNavigation*)navigation;
WKNavigationDelegate
16

17. 17
- (void)webView:(WKWebView*)webView
didFailProvisionalNavigation:(WKNavigation*)navigation
withError:(NSError*)error;
- (void)webView:(WKWebView*)webView
didCommitNavigation:(WKNavigation*)navigation;
- (void)webView:(WKWebView*)webView
didFinishNavigation:(WKNavigation*)navigation;
- (void)webView:(WKWebView*)webView
didFailNavigation:(WKNavigation*)navigation
withError:(NSError*)error;
- (void)webView:(WKWebView*)webView
didReceiveAuthenticationChallenge:
(NSURLAuthenticationChallenge*)challenge
completionHandler:(void (^)(
NSURLSessionAuthChallengeDisposition disposition,
NSURLCredential*credential))completionHandler;

18. - (WKWebView*)webView:(WKWebView*)webView
createWebViewWithConfiguration:
(WKWebViewConfiguration*)configuration
forNavigationAction:(WKNavigationAction*)navigationAction
windowFeatures:(WKWindowFeatures*)windowFeatures;
- (void)webView:(WKWebView*)webView
runJavaScriptAlertPanelWithMessage:(NSString*)message
initiatedByFrame:(WKFrameInfo*)frame
completionHandler:(void (^)())completionHandler;
WKUIDelegate
18

19. 19
- (void)webView:(WKWebView*)webView
runJavaScriptConfirmPanelWithMessage:(NSString*)message
initiatedByFrame:(WKFrameInfo*)frame
completionHandler:(void (^)(BOOL result))completionHandler;
- (void)webView:(WKWebView*)webView
runJavaScriptTextInputPanelWithPrompt:(NSString*)prompt
defaultText:(NSString*)defaultText
initiatedByFrame:(WKFrameInfo*)frame

20. - (BOOL)webView:(UIWebView*)webView
shouldStartLoadWithRequest:(NSURLRequest*)request
navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView*)webView;
- (void)webViewDidFinishLoad:(UIWebView*)webView;
- (void)webView:(UIWebView*)webView
didFailLoadWithError:(NSError*)error;
UIWebViewDelegate
20

21. Выполнение кода JavaScript
21
WKWebView
- (void)evaluateJavaScript:(NSString*)javaScriptString
completionHandler:(void (^)(id, NSError*))completionHandler;
UIWebView
- (NSString*)stringByEvaluatingJavaScriptFromString:(NSString*)script;

22. Выполнение кода JavaScript: пример
22
// Favicon
NSString* faviconJS =
@"document.querySelector("link[rel='shortcut icon']")"
".getAttribute('href')";
[wkWebView evaluateJavaScript:faviconJS completionHandler:
^(NSString* favicon, NSError* error) {
if (favicon) {
[self didObtainFavicon:favicon];
}
}];
WKWebView

23. Выполнение кода JavaScript: пример
23
// Заголовок страницы
NSString* titleJS = @"document.title";
return [uiWebView stringByEvaluatingJavaScriptFromString:titleJS];
UIWebView

24. Связь JavaScript — нативный код
24
WKWebView
@protocol WKScriptMessageHandler <NSObject>
@required
- (void)userContentController:
(WKUserContentController*)userContentController
didReceiveScriptMessage:(WKScriptMessage*)message;
@end

25. 25
@interface WKUserContentController : NSObject
...
- (void)addScriptMessageHandler:
(id<WKScriptMessageHandler>)scriptMessageHandler
name:(NSString*)name;
@end
!
!
!
// Добавление scriptMessageHandler создает для всех веб-фреймов
// функцию:
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)

26. Связь JavaScript — нативный код
26
UIWebView
function YACSendToNativeCode(name, data) {
var message = { };
message.name = name;
message.data = data;
window.location = "jsbridge://" + escape(JSON.stringify(message));
};

27. 27
- (BOOL)webView:(UIWebView*)webView
shouldStartLoadWithRequest:(NSURLRequest*)request
navigationType:(UIWebViewNavigationType)navigationType {
if ([request.URL.scheme isEqualToString:@"jsbridge"]) {
// Обработка сообщения
return NO;
}
return YES;
}

28. JavaScript библиотеки
Пример: jQuery
〉Быстро получаем богатую функциональность
〉Возможен конфликт
〉Снижение производительности
〉Кроссбраузерная совместимость?
Можем реализовать необходимую функциональность самостоятельно!
28

29. NSURLProtocol (только UIWebView)
Управление сетевым стеком с помощью NSURLProtocol
https://tech.yandex.ru/events/yac/2013/talks/1076/
Можем реализовать:
〉Сжатие трафика
〉Поддержку новых форматов
WebP
WebM
…
29

30. Саади
«Два человека бесплодно трудились и
без пользы старались: тот, кто копил
богатство и не пользовался им, и тот,
кто учился наукам, но не применял их»

31. А теперь делаем «фичи»!
Inspired by

32. Примеры
〉Prerendering, DNS prefetching
〉Управление медиаконтентом
〉Контекстное меню
〉Сохранение паролей
〉Социальная авторизация
〉Изменение DOM
32

33. Prerendering, DNS prefetching
DNS-запросы: от 1мс до нескольких секунд
Prerendering: субъективное ускорение загрузки страниц
33
<link rel="prerender" href="http://example.org/index.html">
<link rel="dns-prefetch" href="http://host-to-prefetch.com">

34. 34
function YACPrerenderLinks() {
var results = [],
nodeList = document.querySelector("link[rel='prerender']");
!
for (var i = 0; i < nodeList.length; i++) {
var href = nodeList[i].getAttribute("href");
results.push(href);
}
return results.join();
}
!
function YACDNSPrefetchLinks() { ... }

35. Управление медиаконтентом
var YACAudioElementsList = [ ],
YACHTMLAudioElementPlay =
window.HTMLAudioElement.prototype.play;
!
function YACAddHTMLAudioElementToList(el) {
YACHTMLAudioElementsList.push(el);
}
!
window.HTMLAudioElement.prototype.play = function() {
YACAddHTMLAudioElementToList(this);
this.play = YACHTMLAudioElementPlay;
this.play();
}
35

36. 36
function YACPauseHTMLAudioElements() {
for (i = 0; i < YACHTMLAudioElementsList.length; i++) {
YACHTMLAudioElementsList[i].pause();
}
}
!
function YACResumePausedHTMLAudio() { ... }

37. Контекстное меню
37
〉Открыть вкладку
〉Копировать ссылку
〉Поделиться ссылкой
〉Сохранить изображение
〉Позвонить с другого устройства

38. Контекстное меню
// 1. Получаем элемент по координатам и декодируем из JSON
// 2. Заполняем и показываем UIActionSheet
- (void)openContextualMenuAtPoint:(CGPoint)point {
YACInteractiveHTMLElement* element =
[self interactiveElementAtPoint:point];
[self showContextualMenuForElement:element atPoint:point];
}
38
Разберем на примере YACImageLinkForTouchAtPoint

39. 39
function YACElementFromPoint(x, y) {
var currentDocument = document,
element = currentDocument.elementFromPoint(x, y),
boundRect;
try {
while (element && (element.nodeName === "FRAME" ||
element.nodeName === "IFRAME")) {
boundRect = element.getBoundingClientRect();
x -= boundRect.left;
y -= boundRect.top;
currentDocument = element.contentDocument;
element = currentDocument.elementFromPoint(x, y);
}
} catch (e) { }
return element;
}

40. 40
function YACImageLinkForTouchAtPoint(x, y) {
var element = YACElementFromPoint(x, y);
return YACImageLinkForElement(element);
}
!
!
function YACImageLinkForElement(element) {
if (element.tagName === "IMG" && element.src) {
return element.src;
}
return null;
}

41. Сохранение паролей
41
Обязательно спрашиваем разрешения!

42. 42
// 1. Перехватываем событие отправки формы
// Обработчик вызывается для каждой отправляемой формы
window.addEventListener("submit", YACFormSubmitHandler, false);
!
!
// 2. Сохраняем заполненные данные в обработчике события
function YACFormSubmitHandler(e) {
if (e.target.nodeName !== "FORM") {
return;
}
!
YACCollectLoginFormDataAndSendToNativeCode(e.target);
}

43. 43
// 3. Заполняем данные при загрузке страницы с такой же формой
function YACFillLoginFormWithData(
form,
usernameElementName, usernameValue,
passwordElementName, passwordValue) {
!
var usernameElement = form.querySelector(
"input[name='" + usernameElementName + "']");
usernameElement.value = usernameValue;
!
var passwordElement = form.querySelector(
"input[type='password'][name='" + passwordElementName + "']");
passwordElement.value = passwordValue;
}

44. Социальная авторизация
44
Это:
〉Удобно
〉Привычно для пользователя
〉“Must have”

45. Социальная авторизация
45
Реализация с помощью WebView:
Доступ к данным на странице авторизации!

46. Социальная авторизация
45
Реализация с помощью WebView:
Доступ к данным на странице авторизации!

47. Социальная авторизация
45
Реализация с помощью WebView:
Доступ к данным на странице авторизации!
Совет: не используйте WebView для социальной авторизации

48. Реализация с помощью OAuth
1. Регистрируем приложение
2. Отправляем запрос
https://oauth.yandex.ru/authorize?
response_type=token
& client_id=<идентификатор приложения>
3. Пользователь авторизуется и выдает разрешения для нашего приложения
4. Получаем данные в ответе
http://www.example.com/token#
access_token=<новый OAuth-токен>
& expires_in=<время жизни токена в секундах>
46

49. 47
// 1. Native SDK
!
// 2. Callback URL scheme - обрабатываем в AppDelegate
- (BOOL)application:(UIApplication*)application
openURL:(NSURL*)url
sourceApplication:(NSString*)sourceApplication
annotation:(id)annotation;
!
// 3. WebView (пример для UIWebView, WKWebView - аналогично)
- (BOOL)webView:(UIWebView*)webView
shouldStartLoadWithRequest:(NSURLRequest*)request
navigationType:(UIWebViewNavigationType)navigationType;

50. Изменение DOM с помощью JavaScript
48
VIDEO

51. Изменение DOM с помощью JavaScript
48
VIDEO

52. Что же получилось?
〉Мы разобрались в возможностях UIWebView и WKWebView
〉Научились писать “фичи” для веб-контента
〉Делаем пользователей счастливее
〉И все это — благодаря JavaScript!
49

53. Часть 2
JavaScript без WebView

54. Зачем?

55. Расширяемость
〉Внешняя логика
〉Интерпретация в runtime
〉JavaScript!
52

56. Платформонезависимость
〉Нативный UI
〉Общая бизнес-логика
〉Мгновенное обновление бизнес-логики
〉JavaScript!
53

57. Программируемость
Мы продолжаем наши передачи на этой частоте!
54

58. Как?

59. JavaScriptCore
〉Objective-C API доступно с iOS 7, Mac OS X 10.9
〉JavaScript движок в WebKit
〉Также известен как SquirrelFish, Nitro
56
© 2008 Goopymart

60. JavaScriptCore
〉JSContext
〉JSValue
〉<JSExport>
〉JSManagedValue
〉JSVirtualMachine
57

61. JSContext
〉Среда выполнения JavaScript кода
〉Глобальный объект (à la window)
!
- (JSValue*)evaluateScript:(NSString*)script;
58

62. JSValue
Ссылка на JavaScript объект
!
+ (JSValue*)valueWithObject:(id)value inContext:(JSContext*)context;
59

63. <JSExport>
Экспорт методов и свойств в JavaScript окружение
60
@protocol MyClassExports <JSExport>
- (void)foo; // Доступен из JavaScript
@end
@interface MyClass : NSObject <MyClassExports>
- (void)bar; // Недоступен из JavaScript
@end

64. Поехали!

65. Программируемость?
62
© CodeCombat http://codecombat.com

66. Реализация
〉Нативная графика — Sprite Kit
〉Управление персонажем — JavaScript
〉Соединительное звено — JavaScriptCore
63

67. Adventure
64
© 2013 Apple https://developer.apple.com

68. CharacterAI.js
var CharacterAI = function() {
};
!
CharacterAI.prototype.onIdle = function(event) {
this.character.ahead(100);
this.character.turn(45);
this.character.back(100);
};
!
CharacterAI.prototype.onScannedEnemy = function(event) {
this.character.fire();
};
...
65

69. // TODO:
〉Создать экземпляр CharacterAI
〉Передать персонаж в JavaScript окружение
〉Экспортировать необходимые методы
〉Сообщать о событиях (onIdle, onScannedEnemy…)
66

70. Создать экземпляр CharacterAI
@property JSContext* context;
@property JSValue* characterAI;
!
...
!
self.context = [[JSContext alloc] init];
[self.context evaluateScript:self.script.contents];
self.characterAI =
[self.context evaluateScript:@"new CharacterAI()"];
67

71. Передать персонаж в JavaScript окружение
@property APAIntelligentHeroCharacter* character;
!
...
!
self.characterAI[@"character"] = self.character;
68

72. Экспортировать необходимые методы
@protocol APAIntelligentHeroCharacterExports <JSExport>
- (void)ahead:(CGFloat)amount;
...
@end
!
@interface APAIntelligentHeroCharacter : APAHeroCharacter
<APAIntelligentHeroCharacterExports>
@end
!
@implementation APAIntelligentHeroCharacter
- (void)ahead:(CGFloat)amount {
}
...
@end
69

73. Сообщать о событиях
- (void)updateWithTimeSinceLastUpdate:(CFTimeInterval)interval {
...
if (self.character.state == APACharacterStateIdle) {
[self.characterAI invokeMethod:@"onIdle"
withArguments:@[ event ]];
}
...
}
70

74. Demo

75. 72

76. 72

77. Two more things…

78. Управление памятью
@property JSValue* characterAI;
...
- (void)setCharacterAI:(JSValue*)characterAI {
_managedCharacterAI = [JSManagedValue managedValueWithValue:characterAI];
[characterAI.context.virtualMachine
addManagedReference:_managedCharacterAI withOwner:self];
}
!
- (JSValue*)characterAI {
return [_managedCharacterAI value];
}
74
removeManagedReference:withOwner: для удаления ссылки

79. Многопоточность
〉API потокобезопасно
〉Область блокировки — JSVirtualMachine
〉JSVirtualMachine — контейнер для JSContext
〉Использование отдельной JSVirtualMachine для каждого потока
75

80. Материалы
〉WWDC 2014 Introducing the Modern WebKit API
〉nshipster.com/wkwebkit
〉tech.yandex.ru/events/yac/2013/talks/1076
〉WWDC 2013 Integrating JavaScript into Native Apps
〉trac.webkit.org/wiki/JavaScriptCore
〉github.com/WebKit/webkit
〉bit.ly/yac2014-ios-jstalks
76

81. Зачем JavaScript в iOS
приложениях?

82. Спасибо за внимание!

83. 79
Александр Денисов
Контакты
stonespb@yandex-team.ru
stonespb
dymv@yandex-team.ru
@_dymv
Евгений Дымов