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 позиционирует эту технологию

Build native mobile apps using JavaScript and React

A React Native app is a real mobile app

человеческий глаз с отражением логотипа facebook

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

плюсы +

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

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


            import React from "react";
            import { StyleSheet, View, Image, Text } from "react-native";

            const styles = StyleSheet.create({
              root: {
                backgroundColor: "#fff",
                flex: 1,
                justifyContent: "center",
                alignItems: "center"
              },
              eventPlaceText: {/**/},
              yearText: {/**/},
              image: {/**/}
            });

            const App = () => {
              return (
                <View style={styles.root}>
                  <Image style={styles.image} source={require("./0.png")} />
                  <Text style={styles.eventPlaceText}>ООО «Апсилон ай-ти»</Text>
                  <Text style={styles.yearText}>2019</Text>
                </View>
              );
            };

            export default App;

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

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

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

Когда релиз?

шутка про версионирование в реакте
es2015+
➡️
Metro Bundler
(http port: 8081)
➡️
js
➡️️
Chrome
WebSockets
↔️️

Отладка

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

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


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

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

JavaScript Engine

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

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

Hermes engine

Выгода Hermes

C чего начать

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

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

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

С места в карьер (aka Expo)

  1. https://snack.expo.io/
  2. https://expo.io/top
  3. react-native-unimodules

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

Monorepo

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

Очень
понятные
ошибки

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

Изящно реагировать при появлении клавиатуры

или ужасный KeyboardAvoidingView

APPLE

Sign code

iOS

Android

Discussions and Proposals

Выводы

Вопросы ?