Ничего не понятно, но очень интересно 🛑
Turbo modules в React Native

Всем привет!
Хочу начать с того, что к этому материалу я подбирался уже раз 30 за последнее время.
Все ссылки связанные в Turbo modules в гугле фиолетовые на несколько страниц вперед)
Перелопатил кучу инфы, что бы самому понять что это такое и зачем, а теперь готов самым главным поделиться с вами 🔔

Итак погнали сначала немного теории.

В чем разница между Native Modules и Turbo Modules?

1. Меньше накладных расходов: Благодаря новому подходу передачи данных через JSI накладные расходы на сериализацию и десериализацию данных значительно снижены.

2. Мгновенная инициализация: В отличие от старых модулей, Turbo Modules не загружаются заранее в приложении, что уменьшает время его загрузки.

3. Синхронные вызовы: Turbo Modules могут выполнять синхронные вызовы, что раньше было невозможно в старой архитектуре с использованием моста.

Выше я выделил на мой взгляд основные и решающие пункты, но на самом деле там есть еще что сравнить.

Если подсумировать, то Turbo Modules это способ, который позволяет JS коду и нативным возможностям (например, камере, геолокации) работать быстрее и более эффективно. Turbo Modules делают это за счёт прямого и быстрого взаимодействия, не тратя много времени на лишние "переговоры" между JavaScript и нативным кодом, как это было раньше.

Тут вроде все понятно. Едем дальше.

Несколько постов выше, я попросил вас накинуть идей, которые помогут показать работу с TM на практике.

Было несколько вариантов. Для демонстрации я выбрал работу с ориентацией экрана устройства.

Летсгоу

1. Открываем терминал и выполняем

npx create-react-native-library@latest <module-name>

2. Далее нужно будет ответить на насколько вопросов. Я выбрал:

Turbo module with backward compat
Kotlin & Objective-C
Vanilla

3. Все у нас готова структура проекта. После выполнения всех операций, в терминале вы увидите предложение выполнить

yarn 

для установки всех необходимых зависимостей. Но при попытке выполнить, обнаружите ошибку, которая будет не оч информативная.
Не переживайте, я все пофиксил)

проблема решается созданием пустого файла yarn.lock в корне проекта

4. По умолчанию у вас будет пример с умножением двух чисел и выводом результата на экран

5. Смотрим структуру:

example - это проект с тестовым приложением в котором будет запущен наш модуль

папки ios/android как раз для кода модуля для разных платформ

src - файлы в которых мы описываем интерфейс для общения js и нативного кода

Я подумал что нет смысла выкладывать куски кода прям тут, если их всегда можно посмотреть в гите. Да и тема немного про другое

К тому же сами методы работы с ориентацией для ios/android просто гуглил и уже на месте подкручивал.

Скажу лишь, что после внесения всех изменений:

- для ios заходим в example/ios и выполняем (причем меня удивило, что именно на этом этапе запускается Codegen для генерации методов)

RCT_NEW_ARCH_ENABLED=1 arch -x86_64 pod install

- для android вроде ничего дополнительно не потребовалось, проект собрался и запустился без проблем

дальше никакой магии (в корне проекта)

yarn example ios / yarn example android

Ну и как бы все.

Наш Turbo Module создан, подключен в проект и работает.

Вот ссылки на гит репу, если захотите проверить - https://github.com/mbhusty/rn-turbo-module/

👍 Пишите ваши вопросы в комменты, я наверняка что-то даже из основного упустил, но не хотелось писать многобукв

❤️ Ставьте реакции, шерьте, потому что реально много времени потратил на эту тему

⭐️ Подписывайтесь на GH и ставьте звезды, давайте и там поднимем активность + скоро я открою репозиторий с приложением PlanB

⚡️ReactNative и что-то остальное

Здрасте!
Набросал небольшой опрос по следующей теме для разбора

Голосуем типа до четверга, а там пойду готовить материал

удачной недели 😘

Ну чтож, вы выбрали поразбираться в тестировании 👧

Пойду готовить материал, скоро будет новый пост

с псевдопятницей, коллеги 😭

#пятничный_мем

⚡️ReactNative и что-то остальное

всех с пятницей, идите пить пиво, я отпустил 💃

#пятничный_мем

⚡️ReactNative и что-то остальное

сэйм вайб 😱

с пятницей, господа 🕺

#пятничный_мем

⚡️ReactNative и что-то остальное

Уже сегодня, 20 ноября, начало в 19:00!

Не пропустите 🥳

Всем привет!

Сегодня поговорим про unit-тесты и интеграционные тесты в RN.

Я решил для начала пройтись по тому что существует в этой теме, а потом во что-то конкретное можно и углубиться 🤔

Итак, погнали чуть по теории

Unit-тесты vs интеграционные тесты

Unit-тесты: проверяем работу отдельных функций или компонентов в изоляции.

Пример: кнопка вызывает нужный callback??

Интеграционные тесты: проверяем взаимодействие частей приложения.

Пример: нажатие на кнопку отправляет форму.

Что можем использовать для тестирования функционала?
Jest/RTL/Detox

1. Jest
Jest — стандартный инструмент для unit-тестов в React Native. Быстрый, простой в настройке и с богатым функционалом.

Как настроить:
Jest идет по умолчанию в новых проектах React Native. Достаточно добавить тесты в папку

__tests__

Пример теста:

import { sum } from './utils';

test('sum adds numbers correctly', () => {
  expect(sum(1, 2)).toBe(3);
});

Запуск тестов:

npm test
# или
yarn test

Jest автоматически найдет тесты и запустит их.
После выполнения тестов увидим сводку с результатами:

PASS  __tests__/example.test.js
✓ sum adds numbers correctly (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.543s

2. React Testing Library (RTL)
Этот инструмент позволяет тестировать React-компоненты так, как их видит пользователь.

Установите библиотеку:

npm install --save-dev @testing-library/react-native

Пример теста:

import { render, fireEvent } from '@testing-library/react-native';
import MyButton from './MyButton';

test('button triggers callback on press', () => {
  const onPressMock = jest.fn();
  const { getByText } = render(<MyButton onPress={onPressMock} noscript="Click me" />);

  fireEvent.press(getByText('Click me'));
  expect(onPressMock).toHaveBeenCalledTimes(1);
});

Запуск тестов:

npm test

а если нам надо запустить какой-то конкретный тест, то добавляем .only

test.only('кнопка вызывает onPress', () => {
  expect(true).toBe(true);
});

3. Detox
Detox — это про интеграционные тесты. Он проверяет, как работает ваше приложение "целиком" на эмуляторе или реальном устройстве.

Как установить:

npm install -g detox-cli
npm install detox --save-dev

Пример теста:

describe('Login Flow', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('should log in successfully', async () => {
    await element(by.id('username')).typeText('testuser');
    await element(by.id('password')).typeText('password123');
    await element(by.id('loginButton')).tap();
    await expect(element(by.id('welcomeMessage'))).toBeVisible();
  });
});

Запуск всех тестов:

detox test

Если нужно запустить отдельно на ios/android

detox test -c ios.sim.debug 
detox test -c android.emu.debug

//или запуск конкретного теста
detox test e2e/login.test.js

Результат:

detox[42012] INFO:  [test.js] Running tests...
detox[42012] INFO:  Login Flow
detox[42012] INFO:    ✓ should log in successfully(1.2s)
detox[42012] INFO:  Tests successful!

По верхам прошлись, теперь давайте выбререм какой из инструментов будем ковырять:

Jest - 👍 | RTL - ⚡️| Detox - 👋

Или свое в комменты 👇


⚡️ReactNative и что-то остальное

Коллеги, с пятницей вас 😠

#пятничный_мем

⚡️ReactNative и что-то остальное

и это не вопрос.
всех с пятницей, наконец 💀

#пятничный_мем

⚡️ReactNative и что-то остальное