Время опроса ⚡ что будем смотреть?
Final Results
63%
Тестирование приложения RN. Подключим что-то и попишем тестики
43%
Ускорение сборки приложения. Попробуем сравнить результаты
0%
свое в комменты
🤔1
ReactNative и что-то остальное
Время опроса ⚡ что будем смотреть?
Здрасте!
Набросал небольшой опрос по следующей теме для разбора
Голосуем типа до четверга, а там пойду готовить материал
удачной недели😘
Набросал небольшой опрос по следующей теме для разбора
Голосуем типа до четверга, а там пойду готовить материал
удачной недели
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Всем привет 👋
Очень полезные результаты бэнчмарка для выбора подходящей либы
Очень полезные результаты бэнчмарка для выбора подходящей либы
Forwarded from React Native World
Принес вам свежий бенчмарк производительности самых популярных библиотек для стилизации в React Native!
Задача бенчмарка — измерить среднее время, которое требуется для рендеринга 1000 компонентов View с одинаковыми стилями. За базовый ориентир взят стандартный StyleSheet.
Первое место с результатом, наиболее близким к нативному, заняла библиотека Unistyles V2.
Я рекомендую присмотреться к этой библиотеке, если вы еще не используете ее или планируете начать новый проект.
Задача бенчмарка — измерить среднее время, которое требуется для рендеринга 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
🔥5❤1
Здрасте!
Пока много работы и не успеваю добраться до материала, но принес вам интересный митап.
Из представленных докладов жду выступление Евгения на тему сode split push.
Слышал в одном из подскастов как они релизят апдейты приложения без загрузки новой сборки в стор
ссылка на регистрацию - https://sbermarket.timepad.ru/event/3074131/
upd: запись митапа будет доступна на ютуб канале купер.тех
⚡️ReactNative и что-то остальное
Пока много работы и не успеваю добраться до материала, но принес вам интересный митап.
Из представленных докладов жду выступление Евгения на тему сode split push.
Слышал в одном из подскастов как они релизят апдейты приложения без загрузки новой сборки в стор
ссылка на регистрацию - https://sbermarket.timepad.ru/event/3074131/
upd: запись митапа будет доступна на ютуб канале купер.тех
⚡️ReactNative и что-то остальное
👍4
Cursor
Built to make you extraordinarily productive, Cursor is the best way to code with AI.
Пока с переменным успехом занимаюсь материалом по тестированию, хотел вас спросить:
Вы пользуетесь нейронками при разработке?
А спрашиваю вот почему.
Пару недель назад поставил рядом с VSCode, новый модный молодежный Cursor и поймал себя на мысли, что я совсем перестаю думать, и почти все уже перекладываю на запрос в чатик с ИИ.
Да, это конечно все экономит кучу времени по итогу, не нужно писать руками бойлерплэйт код, хорошо работает дополнение и небольшие фиксы. Но с каждым днем начинаю больше расчитывать на результат ИИ чем на себя
Было ли у вас так же?
⚡️ReactNative и что-то остальное
Вы пользуетесь нейронками при разработке?
А спрашиваю вот почему.
Пару недель назад поставил рядом с VSCode, новый модный молодежный Cursor и поймал себя на мысли, что я совсем перестаю думать, и почти все уже перекладываю на запрос в чатик с ИИ.
Да, это конечно все экономит кучу времени по итогу, не нужно писать руками бойлерплэйт код, хорошо работает дополнение и небольшие фиксы. Но с каждым днем начинаю больше расчитывать на результат ИИ чем на себя
Было ли у вас так же?
⚡️ReactNative и что-то остальное
🌚5💯1
ReactNative и что-то остальное
Пока с переменным успехом занимаюсь материалом по тестированию, хотел вас спросить: Вы пользуетесь нейронками при разработке? А спрашиваю вот почему. Пару недель назад поставил рядом с VSCode, новый модный молодежный Cursor и поймал себя на мысли, что…
Please open Telegram to view this post
VIEW IN TELEGRAM
ReactNative и что-то остальное
Здрасте! Пока много работы и не успеваю добраться до материала, но принес вам интересный митап. Из представленных докладов жду выступление Евгения на тему сode split push. Слышал в одном из подскастов как они релизят апдейты приложения без загрузки новой…
Уже сегодня, 20 ноября, начало в 19:00!
Не пропустите🥳
Не пропустите
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Всем привет!
Сегодня поговорим про unit-тесты и интеграционные тесты в RN.
Я решил для начала пройтись по тому что существует в этой теме, а потом во что-то конкретное можно и углубиться🤔
Итак, погнали чуть по теории
Unit-тесты vs интеграционные тесты
Unit-тесты: проверяем работу отдельных функций или компонентов в изоляции.
Пример: кнопка вызывает нужный callback??
Интеграционные тесты: проверяем взаимодействие частей приложения.
Пример: нажатие на кнопку отправляет форму.
Что можем использовать для тестирования функционала?
Jest/RTL/Detox
1. Jest
Jest — стандартный инструмент для unit-тестов в React Native. Быстрый, простой в настройке и с богатым функционалом.
Как настроить:
Jest идет по умолчанию в новых проектах React Native. Достаточно добавить тесты в папку
Пример теста:
Запуск тестов:
Jest автоматически найдет тесты и запустит их.
После выполнения тестов увидим сводку с результатами:
2. React Testing Library (RTL)
Этот инструмент позволяет тестировать React-компоненты так, как их видит пользователь.
Установите библиотеку:
Пример теста:
Запуск тестов:
а если нам надо запустить какой-то конкретный тест, то добавляем .only
3. Detox
Detox — это про интеграционные тесты. Он проверяет, как работает ваше приложение "целиком" на эмуляторе или реальном устройстве.
Как установить:
Пример теста:
Запуск всех тестов:
Если нужно запустить отдельно на ios/android
Результат:
По верхам прошлись, теперь давайте выбререм какой из инструментов будем ковырять:
Jest - 👍 | RTL - ⚡️| Detox - 👋
Или свое в комменты 👇
⚡️ReactNative и что-то остальное
Сегодня поговорим про 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
1⚡9🔥4
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
Используя преимущества новой архитектуры, такие как интеграция с 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 и что-то остальное
Всем привет! Сегодня поговорим про unit-тесты и интеграционные тесты в RN. Я решил для начала пройтись по тому что существует в этой теме, а потом во что-то конкретное можно и углубиться 🤔 Итак, погнали чуть по теории Unit-тесты vs интеграционные тесты…
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - callstack/react-native-testing-library: 🦉 Simple and complete React Native testing utilities that encourage good testing…
🦉 Simple and complete React Native testing utilities that encourage good testing practices. - callstack/react-native-testing-library
🔥2
ReactNative и что-то остальное
По количеству реакций был выбран React Testing Library (RTL) Скоро ждите пост по этому инструменту 😘
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6