Выступление на конференции DUMP-2017

2. Гибридное приложение
Яндекс.Авиабилетов
Полгода после релиза

3. avia.yandex.ru
3

4. avia.yandex.ru
4
iOS Android

5. 5
iOS Android

6. Разработчики
Mobile Web
50 %50 %
6
iOS Android

7. Архитектура сервиса
7
Ticket Daemon
Web Backend Mobile APISERP
Desktop Mobile iOS Android
Partner

8. › Дублирование кода
› … а значит, и багов
› Низкий bus-factor
› Различия в реализации
› Неравномерное развитие
Проблемы
8

9. Скорость и стоимость
увеличить уменьшить

10. React Native
› Нативный интерфейс, логика на React
Cordova
› Нативная оболочка, приложение на HTML + CSS + JavaScript
Гибрид
› Замена части экранов на web-view
Пути решения
10

11. Архитектура сервиса
11
Ticket Daemon
Web Backend Mobile APISERP
Desktop Mobile iOS Android
Partner

12. Архитектура сервиса
12
Ticket Daemon
Web BackendSERP
Desktop Mobile iOS Android
Partner

13. Web Backend

14. › вёрстка для гибридного приложения
› общение приложения с веб-сайтом
› обратная совместимость
Адаптация веб-сайта под приложение
14

15. Создание запроса
15
var url = URLComponents(string: "https:!//avia.yandex.ru/")!
url.queryItems = [
URLQueryItem(name: "fromName", "Екатеринбург"),
URLQueryItem(name: "toName", value: "Симферополь"),
URLQueryItem(name: "when", value: "2017-05-01"),
]
let request = URLRequest(url: url.url) !// malkovich malkovich
let webView = WKWebView()
webView.load(request)

16. Небольшие отличия
16

17. Идентификатор платформы передаётся
в кастомном HTTP-заголовке
Handshake
17
var request = URLRequest(url: requestURL)
request.addValue("ios", forHTTPHeaderField: "X-Platform")
webView.load(request)

18. 18
const platforms = {
ios: 'ios',
android: 'android',
wp: 'wp',
}
module.exports = (req, res, next) !-> {
const name = req.headers['x-platform']
const platform = platforms[name] !|| 'web'
res.cookie('platform', platform)
next()
}

19. Условия в шаблонах
19
bt.match('search-form', ctx !-> {
ctx.setContent([
!platform.isWeb() !&&
{ elem: 'action-back' },
{ elem: 'info' },
platform.isWeb() ?
{ elem: 'action-setting' } :
{ elem: 'action-share' }
])
})

20. Обработка событий
20

21. › Приложение принимает решение на основе URL
› Не требует изменений в коде веб-сайта
› Добавляет неявную связь между сайтом и приложением
Перехват события навигации
21

22. Приложение принимает решение на основе URL
Перехват события навигации
22
<a class="y-button"
href="/search/?fromName=Москва&when=2017-04-18">
Купить
!</a>

23. Приложение принимает решение на основе URL
Перехват события навигации
23
<a class="y-button"
href="/search/?fromName=Москва&when=2017-04-18">
Купить
!</a>

24. В приложении описываются методы, которые может
использовать JavaScript веб-сайта
Декларация интерфейса
24
this._liveBind(‘click', (event, data) !-> {
coordinator.doAction('showPartnerRedirect', {
offer: data.offer,
redirectUrl: data.redirectUrl,
})
})

25. В приложении описываются методы, которые может
использовать JavaScript веб-сайта
Декларация интерфейса
25
this._liveBind(‘click', (event, data) !-> {
coordinator.doAction('showPartnerRedirect', {
offer: data.offer,
redirectUrl: data.redirectUrl,
})
})

26. 26
class Coordinator {
doAction(name, payload) {
switch (platform) {
case 'ios':
return iosInterface.handle(name, payload)
case 'android':
return androidInterface[name](payload)
default:
return this.propagateEvent(name, payload)
}
}
})

27. 27
class Coordinator {
doAction(name, payload) {
switch (platform) {
case 'ios':
return iosInterface.handle(name, payload)
case 'android':
return androidInterface[name](payload)
default:
return this.propagateEvent(name, payload)
}
}
})

28. Добавление функции
28

29. Сервер принимает решение:
отдать вёрстку либо ответить ошибкой.
Версионирование
29
var request = URLRequest(url: requestURL)
request.addValue("ios",
forHTTPHeaderField: «X-Platform")
request.addValue("1.14",
forHTTPHeaderField: "X-Version")

30. iOS

31. › выбор компонента WebView (WKWebView, UIWebView)
› обработка событий (WKScriptMessageHandler,
WKNavigationDelegate, WKUIDelegate)
› Apple Transport Security
Гибридизация iOS-приложения
31

32. WKWebView

33. › Apple рекомендует
› Новый JS-движок Nitro
WKWebView
33

34. › Apple рекомендует
› Новый JS-движок Nitro
› Не работает с Interface Builder
› Работает в отдельном процессе
› Выпущен недоделанным
WKWebView
34

35. Обработка событий

36. Перехват события навигации
36
extension SearchViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView,
decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) !-> Void) {
if isAviaDomain(navigationAction.request.url!) {
decisionHandler(.allow)
} else {
decisionHandler(.cancel)
openURLInBrowser(navigationAction.request.url!)
}}}}

37. Перехват события навигации
37
extension SearchViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView,
decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) !-> Void) {
if isAviaDomain(navigationAction.request.url!) {
decisionHandler(.allow)
} else {
decisionHandler(.cancel)
openURLInBrowser(navigationAction.request.url!)
}}}}

38. target="_blank"
38
extension SearchViewController: WKUIDelegate {
func webView(_ webView: WKWebView,
createWebViewWith configuration: WKWebViewConfiguration,
for navigationAction: WKNavigationAction,
windowFeatures: WKWindowFeatures) !-> WKWebView? {
if navigationAction.targetFrame !== nil {
webView.load(navigationAction.request)
}
return nil
}
}

39. target="_blank"
39
extension SearchViewController: WKUIDelegate {
func webView(_ webView: WKWebView,
createWebViewWith configuration: WKWebViewConfiguration,
for navigationAction: WKNavigationAction,
windowFeatures: WKWindowFeatures) !-> WKWebView? {
if navigationAction.targetFrame !== nil {
webView.load(navigationAction.request)
}
return nil
}
}

40. Декларация интерфейса
40
final class ScriptMessageHandler: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController,
didReceive message: WKScriptMessage) {
if let payload = message.body as? ["String": Any] {
delegate!?.recieveMessage(withPayload: payload)
}
}
}

41. Декларация интерфейса
41
final class ScriptMessageHandler: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController,
didReceive message: WKScriptMessage) {
if let payload = message.body as? ["String": Any] {
delegate!?.recieveMessage(withPayload: payload)
}
}
}

42. 42
!// iOS
let scriptMessageHandler = ScriptMessageHandler()
let userContentController = WKUserContentController()
userContentController.add(scriptMessageHandler, name: "notification")
let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController
let webView = WKWebView(configuration: configuration)
!// Browser (JavaScript)
class iosDelegate {
handle(name, payload) {
const sender = window.webkit.messageHandlers["notification"]
sender.postMessage({ name, payload })
}
}

43. 43
!// iOS
let scriptMessageHandler = ScriptMessageHandler()
let userContentController = WKUserContentController()
userContentController.add(scriptMessageHandler, name: "notification")
let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController
let webView = WKWebView(configuration: configuration)
!// Browser (JavaScript)
class iosDelegate {
handle(name, payload) {
const sender = window.webkit.messageHandlers["notification"]
sender.postMessage({ name, payload })
}
}

44. App Transport Security

45. HTTPS в браузере
45
HTTPS HTTP???

46. NSURLErrorSecureConnectionFailed
HTTPS-ish?
46

47. 47
func webView(_ webView: WKWebView,
didFailProvisionalNavigation navigation: WKNavigation!,
withError error: Error) {
let nsError = error as NSError
if #available(iOS 9.0, *) {
let sslErrorCodes = [
NSURLErrorAppTransportSecurityRequiresSecureConnection,
NSURLErrorSecureConnectionFailed,
]
if sslErrorCodes.contains(nsError.code) {
let url = nsError.userInfo["NSErrorFailingURLKey"] as! URL
self.openURLInBrowser(url)
}
}

48. 48
func webView(_ webView: WKWebView,
didFailProvisionalNavigation navigation: WKNavigation!,
withError error: Error) {
let nsError = error as NSError
if #available(iOS 9.0, *) {
let sslErrorCodes = [
NSURLErrorAppTransportSecurityRequiresSecureConnection,
NSURLErrorSecureConnectionFailed,
]
if sslErrorCodes.contains(nsError.code) {
let url = nsError.userInfo["NSErrorFailingURLKey"] as! URL
self.openURLInBrowser(url)
}
}

49. Android

50. › обработка событий (JSInterface)
› разделение на несколько сборок
› поэтапная выкатка
Гибридизация Android-приложения
50

51. Передача данных из веба в приложение
51
!// Android
webview.addJavascriptInterface(
JSInterface(),
"MyInterface"
)
!// Website
MyInterface.addToFavorites(JSON.stringify({
flight: 'S7 01'
}))

52. 52
inner class JSInterface {
@JavascriptInterface
fun addToFavorites(json: String) {
onAddToFavorites(json)
}
@JavascriptInterface
fun removeFromFavorites(json: String) {
onRemoveFromFavorites(json)
}
}

53. Фрагментация

54. Поддержка JS API
По данным caiuse.com 54
Android 4.3
Android 4.4
Android 4.4.4
Chrome 53
0 % 25 % 50 % 75 % 100 %
Да Частично Нет

55. Crosswalk

56. Поддержка JS API
По данным caiuse.com 56
Android 4.3/w Crosswalk
Android 4.4/w Crosswalk
Android 4.4.4/w Crosswalk
Chrome 53
0 % 25 % 50 % 75 % 100 %
Да Частично Нет

57. Последний коммит в crosswalk
57

58. Размер приложения
58
8.74 Mb 53.66 Mb
Crosswalk

59. Crosswalk lite
59
› Весит примерно ~10MB

60. Crosswalk lite
60
› Собран с оптимизацией для снижения размера
› Весит примерно ~10MB

61. Crosswalk lite
61
› Весит примерно ~10MB
› Собран с оптимизацией для снижения размера
› Отключены: WebRTC, WebP, Web Video, Web
Audio, Web Bluetooth, Web Notifications, …

62. Crosswalk lite
62
› Сжат с применением LZMA
› Собран с оптимизацией для снижения размера
› Отключены: WebRTC, WebP, Web Video, Web
Audio, Web Bluetooth, Web Notifications, …
› Весит примерно ~10MB

63. Несколько apk – это просто
63
!// build.gradle
productFlavors {
api16_armv7 {
!!...
}
api16_x86 {
!!...
}
api21 {
!!...
}
}

64. 64
api16_armv7 {
!// Chromium должен собираться на 23-й версии
targetSdkVersion 23
compileSdkVersion 23
buildToolsVersion "23.0.3"
minSdkVersion 16
versionCode defaultConfig.versionCode + 2
ndk {
abiFilters "armeabi-v7a", ""
}
}

65. Результат
65
API21 (ARM&x86) 6,92 МБ (83.2%)
API16+ (x86) 34,03 МБ (0.7%)
API16+ (ARM) 30,24 МБ (16.1%)
Crosswalk
x86 binary
ARM binary

66. Рейтинг приложения
Android, данные из Google Developer Console 66

67. Параллельная выкладка
0 %
25 %
50 %
75 %
100 %
дни
1 2 3 4
API21 API16x86 API16ARM
67

68. 0 %
100 %
200 %
300 %
дни
1 2 3 4 5 6 7 8
API21 API16x86 API16ARM
68
Последовательная выкладка

69. Игого

70. Роадмап
70
Апрель
М
ай
И
ю
нь
И
ю
ль
Август
Сентябрь
О
ктябрь
Н
оябрь
Д
екабрь

71. Количество строк
71
Декабрь 2016
iOS Android
25 20325 858

72. Затраты на разработку
72
Апрель 2016
Mobile Web
50 %50 %

73. Обновления без ревью
73

74. ★★★★★
Очень здорово!
Спасибо за календарь цен!
by Ksenia Pankratova for v1.20 (126) – Android 6.0, Asus Z00l

75. iOS, переходы к партнёрам
75

76. › больше гибридных экранов
› оптимизация производительности
› Progressive Web Apps: оффлайн, веб-пуши
Что дальше?
76

77. PWA: Add to home screen
77

78. Андрей Легчилин
Яндекс.Авиабилеты,
frontend/Android
firnis@yandex-team.ru
@sameoldmadness
grumpy@yandex-team.ru
Роман Парадеев
Яндекс.Авиабилеты,
frontend/iOS

79. iOS party – июнь
bit.ly/iOSekb
@iospartyekb
Droid party – 20 апреля, 18:30
Минутка рекламы!
79