react-native

https://david-talks.netlify.com/react-native/index.html

О чем доклад

1. Что такое React Native
2. Как работает React Native
3. С чего начать
4. Проблемы React Native
5. Пару слов о будущем

WTF react-native?

Как facebook позиционирует эту технологию

Кроссплатформенность

• Xamarin (Использует Mono, нужны знания С#)
• (уже в релиз версия, нужны знания Dart)
• (работает в связке с Angular & Vue)
• React Native (стремительно развивается, JavaScript)

плюсы +

• Повторное использование кода между платформами iOS/Android/Web
• Нет нужды в командах нативных разработчиков
• Кросплатформенность и скорость разработки
• Низкий порог вхождения
• Реальные нативные приложения (никаких web-view)
• Уровень развития комьюнити

Где не применим react native

• Игры
• Сложные анимации

Простое приложение

Не много истории

Первый публичный релиз* 4 года назад react-native@0.0.5

На данный момент приблизились к версии

Когда релиз?

Специфика платформ

• *.ios.js
• *.android.js
• Platform.select({ ios: 'iOS', android: 'Android' });
• Platform.OS === 'android'

Сторонние библиотеки

Делятся на два типа

1. Нативные модули
2. JS-only модули

JavaScript Engine

По умолчанию используется JavaScriptCore

Но для Android платформы:

• Hermes
• react-native-v8

Hermes engine

Выгода Hermes

C чего начать

1. Официальная документация (api, guides*)
2. (Tutorials\Videos)
3. Курсы по React Native платные и не очень 🧟
4. Различные доклады на youtube.com

Среды разработки

• XCode
• Android Studio

Лучший способ что бы начать

What do you dislike about React Native? #104

Если кратко то претензий очень много

1. Upgrading requires a lot (too much?) effort
2. Debugging exceptions
3. Support of React Native team
4. Performance, performance, performance
5. ...

The last dislike thread issues#134

Обновления

Три платформы = три причины получить major update

Во многого проблемы из-за недостаточной информации. RN upgrade guide как diff tool

Иногда придётся изучать issues, чтобы найти решения для миграции

Ахиллесова пята*

Асинхрощина

1. setTimeout
2. setInterval
3. requestAnimationFrame
4. requestIdleCallback
5. setImmediate

Когда приложение в фоне ваши таймеры не будут исполняться
Решение: использовать нативный модуль react-native-background-timer

Metro bundler

2+ года не могут добавить поддержку symlink
Решение: выбрасываем metro и используем haul (webpack под капотом)

Monorepo

Не поддержки symlink скажи пока lerna monorepo *

• Нативные модули не должны "всплывать" в родительский node_modules
• react-redux "магические" импорты
• Ошибка: duplicate-react

Navigation

Два лидера

• wix/react-native-navigation
• react-navigation

Team: We have our own native navigation system at Facebook that is not open source ...

Состояние экосистемы

APPLE

Sign code

iOS

• Сертификаты и профили в вашей команде
• Fastline + react-native (сборка и публикация)

Android

• Публикация в Google Play Store

Discussions and Proposals

• Official Docker
• Lean Core
• Auto linking
• Turbo Modules

Выводы

• Шаринг кода между платформами
• Инкапсуляция кода над платформами
• Нативные модули пишутся только когда это единственный вариант
• Все еще есть куда расти и развиваться

Вопросы ?