React Native в продакшне
•
0 likes•272 views
Процесс разработки iOS и Android приложение на React Native
React Native в продакшне
- 1. React Native Успешный кейс использования в продакшне Евгений Федоров 1
- 2. Евгений Федоров и технический директор Пару слов о себе /eugene.feudorov 2 Сооснователь lookbuck.com
- 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.) 💩 Мобильная разработка 4
- 5. Learn once, write anywhere 5 React Native
- 6. Первый запуск 6 $ react-native init BigApp $ react-native run-ios $ react-native run-android Инициализация проекта: Структура стартового проекта React Native: Запуск приложения :
- 7. Определяемся с технологией 7 Для этого реализуем типичный экран приложения • Асинхронное получение JSON данных • Рендер Spinner’а (индикатора загрузки) • Рендер TableView
- 8. JSON — Spinner — TableView 8
- 9. 9 Сравним реализацию Асинхронное получение JSON и сериализация Objective-C React Native 1/3
- 10. 10 Сравним реализацию Рендеринг Spinner (Индикатор загрузки) Objective-C React Native 2/3
- 11. 11 Сравним реализацию Рендеринг TableView Objective-C React Native 3/3
- 19. Разработка на примере 📱 Список товаров Список луков Поиск 19
- 34. Готово 34
- 35. Анимации 35 1. Объявление анимации для компонента в render() 2. Запуск анимации
- 36. Анимации 36 2. Объявление анимации для компонента в render() 1. Интерполяция входящих значений
- 37. Tools 37 • Call Stack • Breakpoints • Perfomance Monitor • Profiler (CPU / Mem) • Inspector • Live Reload
- 38. Call Stack 38
- 39. Breakpoints 39
- 41. CPU Profiler 41
- 42. Inspector 42
- 43. 43 Live Reload
- 44. Тестирование • Unit-тесты • Интеграционные тесты • Снэпшот тесты
- 45. Unit-тестирование $ npm install --save-dev jest-cliУстановка JEST: Создание папки с будущими тестами: $ mkdir __tests__ Создаём сам тест: Запуск: $ npm test
- 46. Интеграционное тестирование 46 • Cucumber.io • Calabash (calaba.sh)
- 47. Snapshot тестирование 47 • Snapshot (Fastlane) • Xcode 7.0 (встроенные тулз)
- 48. Активное сообщество Огромное количество готовых компонентов, которые активно развиваются и обновляются https://js.coach/react-native 48
- 49. Ограничения ⚠ 3. Есть целые компоненты, которые работают только в одной из платформ StatusBarIOS, ActivityIndicatorIOS, ToolbarAndroid, … 2. У компонентов есть свойства, которые работают только в одной из платформ. <Image onError> только для iOS <Image overlayColor> только для Android 4. Может не быть готового UI-компонента, тогда придется самому писать Bridge (Javascript ↔ Objective-C | Swift | Java) Что как следствие сильно затормозит скорость разработки 49 1. Минимальные требования к версиям OS: Android 4.1 (API 16) + iOS 7+ …
- 50. Бонус 50 Если вы написали iOS-приложение, то 80 — 90% кода для Android уже готово 🎁
- 51. 51 Используем TabBar вместо TabBarIOS Портирование на Android 1/3
- 52. 52 Портирование на Android 2/3 Используем Navigator вместо NavigatorIOS Причем Navigator полностью кроссплатформенный.
- 53. 53 Портирование на Android 3/3 Всё остальное остаётся без изменений
- 54. — Если код запущен на платформе iOS, то импортируется IndexPage.ios.js Полезные штуки Умный Import — Если на платформе Android, то импортируется IndexPage.android.js 54 — Если файла с дополнительными расширениями нет, то IndexPage.js
- 55. Полезные штуки 55 Специфичный платформе код Можно также узнавать версию OS, в которой приложение работает
- 56. Полезные штуки Возможность использования JS-библиотек от nodejs и frontend разработчиков Несколько примеров Moment.js Underscore.js URI.js … 56
- 57. • Мы получили готовое нативное iOS приложение за одну неделю (за 2 недели оно было доступно в App Store) • Сэкономили сотни тысяч рублей на разработку таких же приложений на Objective-C и JAVA (и возможно миллионы на поддержку и развитие) 57 В итоге Используя React Native
- 58. Спасибо Приложение iOS — LOOKBUCK Сайт LOOKBUCK