React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java...
Transcript of React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java...
![Page 1: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/1.jpg)
React Native Learn once, write anywhere
Дмитрий Пацура
https://github.com/ovr
![Page 2: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/2.jpg)
SPA
Mobile
PHP GO
![Page 3: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/3.jpg)
XML XIB
Android iOS
Java Kotlin
ObjC Swift
UI
Language
Build Gradle XCode
![Page 4: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/4.jpg)
PhoneGap Xamarin NativeScript
WebView C# -> ObjC / Java
JS/CSS XML/JS/CSS
?
![Page 5: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/5.jpg)
React-Native
ES6+ JSX FlexBox -> Yoga
Babel
Polyfills
![Page 6: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/6.jpg)
ES 2015
Common JS
Async / Await
JSX
![Page 7: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/7.jpg)
![Page 8: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/8.jpg)
JavaScriptCore
Android iOS Debug
Chrome / V8
WebSocket
![Page 9: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/9.jpg)
Packer HTTP: 8081
Babel
![Page 10: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/10.jpg)
MainActivity
![Page 11: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/11.jpg)
MainActivity
![Page 12: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/12.jpg)
Android
![Page 13: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/13.jpg)
ReactActivityDelegate
![Page 14: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/14.jpg)
mActivity это Activity пришла в Delegate
![Page 15: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/15.jpg)
Application
JSC
Activity
Delegate
BaseView
![Page 16: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/16.jpg)
MAIN / UI
JSC (JS)
Shadow
Native Modules
X
X
X
X
———————————————————>
———————————————————>
———————————————————>
—————————————————>
—————————————————>
—————————————————>
—————————————————>
![Page 17: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/17.jpg)
Вызов нативного кода из JS.
![Page 18: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/18.jpg)
Wrapper JS NativeModules Module
BatchedBridge(MessageQueue)
Native EventDispatcher MessageQueue
processJS Call
![Page 19: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/19.jpg)
MessageQueue Timers
![Page 20: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/20.jpg)
Вызов JS из нативного кода?
![Page 21: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/21.jpg)
Пример на AppState
![Page 22: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/22.jpg)
![Page 23: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/23.jpg)
Native -> JavaScript
![Page 24: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/24.jpg)
![Page 25: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/25.jpg)
![Page 26: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/26.jpg)
Приложение начинается с навигации
![Page 27: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/27.jpg)
Какой у нас выбор?
• react-comunity/react-navigation
• aksonov/react-native-router-flux
• jmurzy/react-router-native
• wix/react-native-navigation • airbnb/native-navigation
JS Native
![Page 28: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/28.jpg)
Ну JS ведь однопоточный… Пошалим?)
![Page 29: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/29.jpg)
![Page 30: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/30.jpg)
Реальная проблема
• Большой этап Render
Navigator transition delays :(
![Page 31: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/31.jpg)
setTimeout не вариант
![Page 32: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/32.jpg)
setTimeout не вариант
![Page 33: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/33.jpg)
• Больше сообщество • Легко настраиваемые
• Анимация в JS Thread • Беда с фрагментами
• Плавные Анимации всегда • SharedComponents
• Маленькое сообщество • Сложнее в поддержке
JS Native
И что выбрать?
![Page 34: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/34.jpg)
Mobile vs Tablet 1
![Page 35: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/35.jpg)
Mobile vs Tablet 1
![Page 36: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/36.jpg)
![Page 37: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/37.jpg)
LI-FI - это как WiFi
• Ушел запрос, не вернулся • Шел слишком долго (timeout) • Интернета вообще нет =)
![Page 38: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/38.jpg)
REST API + WS, но зачем?
Mobile REST API
WS Server
![Page 39: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/39.jpg)
WS + REST, но зачем?
• Синхронизация между устройствами • Нотификации • Обновление данных
![Page 40: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/40.jpg)
Let’s imagine
Диалоги Диалог
![Page 41: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/41.jpg)
![Page 42: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/42.jpg)
Какая проблема?
• Денормализованные данные (повторы) • Много кода для обновления во всех местах • Нормализованные данные нужны для БД
![Page 43: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/43.jpg)
Как решать проблему?
• Normalizer - (normalize by Schema) • Reselect (Memoized Selector)
![Page 44: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/44.jpg)
Как мерить производительность?• На глаз на реальном устройстве • Performance overlay • Systrace • CPU Profiler via Remote JS • CPU Profiler
![Page 45: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/45.jpg)
![Page 46: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/46.jpg)
![Page 47: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/47.jpg)
![Page 48: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/48.jpg)
![Page 49: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/49.jpg)
Есть 2 profiler
• Performance • JavaScript Profiler
![Page 50: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/50.jpg)
![Page 51: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/51.jpg)
![Page 52: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/52.jpg)
![Page 53: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/53.jpg)
————>
![Page 54: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/54.jpg)
![Page 55: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/55.jpg)
Production подготовка
![Page 56: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/56.jpg)
Если ошибка может быть допущена, она обязательно будет допущена.
• Native ошибки (dsym for ios) • Ошибки в JS (source map/bundle.js) • Сервер в open source • Остальные проекты? • Server inside Docker?)
![Page 57: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/57.jpg)
![Page 58: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/58.jpg)
![Page 59: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/59.jpg)
![Page 60: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/60.jpg)
![Page 61: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/61.jpg)
Правильный deploy приложения, экономит нам время.
• Сборка приложения под iOS/Android • Обновление статичной информации в iTunes/
Play Market • Создание скриншотов • Доставка в beta/alpha/prod
![Page 62: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/62.jpg)
![Page 63: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/63.jpg)
Как тестировать приложение?• Flow • Unit - смотри Jest • Интеграционное тестирование
![Page 64: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/64.jpg)
Плюсы RN• Инкрементальная сборка • Быстрое развивается • Мультиплатформенность (iOS + Android) • React/JS для Frontend программиста • Native look
![Page 65: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/65.jpg)
Минусы RN• Где же идеальный компоненты навигации!? • Android (верстка) бывает грустно :( • Качество open-source компонентов из сообщества • Не всегда можно просто и легко перейти на
новый релиз • Молодая технология?
![Page 66: React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common](https://reader036.fdocuments.us/reader036/viewer/2022062506/5f024dd17e708231d4039a2c/html5/thumbnails/66.jpg)
https://github.com/ovr
https://github.com/ovr/ghubber
https://telegram.me/ovrweb