Документ обсуждает успешный кейс использования React Native в продакшне, охватывая ключевые темы, такие как сравнение кода на Objective-C и React Native, процесс разработки и тестирования приложений, а также преимущества кроссплатформенной разработки. Также приводятся рекомендации по инструментам и ресурсам для начала работы с React Native. В заключение подчеркиваются экономические выгоды от использования этой технологии по сравнению с традиционной нативной разработкой.

1. React Native
Успешный кейс использования
в продакшне
Евгений Федоров
1

2. Евгений Федоров
и технический директор
Пару слов о себе
/eugene.feudorov
2
Сооснователь

3. Тезисы
• Знакомство с React Native
• Сравним код типичного экрана с TableView
Objective-C vs React Native
• Реализуем часть приложения на примере LOOKBUCK
• Поддержка приложения, дебаггинг, tools, тестирование
• Возможности и ограничения
• Бонус. При написании приложения для iOS —
80% Android приложения в подарок
3

4. • Полностью нативные (objective-c, swift, java)
• Условно нативные / кроссплатформенные
(React Native, Xamarin, RubyMotion, etc.)
• Web View (PhoneGap, Ionic, etc.)
💩
Мобильная разработка
5

5. Learn once, write anywhere
6
React Native

6. 7
Что потребуется для начала
Необходимы:
1. Node
2. React-native-cli
3. Xcode 7.0 или выше (для iOS)
4. Android Studio 2.0 или выше (для Android)
На выбор:
• Ваш любимый Text Editor
• Nuclide IDE
• Deco IDE
• Chrome (DevTools)

7. 8
DECO IDE

8. Первый запуск
9
$ react-native init BigApp
$ react-native run-ios
$ react-native run-android
Инициализация проекта:
Структура стартового
проекта React Native:
Запуск приложения :

9. Определяемся с технологией
10
Для этого реализуем типичный экран приложения
• Асинхронное получение JSON данных
• Рендер Spinner’а (индикатора загрузки)
• Рендер TableView

10. JSON — Spinner — TableView
11

11. 12
Сравним реализацию
Асинхронное получение JSON и сериализация
Objective-C React Native
1/3

12. 13
Сравним реализацию
Рендеринг Spinner (Индикатор загрузки)
Objective-C React Native
2/3

13. 14
Сравним реализацию
Рендеринг TableView
Objective-C React Native
3/3

14. Декларативное описание UI
15

15. 16
Декларативное описание UI

16. 17
Декларативное описание UI

17. 18
Декларативное описание UI

18. 19
Декларативное описание UI

19. 20
Декларативное описание UI

20. 21
Декларативное описание UI

21. Разработка на примере 📱
Список товаров Список луков Поиск
22

22. Реализация
TabBar
23

23. 24
~/dev/lookbuck_app/index.ios.js

24. Реализация
NavigationBar
25

25. 26
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js

26. 27
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js

27. 28
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js

28. 29
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js

29. Реализация
Scrollable Tabs
30

30. 31
~/dev/lookbuck_app/FeedPage.js
~/dev/lookbuck_app/IndexTabBar.js

31. Реализация
FeedView (Список товаров)
32

32. 33
~/dev/lookbuck_app/FeedItemsView.js
Получение товаров (JSON)

33. 34
~/dev/lookbuck_app/FeedItemsView.js
Рендеринг списка товаров

34. 35
~/dev/lookbuck_app/FeedItemsView.js
Рендеринг карточки товара

35. 36
~/dev/lookbuck_app/FeedItemsView.js
Обработчик тапа по товару

36. Готово
37

37. Анимации
38
1. Объявление анимации для компонента в render()
2. Запуск анимации

38. Анимации
39
2. Объявление анимации для компонента в render()
1. Интерполяция входящих значений

39. Tools
40
• Call Stack
• Breakpoints
• Perfomance Monitor
• Profiler (CPU / Mem)
• Inspector
• Live Reload

40. Call Stack
41

41. Breakpoints
42

42. Perfomance Monitor
43

43. CPU Profiler
44

44. Inspector
45

45. 46
Live Reload

46. Тестирование
• Unit-тесты
• Интеграционные тесты
• Снэпшот тесты

47. Unit-тестирование
$ npm install --save-dev jest-cliУстановка JEST:
Создание папки с
будущими тестами:
$ mkdir __tests__
Создаём сам тест:
Запуск: $ npm test

48. Интеграционное тестирование
49
• Cucumber.io
• Calabash (calaba.sh)

49. Snapshot тестирование
50
• Snapshot (Fastlane)
• Xcode 7.0 (встроенные тулз)

50. Активное сообщество
Огромное количество готовых компонентов,
которые активно развиваются и обновляются
https://js.coach/react-native
51

51. Ограничения ⚠️
3. Есть целые компоненты,
которые работают только в одной из платформ
StatusBarIOS, ActivityIndicatorIOS, ToolbarAndroid, …
2. У компонентов есть свойства,
которые работают только в одной из платформ.
<Image onError> только для iOS
<Image overlayColor> только для Android
4. Может не быть готового UI-компонента, тогда придется
самому писать Bridge (Javascript Objective-C | Swift | Java)
Что как следствие сильно затормозит скорость разработки
52
1. Минимальные требования к версиям OS:
Android 4.1 (API 16) +
iOS 7+
…

52. Бонус
53
Если вы написали iOS-приложение,
то 80 — 90% кода для Android уже готово
🎁

53. 54
Используем TabBar
вместо TabBarIOS
Портирование на Android 1/3

54. 55
Портирование на Android 2/3
Используем Navigator
вместо NavigatorIOS
Причем Navigator
полностью
кроссплатформенный.

55. 56
Портирование на Android 3/3
Всё остальное
остаётся без изменений

56. — Если код запущен на платформе iOS, то
импортируется
IndexPage.ios.js
Полезные штуки
Умный Import
— Если на платформе Android, то импортируется
IndexPage.android.js
57
— Если файла с дополнительными расширениями нет, то
IndexPage.js

57. Полезные штуки
58
Специфичный платформе код
Можно также узнавать версию OS,
в которой приложение работает

58. Полезные штуки
Возможность использования JS-библиотек
от nodejs и frontend разработчиков
Несколько примеров
Moment.js
Underscore.js
URI.js
…
59

59. • Мы получили готовое нативное iOS приложение за
одну неделю (за 2 недели оно было доступно в App Store)
• Сэкономили сотни тысяч рублей на разработку
таких же приложений на Objective-C и JAVA (и
возможно миллионы на поддержку и развитие)
60
В итоге
Используя React Native

60. Спасибо