фреймворк для разработки нативных приложений
Я знаю, что на эту тему уже было сказано много, но настал мой черед. На JS я пишу больше 10 лет, так что терпел я достаточно. Мы называем это “джаваскрипт”, но под капотом скрываются три разные сущности: EcmaScript, среда исполнения и экосистема. Иногда о них стоит говорить отдельно, но сегодня я хочу обсудить всё сразу и объяснить, почему джаваскрипт — это плохой язык. Не в смысле “не работает”, а в смысле “заставляет страдать”.
Автор: разработчик и фаундер с опытом запуска стартапов в сферах туризма, HR tech, а сейчас — в музыкальной индустрии.
По образованию — Data Scientist, по призванию — Android-разработчик и продукт-менеджер.
Работал в крупных продуктах вроде X5 и Uzum, где впервые познакомился с Kotlin Multiplatform Mobile (KMM). Когда настал момент создавать прототип для своего музыкального стартапа, выбор был очевиден: я уже знал Kotlin, имел боевой опыт с KMM — и хотел быстро двигаться без лишних компромиссов.
Но KMM — не единственный путь.
На столе были и Flutter, и React Native, и даже классическая нативка.
В этой статье я расскажу:
Сегодня разберёмся, как сделать видеозвонки — ту самую фичу, без которой сложно представить современное общение в 2025 году, на примере реализации мессенджера.
Для этого мы познакомимся с WebRTC — технологией, которая позволяет приложениям устанавливать прямое соединение друг с другом для обмена аудио, видео и другими данными. Это мощный, но местами капризный инструмент, который требует понимания архитектуры, сигналинга и сетевых нюансов вроде NAT и ICE.
Это рецензия на русский перевод книги Fluent React: Build Fast, Performant, and Intuitive Web Applications автора Кумара Теджаса. Для тех разработчиков, кто следит за литературой по React, напомню, что в январе мы рецензировали на Хабре книгу по React 19 российского автора Виктора Дронова. Наверняка, будет интересно сравнить подходы авторов и набор тем, которые они освещают.
Подписки в GraphQL позволяют клиенту подписаться на изменения данных на сервере. Например, в чате с их помощью можно получать уведомления о сообщениях, их удалении или изменении. В отличие от обычных запросов, подписки работают асинхронно, поддерживая постоянное соединение через WebSocket. В этом случае сервер может в любое время послать запрос клиенту. В то же время для обычных запросов(queries), чтобы увидеть изменение данных, клиенту нужно запрашивать их заново каждый раз. А ещё с помощью GraphQL Subscriptions и библиотеки Relay можно создать собственный мессенджер.
История от задумки до запуска на Google Play приватного финансового менеджера inCourse для Android на React Native и TypeScript.
Создаем React Native проект на Expo 52 с Tamagui с нуля. В этой статье я поэтапно показываю что я сделал.
Не часто приходится встречать людей, которые понимают зачем он нужен и ещё реже попадаются проекты, в которых его используют. А шаблон-то очень полезный!
В этой статье вы поймёте как он устроен, зачем он нужен и на примерах научитесь его правильно применять.
Меня зовут Александр Чернов, я фронтенд-разработчик в 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!
Предупреждение
В материалах статьи мы разобрали процессы работы над тестовым приложением. Это не панацея и не четкое указание, как именно нужно писать код. Но оно классно сработало для нас, и мы будем рады, если вдохновим вас на решение схожих задач в разработке.