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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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)
• Сэкономили сотн...

Спасибо

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

MBLT15: Ivan Kozlov, Aviasales by e-Legion 865 views
MBLTDev: Alexander Dimchenko, Brigh... by e-Legion 531 views
MBLTDev15: Konstantin Goldshtein, M... by e-Legion 527 views
MBLT16: Andrey Bakalenko, Sberbank ... by e-Legion 837 views
MBLT16: Dmitriy Geranin, Afisha Res... by e-Legion 689 views
MBLTDev: Evgeny Lisovsky, Litres by e-Legion 580 views

Top clipped slide

1 of 60 Ad

1 of 60 Ad