Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React Native
Успешный кейс использования
в продакшне
Евгений Федоров
1
Евгений Федоров
и технический директор
Пару слов о себе
/eugene.feudorov
2
Сооснователь
Тезисы
• Знакомство с React Native
• Сравним код типичного экрана с TableView
Objective-C vs React Native
• Реализуем част...
• Полностью нативные (objective-c, swift, java)
• Условно нативные / кроссплатформенные
(React Native, Xamarin, RubyMotion...
Learn once, write anywhere
6
React Native
7
Что потребуется для начала
Необходимы:
1. Node
2. React-native-cli
3. Xcode 7.0 или выше (для iOS)
4. Android Studio 2.0...
8
DECO IDE
Первый запуск
9
$ react-native init BigApp
$ react-native run-ios
$ react-native run-android
Инициализация проекта:
Структ...
Определяемся с технологией
10
Для этого реализуем типичный экран приложения
• Асинхронное получение JSON данных
• Рендер S...
JSON — Spinner — TableView
11
12
Сравним реализацию
Асинхронное получение JSON и сериализация
Objective-C React Native
1/3
13
Сравним реализацию
Рендеринг Spinner (Индикатор загрузки)
Objective-C React Native
2/3
14
Сравним реализацию
Рендеринг TableView
Objective-C React Native
3/3
Декларативное описание UI
15
16
Декларативное описание UI
17
Декларативное описание UI
18
Декларативное описание UI
19
Декларативное описание UI
20
Декларативное описание UI
21
Декларативное описание UI
Разработка на примере 📱
Список товаров Список луков Поиск
22
Реализация
TabBar
23
24
~/dev/lookbuck_app/index.ios.js
Реализация
NavigationBar
25
26
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
27
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
28
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
29
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
Реализация
Scrollable Tabs
30
31
~/dev/lookbuck_app/FeedPage.js
~/dev/lookbuck_app/IndexTabBar.js
Реализация
FeedView (Список товаров)
32
33
~/dev/lookbuck_app/FeedItemsView.js
Получение товаров (JSON)
34
~/dev/lookbuck_app/FeedItemsView.js
Рендеринг списка товаров
35
~/dev/lookbuck_app/FeedItemsView.js
Рендеринг карточки товара
36
~/dev/lookbuck_app/FeedItemsView.js
Обработчик тапа по товару
Готово
37
Анимации
38
1. Объявление анимации для компонента в render()
2. Запуск анимации
Анимации
39
2. Объявление анимации для компонента в render()
1. Интерполяция входящих значений
Tools
40
• Call Stack
• Breakpoints
• Perfomance Monitor
• Profiler (CPU / Mem)
• Inspector
• Live Reload
Call Stack
41
Breakpoints
42
Perfomance Monitor
43
CPU Profiler
44
Inspector
45
46
Live Reload
Тестирование
• Unit-тесты
• Интеграционные тесты
• Снэпшот тесты
Unit-тестирование
$ npm install --save-dev jest-cliУстановка JEST:
Создание папки с
будущими тестами:
$ mkdir __tests__
Со...
Интеграционное тестирование
49
• Cucumber.io
• Calabash (calaba.sh)
Snapshot тестирование
50
• Snapshot (Fastlane)
• Xcode 7.0 (встроенные тулз)
Активное сообщество
Огромное количество готовых компонентов,
которые активно развиваются и обновляются
https://js.coach/re...
Ограничения ⚠️
3. Есть целые компоненты,
которые работают только в одной из платформ
StatusBarIOS, ActivityIndicatorIOS, T...
Бонус
53
Если вы написали iOS-приложение,
то 80 — 90% кода для Android уже готово
🎁
54
Используем TabBar
вместо TabBarIOS
Портирование на Android 1/3
55
Портирование на Android 2/3
Используем Navigator
вместо NavigatorIOS
Причем Navigator
полностью
кроссплатформенный.
56
Портирование на Android 3/3
Всё остальное
остаётся без изменений
— Если код запущен на платформе iOS, то
импортируется
IndexPage.ios.js
Полезные штуки
Умный Import
— Если на платформе And...
Полезные штуки
58
Специфичный платформе код
Можно также узнавать версию OS,
в которой приложение работает
Полезные штуки
Возможность использования JS-библиотек
от nodejs и frontend разработчиков
Несколько примеров
Moment.js
Unde...
• Мы получили готовое нативное iOS приложение за
одну неделю (за 2 недели оно было доступно в App Store)
• Сэкономили сотн...
Спасибо
Upcoming SlideShare
Loading in …5
×

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

577 views

Published on

— Космическая скорость разработки приложения (iOs-приложение за неделю);
— Сравнение типичного экрана со списком данных на Objective-C и React Native;
— Поддержка приложения, Debugging;
— Ограничения React Native, которые следует учитывать;
— Бонус: при написании приложения для iOs — 80% Android приложения в подарок :)

Published in: Engineering
  • Be the first to comment

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

  1. 1. React Native Успешный кейс использования в продакшне Евгений Федоров 1
  2. 2. Евгений Федоров и технический директор Пару слов о себе /eugene.feudorov 2 Сооснователь
  3. 3. Тезисы • Знакомство с React Native • Сравним код типичного экрана с TableView Objective-C vs React Native • Реализуем часть приложения на примере LOOKBUCK • Поддержка приложения, дебаггинг, tools, тестирование • Возможности и ограничения • Бонус. При написании приложения для iOS — 80% Android приложения в подарок 3
  4. 4. • Полностью нативные (objective-c, swift, java) • Условно нативные / кроссплатформенные (React Native, Xamarin, RubyMotion, etc.) • Web View (PhoneGap, Ionic, etc.) 💩 Мобильная разработка 5
  5. 5. Learn once, write anywhere 6 React Native
  6. 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. 7. 8 DECO IDE
  8. 8. Первый запуск 9 $ react-native init BigApp $ react-native run-ios $ react-native run-android Инициализация проекта: Структура стартового проекта React Native: Запуск приложения :
  9. 9. Определяемся с технологией 10 Для этого реализуем типичный экран приложения • Асинхронное получение JSON данных • Рендер Spinner’а (индикатора загрузки) • Рендер TableView
  10. 10. JSON — Spinner — TableView 11
  11. 11. 12 Сравним реализацию Асинхронное получение JSON и сериализация Objective-C React Native 1/3
  12. 12. 13 Сравним реализацию Рендеринг Spinner (Индикатор загрузки) Objective-C React Native 2/3
  13. 13. 14 Сравним реализацию Рендеринг TableView Objective-C React Native 3/3
  14. 14. Декларативное описание UI 15
  15. 15. 16 Декларативное описание UI
  16. 16. 17 Декларативное описание UI
  17. 17. 18 Декларативное описание UI
  18. 18. 19 Декларативное описание UI
  19. 19. 20 Декларативное описание UI
  20. 20. 21 Декларативное описание UI
  21. 21. Разработка на примере 📱 Список товаров Список луков Поиск 22
  22. 22. Реализация TabBar 23
  23. 23. 24 ~/dev/lookbuck_app/index.ios.js
  24. 24. Реализация NavigationBar 25
  25. 25. 26 ~/dev/lookbuck_app/FeedNavPage.ios.js ~/dev/lookbuck_app/index.ios.js
  26. 26. 27 ~/dev/lookbuck_app/FeedNavPage.ios.js ~/dev/lookbuck_app/index.ios.js
  27. 27. 28 ~/dev/lookbuck_app/FeedNavPage.ios.js ~/dev/lookbuck_app/index.ios.js
  28. 28. 29 ~/dev/lookbuck_app/FeedNavPage.ios.js ~/dev/lookbuck_app/index.ios.js
  29. 29. Реализация Scrollable Tabs 30
  30. 30. 31 ~/dev/lookbuck_app/FeedPage.js ~/dev/lookbuck_app/IndexTabBar.js
  31. 31. Реализация FeedView (Список товаров) 32
  32. 32. 33 ~/dev/lookbuck_app/FeedItemsView.js Получение товаров (JSON)
  33. 33. 34 ~/dev/lookbuck_app/FeedItemsView.js Рендеринг списка товаров
  34. 34. 35 ~/dev/lookbuck_app/FeedItemsView.js Рендеринг карточки товара
  35. 35. 36 ~/dev/lookbuck_app/FeedItemsView.js Обработчик тапа по товару
  36. 36. Готово 37
  37. 37. Анимации 38 1. Объявление анимации для компонента в render() 2. Запуск анимации
  38. 38. Анимации 39 2. Объявление анимации для компонента в render() 1. Интерполяция входящих значений
  39. 39. Tools 40 • Call Stack • Breakpoints • Perfomance Monitor • Profiler (CPU / Mem) • Inspector • Live Reload
  40. 40. Call Stack 41
  41. 41. Breakpoints 42
  42. 42. Perfomance Monitor 43
  43. 43. CPU Profiler 44
  44. 44. Inspector 45
  45. 45. 46 Live Reload
  46. 46. Тестирование • Unit-тесты • Интеграционные тесты • Снэпшот тесты
  47. 47. Unit-тестирование $ npm install --save-dev jest-cliУстановка JEST: Создание папки с будущими тестами: $ mkdir __tests__ Создаём сам тест: Запуск: $ npm test
  48. 48. Интеграционное тестирование 49 • Cucumber.io • Calabash (calaba.sh)
  49. 49. Snapshot тестирование 50 • Snapshot (Fastlane) • Xcode 7.0 (встроенные тулз)
  50. 50. Активное сообщество Огромное количество готовых компонентов, которые активно развиваются и обновляются https://js.coach/react-native 51
  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. 52. Бонус 53 Если вы написали iOS-приложение, то 80 — 90% кода для Android уже готово 🎁
  53. 53. 54 Используем TabBar вместо TabBarIOS Портирование на Android 1/3
  54. 54. 55 Портирование на Android 2/3 Используем Navigator вместо NavigatorIOS Причем Navigator полностью кроссплатформенный.
  55. 55. 56 Портирование на Android 3/3 Всё остальное остаётся без изменений
  56. 56. — Если код запущен на платформе iOS, то импортируется IndexPage.ios.js Полезные штуки Умный Import — Если на платформе Android, то импортируется IndexPage.android.js 57 — Если файла с дополнительными расширениями нет, то IndexPage.js
  57. 57. Полезные штуки 58 Специфичный платформе код Можно также узнавать версию OS, в которой приложение работает
  58. 58. Полезные штуки Возможность использования JS-библиотек от nodejs и frontend разработчиков Несколько примеров Moment.js Underscore.js URI.js … 59
  59. 59. • Мы получили готовое нативное iOS приложение за одну неделю (за 2 недели оно было доступно в App Store) • Сэкономили сотни тысяч рублей на разработку таких же приложений на Objective-C и JAVA (и возможно миллионы на поддержку и развитие) 60 В итоге Используя React Native
  60. 60. Спасибо

×