ReactNative и что-то остальное – Telegram
ReactNative и что-то остальное
160 subscribers
80 photos
6 videos
2 files
104 links
если тебе не больно, значит ты что-то делаешь не правильно

что-то о React Native и в целом о разработке

буду рад подпискам и донатам
https://boosty.to/mbhusty
https://www.patreon.com/mbhusty

Лс: @mbhusty
Download Telegram
всех причастных с пятницей и хороших выходных

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

⚡️ReactNative и что-то остальное
😁5
ReactNative и что-то остальное
Время опроса что будем смотреть?
Здрасте!
Набросал небольшой опрос по следующей теме для разбора

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

удачной недели 😘
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Всем привет 👋

Очень полезные результаты бэнчмарка для выбора подходящей либы
Forwarded from React Native World
Принес вам свежий бенчмарк производительности самых популярных библиотек для стилизации в React Native!

Задача бенчмарка — измерить среднее время, которое требуется для рендеринга 1000 компонентов View с одинаковыми стилями. За базовый ориентир взят стандартный StyleSheet.


const Native = () => {
return (
<View style={{ display: "flex", flexDirection: "row" }}>
{new Array(COUNT).fill(0).map((_, i) => (
<View key={i} style={styles.styledView} />
))}
</View>
);
};

const styles = StyleSheet.create({
styledView: {
borderColor: "red",
borderWidth: 2,
padding: 5,
},
});


Первое место с результатом, наиболее близким к нативному, заняла библиотека Unistyles V2.

Я рекомендую присмотреться к этой библиотеке, если вы еще не используете ее или планируете начать новый проект.
🔥5
ReactNative и что-то остальное
Время опроса что будем смотреть?
Ну чтож, вы выбрали поразбираться в тестировании 👧

Пойду готовить материал, скоро будет новый пост
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥51
с псевдопятницей, коллеги 😭

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

⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍1😁1
Здрасте!

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

Из представленных докладов жду выступление Евгения на тему сode split push.
Слышал в одном из подскастов как они релизят апдейты приложения без загрузки новой сборки в стор

ссылка на регистрацию - https://sbermarket.timepad.ru/event/3074131/

upd: запись митапа будет доступна на ютуб канале купер.тех

⚡️ReactNative и что-то остальное
👍4
всех с пятницей, идите пить пиво, я отпустил 💃

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

⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
Contribution to the Future
Help me become even better! Your donation supports me efforts to create new and exciting content. Thank you for believing in me 🫶
Пока с переменным успехом занимаюсь материалом по тестированию, хотел вас спросить:

Вы пользуетесь нейронками при разработке?

А спрашиваю вот почему.

Пару недель назад поставил рядом с VSCode, новый модный молодежный Cursor и поймал себя на мысли, что я совсем перестаю думать, и почти все уже перекладываю на запрос в чатик с ИИ.

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

Было ли у вас так же?

⚡️ReactNative и что-то остальное
🌚5💯1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁7
Всем привет!

Сегодня поговорим про 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 и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
19🔥4
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
Forwarded from React Native World
🦄 Вышел Unistyles 3.0 и это новое слово в стилизации для React Native

Используя преимущества новой архитектуры, такие как интеграция с Fabric и взаимодействие с Shadow Tree, разработчики смогли перенести большую часть работы со стилями на сторону C++ и избежать ре-рендеров, а также дополнительных обёрток компонентов на стороне JS.

Как это работает?

Вместо того чтобы вычислять стили в рантайме и применять их через ре-рендер компонента с новым объектом стиля, Unistyles использует совершенно иной подход:

1️⃣ Babel-плагин анализирует стили на этапе сборки и конвертирует код в формат, подходящий для работы с ShadowNode. Примеры трансформаций можно найти в документации.

2️⃣ На основе анализа генерируются:

— C++ представление стилей (StyleSheetRegistry),
— биндинги для View (ShadowRegistry), к которым эти стили применяются.

Внутри приложения вы всё так же работаете с объектом StyleSheet как с обычным JS-объектом. Но магия начинается, когда стили нужно изменить!

Что происходит при изменении стилей?

Например, при:
— нажатии на кнопку которая вызывает изменения стиля,
— переключении в dark mode,
— обновлении настроек Accessibility.

Unistyles поддерживает 14 различных событий, которые вызывают обновление стилей. После получения события библиотека вычисляет новое состояние стилей и, благодаря ShadowRegistry, применяет их напрямую на нативной стороне, без ре-рендеров.

Полный список всех новых функций можно посмотреть на официальном сайте.

* важно новый unistyles работает только на RN 0.76+ и только с новой архитектурой

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

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

⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
💯4👾21