Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 60 Ad

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

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

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

More from Ontico (20)

Advertisement

Recently uploaded (19)

Успешный кейс использования 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. Спасибо

×