Loóna Talks: React Native | LIVE | RU

18 мая, среда · 17:00-20:00 CET

Команда приложения для сна и расслабления Loóna, победители Apple Design Award 2021 и Google Best App 2020, проводит бесплатный митап для разработчиков React Native.

Темы и спикеры:

🧑‍🚀Сергей Гончар, Co-Founder, Tech, Loóna, ex-Facebook, ex-MSQRD: React Native and Unity3D: Add another dimension to your app.

🧑‍🚀 Артем Нестеренко, Software Engineer, Loóna: Leveraging the native side of React Native.

🧑‍🚀Настя Яскевич, Software Engineer, Loóna: Loóna сontent delivery - On-Demand Resources and Android Asset Packs integration with React Native.

🧑‍🚀 Юра Чучвага, Software Engineer, Loóna: 10 ways to optimize animations in React Native.

Зарегистрироваться можно по ссылке: https://ru.surveymonkey.com/r/M3QMN9D

UPD: кому лень проходить регистрацию, ссылка на прямую трансляцию https://youtu.be/a7MGdPSiKl4

Алгоритмы для фронтенд разработчиков простыми словами

Автор данной статьи делится с вами пояснением работы популярных алгоримов и темой оценки сложности алгоритмов и Big O нотации.

@react_native_info

Как уменьшить размер компонента React: 3 профессиональных приема

Автор данной статьи делится проффесиональными приемами и подходами к написанию кода, для улучшения читаемости и восприятия кода, советуем к протчтению как новичкам так и проффесионалам.

P.S. если вы соблюдаете данные практики и ввели их себе в привычку то можете расценивать себя как крепкого мидла и выше.

@react_native_info

React Buddy – плагин для Intellij IDEA, который поможет вам разрабатывать приложения на основе React.js, предоставляя визуальные инструменты и помощь в написании кода.

@react_native_info

Как снимать логи с устройств на Android и iOS: разбираемся с инструментами

Автор данной статьи познакомит вас с различными инструментами для просмотра логов на iOS и Android.

@react_native_info

RuStore открыл публикацию приложений для разработчиков-физлиц

Любой автор может загрузить свое приложение в российский магазин приложений.
Физические лица получили возможность публиковать приложения в RuStore. Для загрузки разработчику требуется пройти регистрацию и верификацию — это необходимо для безопасности пользователей.

@react_native_info

Ребята из Software Mansion, те самые разработчики, которые сделали такие вещи, без которых трудно представить современный React Native (Expo, React Native Gesture Handler, React Native Reanimated, React Native Screens, React Navigation), сейчас занимаются новой крутой фичей Shared Element Transition, реализованной с помощью reanimated и React Native Screens.

Думаю что получится либа, которая умеет интегрироваться с React Navigation. Какие у вас варианты?

@react_native_info

Пользователь Twitter (запрещен в РФ) с ником @hanno_jg развлекается портированием физического движка C++ Box2D в react-native JSI-модуль с использованием shopify/react-native-skia для рендеринга.

Цель: создавать простые 2D-игры, используя Skia с отличным физическим движком.

@react_native_info

Компания Facebook (запрещена в РФ) открыла исходные тексты инструментария memlab, предназначенного для анализа срезов состояния динамически распределяемой памяти (кучи), определения стратегии оптимизации работы с памятью и выявления утечек памяти, возникающих при выполнении кода на языке JavaScript. Код открыт под лицензией MIT.

Фреймворк был создан для разбора причин большого потребления памяти при работе с web-сайтами и web-приложениями.

Например, с помощью memlab проводился анализ потребления памяти при использовании новой версии сайта Facebook.com, который позволил выявить утечки, приводившие к аварийному завершению браузера на стороне клиента из-за исчерпания свободной памяти.

Причинами утечек памяти при выполнении JavaScript-кода может быть наличие скрытых ссылок на объекты, из-за которых сборщик мусора не может высвободить занимаемую объектом память, неразумное кэширование значений или реализация бесконечной прокрутки без вытеснения старых элементов списка.

Основные возможности memlab:
✓ Выявление утечек памяти в браузере. Memlab позволяет автоматически сравнивать слепки состояния динамической памяти, выявлять утечки памяти и агрегировать результаты.

✓ Объектно-ориентированный API для перебора кучи, позволяющий воплощать собственные алгоритмы выявления утечек и реализовывать системы анализа слепков состояния кучи. Поддерживается анализ кучи для браузеров на основе движка Chromium, а также для платформ Node.js, Electron и Hermes.

✓ Интерфейс командной строки и API для поиска возможностей по оптимизации использования памяти.

✓ Система assert-ов для Node.js, позволяющая создавать unit-тесты и выполнять программы на базе Node.js для создания срезов собственного состояния, проверки своей памяти или написания расширенных assert-проверок.

@react_native_info

Очень красивая и интерестная анимация сделанная на react-native.
Автор сделал две реализации, первая с использованием react-native-skia, вторая с использованием react-native-noscript.

Исходный код можно посмотреть на гит

@react_native_info

Голосовое управление для react-native приложения, реализовано с помощью react-native-voice/voice, выглядит очень эффектно, реализация достаточно примитивная и простая.

Реальный кейс:
В режиме разработки можно делать reload приложения, если распознать матеренные слова 😁

Исходный код можно посмотреть на гит

@react_native_info

Remotion — это фреймворк для создания видео с помощью React.js!

Да-да, вам не показалось, теперь крутые и стильные видео можно верстать на реакте!

Также если интерестно, то можно посмотерть уже готовые use-case: remotion.dev/showcase

@react_native_info

Вышла новая бета-версия TypeScript v4.9, в которой представлен новый оператор satisfies (в переводе с английского "удовлетворяет").

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

@react_native_info

Привет товарищи! Что-то рускоговорящем сегменте совсем нету никаких эвентов для react-native, есть у кого-то желание организивать что-то интерестное в формате хакатона или собраться с докладами о своих достижениях в решении интерестных кейсов и сложных задач в react-native, да и просто поделиться опытом?

Предлагайте варианты в коментарии и высказывайте свое мнение по этому поводу 😉

@react_native_info

Под капотом у Mobx. Пишем свою реактивную библиотеку с нуля

Автор данной статьи описывает процесс написания копии Mobx с нуля, с интеграцией для React через собственно написанный HOC observer. В конце у вас будет общее понимание реактивности, которое поможет в самостоятельном осмыслении не только Mobx, но и других реактивных библиотек и фреймворков.

@react_native_info

Ребята из Software Mansion готовят новый релиз reanimated2, где будут представлены новый хуки useAnimatedKeyboard и useFrameCallback.

Хуки уже доступны в @next версии пакета и их может попробовать каждый желающий.
Стоит обратить внимание на то что для Android хук useAnimatedKeyboard помечен как эксперементальная фича и иногда может работать нестабильно.

useAnimatedKeyboard будет предоставлять доступ к SharedValue переменным height и state:
✓ height – хранит текущее значение высоты клавиатуры;
✓ state – хранит одно из значений енама { CLOSED, OPEN, CLOSING, OPENING };

useFrameCallback позволяет запускать фрагмент кода при каждом обновлении фрейма.

У данного хука есть два аргумента, callback функция и autostart флаг.
При каждом вызове вашей callback функции в нее будут приходить следущие аргументы:
✓ timestamp: number – системное время (в миллисекундах), когда был отрендерен последний кадр;
✓ timeSincePreviousFrame: number | null – время (в миллисекундах) с момента последнего кадра. Это значение будет null в первом кадре после активации хука. Начиная со второго кадра должно быть ~16 мс на 60 Гц или ~8 мс на 120 Гц дисплеях (когда нет задержки);
✓ timeSinceFirstFrame: number – время (в миллисекундах) с момента последнего вызова вашей callback функции;

Хук возвращает объект FrameCallback, для управления состоянием вашей callback функции и имеет следущие параметры:
✓ setActive: (isActive: boolean) => void – начинает/останавливает прослушивание обновлений кадров;
✓ isActive: boolean – указывает, активен ли обратный вызов (true) или нет (false);
✓ callbackId: number – уникальный идентификатор функции обратного вызова;

В видео реализован пример из документации к useAnimatedKeyboard

@react_native_info

Интересный кейс анимации на react-native с использованием useAnimatedSensor из reanimated2.

Исходный код можно посмотреть на гит

@react_native_info

Skia — высокопроизводительная 2D графика для React Native

Автор данной статьи кратко описывает основные возможности Skia в react-native. В статье очень много примеров кода с картинками того что должно получиться.

@react_native_info