Меня зовут Александр Чернов, я фронтенд-разработчик в KODE и я использую React Native в разработке мобильных приложений уже более семи лет. Сейчас расскажу вам, как мы у нативных разработчиков хлеб отбирали.
Мир React долгое время делился на две «сферы»: серверный рендеринг (SSR) и клиентский рендеринг (CSR). Приложения обычно подгружали часть контента с сервера для быстрого старта, а затем загружали большой бандл JS для полного интерактивного опыта на клиенте. Однако это приводило к дублированию логики и дополнительной головной боли при оптимизации.
Сегодня громко обсуждаются React Server Components (RSC) — новый подход к рендерингу компонентов, при котором логика, которая не должна выполняться на клиенте, может быть полностью «вырезана» до отдачи готовой HTML-структуры. Это обещает уменьшить бандлы, улучшить производительность и упростить архитектуру.
Next.js 13 — фреймворк, который уже предлагает нативную поддержку RSC и новые возможности по маршрутизации, загрузке данных и оптимизации. Почему это важно и как начать?
React v19 теперь доступен на npm!
В нашем руководстве по обновлению React 19 мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 19. В этом посте мы расскажем о новых возможностях React 19 и о том, как их можно использовать.
Начнем, пожалуй, с азов. Что есть кроссплатформенная разработка? Такая, которая не требует от вас знаний нативного кода и позволяет одному разработчику делать сразу два приложения. «Вау! Круто!» — скажет любой предприниматель, смекнув, что может нехило сэкономить. Но так ли это на самом деле? Давайте разберемся.
Лет 7 назад наш техлид разглядел в только что появившемся React Native (RN) огромный потенциал. Поэтому с его легкой руки мы начали делать кроссплатформенные приложения на нем, когда это еще не было мейнстримом.
С тех пор фреймворк зарекомендовал себя как один из наиболее перспективных инструментов для разработки. Он был создан Facebook (Meta), чтобы писать нативные мобильные приложения для iOS и Android при помощи JavaScript.
Чтобы не быть голословными о его популярности, покозыряем именами: Facebook, Instagram, Bloomberg, Airbnb, Tesla, SoundCloud Pulse, UberEATS и Shopify написаны на React Native. Какие же у него сильные стороны?
Typescript - сложный язык, но большинству разработчиков не нужно знать все его тонкости, чтобы быть эффективными в своей работе.
Это то, что я считаю минимальным набором знаний по тайпскрипту для эффективной разработки продукта на React.
Основные принципы, которые мы здесь используем:
Типизируйте входные данные, предсказывай результат
Минимизируйте шум в кодовой базе
Ошибки должны отображаться как можно ближе к коду, который их вызвал
Из этой статьи вы узнаете, как эффективно организовать очень важную часть разработки на React Native - работу со стилями и ресурсами для создания адаптивных и доступных интерфейсов под три платформы: iOS, Android и Web, и нужны ли для этого библиотеки. Также в целом обсудим особенности верстки и проблемы производительности в рамках данного фреймворка.
Для работы с проектами существует куча редакторов кода и IDE (VSCode, NeoVim, SublimeText, WebStorm и т.д.). В данный момент наиболее популярны VSCode и Webstorm и у каждого есть свои плюсы и минусы. Webstorm является примером прекрасного IDE от компании JetBrains, где многие вспомогательные модули идут “из коробки”. К сожалению, сейчас нет возможности легально получить доступ к этому продукту гражданам России, поэтому многим приходится искать альтернативу. Такой альтернативой вполне может стать Visual Studio Code от компании Microsoft, который имеет открытую кодовую базу, полностью бесплатный и гибко настраиваемый под ваши нужды. В данной статье мы рассмотрим пример настройки рабочего пространства VSCode для комфортной работы с нашими проектами. Я покажу вам, какими расширениями я пользуюсь для лучшего удобства и продуктивности. Эти расширения я использую давно и они хорошо зарекомендовали себя, но возможно некоторые из них могут не подойти под ваш стиль работы и написания кода. Итак, начнем!
В предыдущей статье мы рассказали про использование беакон-маяков и технологии BLE в приложениях на React Native c помощью библиотеки React Native BLE. Теперь перейдем к более совершенному подходу для работы с маяками, — разработаем нативный модуль на iOS.
В прошлой статье мы уже обсудили, чем полезны беакон-маячки и технология BLE для бизнеса. Сегодня перейдем к практике и рассмотрим, как именно можно использовать iBeacon и BLE в React Native, а именно с помощью библиотеки React Native BLE.
После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.
В современных приложениях, особенно работающих с мультимедийным контентом, эффективное управление такими ресурсами, как изображения, имеет решающее значение для плавного пользовательского опыта. Amazon Simple Storage Service (S3) является популярным выбором.
Один из распространенных подходов к обеспечению безопасного доступа к ресурсам — использование предварительно подписанных URL-адресов. Эти URL-адреса предоставляют временный доступ к определенным ресурсам в корзине S3, позволяя контролировать доступ без ущерба для безопасности.
Хотя обычно предварительно подписанные URL-адреса генерируются на серверной стороне и предоставляются на фронтенд, бывают ситуации, когда необходимо обрабатывать предварительно подписанные URL-адреса непосредственно на фронтенде приложения React Native. Это может быть связано с различными причинами, такими как динамический контент, управление доступом для конкретных пользователей или необходимость тонкого управления доступом.
В этом руководстве мы шаг за шагом рассмотрим процесс предварительной подписи URL-адресов AWS S3 в приложении React Native.
Хотя документация AWS предоставляет исчерпывающие инструкции по предварительно подписанным URL-адресам, она может не предлагать конкретных инструкций по интеграции этой функциональности в приложение React Native. Документация AWS по предварительно подписанным URL-адресам
Давайте углубимся в то, как это сделать в нашем приложении React Native.
Предварительные условия
Учетная запись AWS: Вам нужна учетная запись AWS для доступа к сервисам Amazon S3. Если у вас ее нет, вы можете зарегистрироваться здесь.
Всем привет! На связи снова команда dev.family. Мы продолжаем разбирать тему интеграции Unity-проекта в приложение, написанное на React Native.
В предыдущей серии…
Мы начали с того, что поместили игру на Unity в наше приложение. Как это было, можно почитать в предыдущей статье. Но пока части кода не взаимодействуют друг с другом, значит, работа не закончена. У нас есть кнопка «Save Result». Под нее было бы неплохо написать логику, чтобы показать, что у нас получилось.
Спойлер: этим и не только займемся прямо сейчас.
Что будет дальше
Во второй части статьи мы возьмем текущую связку React Native + Unity и сделаем так, чтобы одна часть кода могла получать и обрабатывать сообщения с другой. И наоборот.
Продолжаем наше Unity-journey!
Предупреждение
В материалах статьи мы разобрали процессы работы над тестовым приложением. Это не панацея и не четкое указание, как именно нужно писать код. Но оно классно сработало для нас, и мы будем рады, если вдохновим вас на решение схожих задач в разработке.
Всем привет! На связи снова команда dev.family с весьма необычной темой. В этот раз поговорим об играх. А именно, как интегрировать Unity в React Native.
На самом деле, это очевидно, что на React Native игру не напишешь. Оно и не надо. Движков, позволяющих разрабатывать игры под разные платформы и операционных системы, будь то iOS или Android, macOS или Windows, — огромное множество. Есть среди Unity и Unreal Engine. Сегодня мы посмотрим, как использовать первый из них в кросс-платформенных мобильных приложениях.
Думаю, не стоит говорить, что сделать полноценно игру на Unity удобнее. Зачем тогда вообще нужна эта странная и непонятная интеграция?
Начнем с того, что игры могут иметь обширное меню и различный функционал. Допустим, встроенный мессенджер, большие настройки, — те же гильдии внутри игры и тд. Речь не идет об AAA играх по типу Genshin, а, скорее, о маленьких инди или подобных, где всю игру можно сделать отдельным приложением, а сами механики и сцены скинуть на юнити. Также юнити хорош не только в создании игр, но и использовании таких технологий как VR или AR, где можно использовать сцены, различные модели, коллизии этих моделей и другое. Тут схожая ситуация с той, где у нас есть отдельное приложение и мы делаем переход на экран с Unity проектом.
В данной статье мы разберём процесс создания React Native приложения для iOS с использованием SwiftUI и Realm на основе новой архитектуры. Особое внимание уделим основным шагам интеграции Turbo Modules и Fabric, а также тому, как эти инструменты повышают производительность и упрощают взаимодействие с нативным кодом.
Привет! Это снова команда dev.family. Мы продолжаем эксперимент по созданию приложения на React Native, которое будет работать как Telegram Web App.В предыдущей серии мы рассказали про особенности разработки веб-приложения на React Native с использованием react-native-web и моментах, в которых отходили от документации (весь код и детали процесса вы найдете в первой части);
Теперь перейдем к установке самого веб-приложения в Telegram-бот.
Всем привет! На связи команда dev.family, и мы вернулись с новым экспериментом. Хотим поделиться опытом разработки приложения на React Native для нескольких платформ и мессенджера, а именно – iOS, Android, Web и Telegram.
Разработчики давно пишут приложения под Web на React Native. Например, так работают Meta, Twitter (X) и Flipkart. Но для нашего кейса важен контекст, с которым можете столкнуться и вы. К нам пришел клиент, у которого уже было приложение под Android и iOS на React Native. Он захотел еще одну версию продукта – в формате Telegram Web App. Ранее мы работали c таким видом приложений для другого проекта, но так и не зарелизили его. Готовый прототип стал основой для разработки нового кейса.
Всем привет! На связи команда dev.family. В этой статье мы делимся кратким гайдом по установке Splash Screen в кросс-платформенное приложение, написанное на React Native, с поддержкой нескольких тем.
Splash screen — первый экран, который видят пользователи перед тем, как прогрузиться в основное приложение. Этот экран, пожалуй, лучший способ сделать название вашей аппки, да и в целом, ее всю более запоминающейся.
Но это не основная роль splash screen. Под ним, например, можно спрятать получение данных с API и прогрузку основного приложения. Мы так делаем, когда показываем лоадер на экране при загрузке тех же данных. Это позволяет улучшить UX и демонстрировать пользователю сразу готовое приложение. А как следствие — убрать лишний лоадер при первом открытии.
В этом кратком гайде мы разберем установку splash screen сразу для iOS и Android на фреймворке react-native с использованием библиотеки react-native-splash-screen.
React Native — отличный выбор для веб-разработчиков, имеющих опыт работы с React, которые хотят создать первое мобильное приложение.
Хотя у React и React Native много общего, между веб-платформой и нативными приложениями существуют некоторые различия. В этой статье освещаются наиболее распространенные ошибки и вопросы, с которыми сталкиваются разработчики при переходе с React на React Native.
⚛️ Адаптивная верстка на React Native
При разработке веб-приложений на React, браузер Chrome тратит много оперативной памяти. Это связано с тем, что для эффективного обхода Virtual Dom, используется JIT компилятор, наслаивающий более эффективные реализации скомпилированных JavaScript функций поверх интерпретируемой реализации. Это создает высокую сложность по памяти: нагрузка на GC возрастает кратно.
Избежать просадки производительности может использование движка Hermes из React Native. Однако, React Native не умеет работать с адаптивной версткой: из коробки есть Yoga Layout, реализующий только Flexbox.
Описание проблем, возникших при портировании классического React приложения в React Native можно прочитать в этой статье. Речь идет о поддержке различных форм факторов устройств, в том числе, Galaxy Fold
