Pull to refresh

Как я написал мобильное приложение на react-native

Reading time 7 min
Views 15K
Self Promo
Меня зовут Алексей Андросов, я уже много лет работаю в Яндексе фронтенд-разработчиком. Два года назад мне и моим партнерам пришла в голову идея создать мобильную социальную сеть Verb. Идея Verb в том, что пользователи могут делиться небольшими статусами — “вербами” — о том, чем они занимаются в данную минуту, простыми вещами, о которых хочется рассказать друзьям, но некуда об этом написать. И мы уже даже получили инвестиции, но сейчас не об этом. Сегодня я хочу рассказать о том, как и почему я написал мобильное приложение на react-native.
Читать дальше →
Total votes 23: ↑20 and ↓3 +17
Comments 6

Первый взгляд на react-native

Reading time 5 min
Views 24K
Development for iOS *Development of mobile applications *Development for Android *ReactJS *
Sandbox
Если вы фронтенд разработчик, да еще и с опытом работы react + redux, то вам определенно стоит обратить внимание на такой интересный инструмент как react-native. Он позволяет разрабатывать кроссплатформенные приложения под ios и android. React-native находится в стадии активного развития и выпускает обновления каждый месяц.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 7

Как использовать все возможности мобильной ОС в React Native

Reading time 7 min
Views 11K
EPAM corporate blog Development of mobile applications *
Tutorial

На рынке есть несколько кроссплатформенных решений: Cordova, Xamarin, React Native и другие, менее известные. Многие мобильные разработчики считают, что кроссплатформенные решения никогда не позволят делать то, что могут нативные приложения.


В статье я развенчаю этот миф и расскажу о механизме в React Native, который позволяет сделать все, на что способно нативное приложение. Этот механизм – нативные модули. Под катом – подробное описание, как создавать нативные модули для Android и iOS.


image

Читать дальше →
Total votes 15: ↑14 and ↓1 +13
Comments 5

Создаем iOS секундомер на React-Native (субтитры)

Reading time 1 min
Views 5.8K
JavaScript *Development of mobile applications *ReactJS *
Tutorial
Translation

Привет, Хабр! Готовы субтитры к очень простому туториалу по React Native, в котором будет рассмотрена разработка приложения "Секундомер". За основу был взят секундомер на iOS.


Читать дальше →
Total votes 7: ↑5 and ↓2 +3
Comments 0

Quester — Платформа для создания и прохождения квестов (Beta)

Reading time 3 min
Views 11K
Self Promo

Доброго времени суток!


Цель статьи — открыть публике платформу, которая разрабатывается в свободное от работы время и одновременно проверить, как данная платформа выдержит хабраэффект.
image


Содержание


  1. Описание платформы
  2. Что доступно на сегодняшний день
  3. Технические детали (мы всё-таки на Хабре, и честь надо знать)
  4. Ссылки и процессы для тех, кто готов попробовать
  5. Просьба о помощи всех желающих

Итак, приступим!


Quester

Читать дальше →
Total votes 10: ↑9 and ↓1 +8
Comments 16

React Native: делаем draggable & swipeable список

Reading time 6 min
Views 9.9K
Development for iOS *Development for Android *ReactJS *
Tutorial
Сегодня трудно кого-то удивить возможностью свайпать элементы списка в мобильных приложениях. В одном нашем react-native приложении тоже была такая функциональность, но недавно возникла необходимость расширить её возможностью перетаскивать элементы списка. А поскольку процесс поиска решения стоил мне некоторого количества нервных клеток, я решил запилить небольшую статью, чтобы сэкономить драгоценное время будущим поколениям.


Читать дальше →
Total votes 15: ↑15 and ↓0 +15
Comments 2

Как я делал desktop-приложение на Flutter (+ bonus)

Reading time 9 min
Views 26K
Abnormal programming *Dart *Flutter *
Недавно попалась на глаза новость, что вышел очередной релиз Flutter (1.9), который обещает разные вкусности и, в том числе, раннюю поддержку веб-приложений.

На работе я занимаюсь разработкой мобильных приложений на React Native, но с любопытством поглядываю на Flutter. Для тех, кто не в курсе: на Flutter уже сейчас можно создавать приложения для Android и iOS, готовится к релизу поддержка веб-приложений, а ещё в планах поддержка десктопа.

Такое вот «одно кольцо, чтобы править всеми».

Покрутив пару дней в голове мысли о том, какое приложение можно попробовать сделать, я решил выбрать задачу со звёздочкой — что нам эти проторенные дорожки? Замахнёмся на десктоп и будем героически преодолевать трудности! Забегая вперёд, скажу, что трудностей почти не возникло.

Под катом — рассказ о том как я решал привычные для React Native программиста задачи средствами Flutter, плюс общее впечатление от технологии.


Читать дальше →
Total votes 28: ↑26 and ↓2 +24
Comments 21

React Native — серебряная пуля для всех проблем? Как мы выбирали кросс-платформенный инструмент для Profi.ru

Reading time 7 min
Views 6K
Development for iOS *Development for Android *ReactJS *
Sandbox
Всем привет, меня зовут Геворг. Я Head of Mobile в Profi.ru. Хочу поделиться с вами историей нашего эксперимента с React Native. Расскажу, как мы оценивали плюсы и минусы разработки на React Native — в теории и на практике. Статья будет полезна тем, кто интересуется кросс-платформенной мобильной разработкой, но пока не решил, идти в эту сторону или нет.

Максимальное ускорение



Всё началось с того, что мы решили ускорить разработку в 10 раз на уровне компании. Поставили невыполнимую цель, чтобы выйти за привычный горизонт событий и попробовать новое. Все команды разработки Profi.ru взялись за эксперименты. На тот момент в компании было 13 нативных мобильных разработчиков, включая меня и двух тимлидов. Моя команда работала над двумя мобильными приложениями. В первом клиенты ищут специалистов, во втором — специалисты клиентов. Для меня этот период был непонятным и эмоционально напряжённым. По моим ощущениям, мы и так много делали, чтобы всё работало быстро.

Использовали общую архитектуру на всём проекте и следили за чистотой кода. Использовали генераторы, которые создают все файлы модулей. Всю бизнес-логику старались выносить на backend. Настроили CI/CD, а приложения покрыли E2E-тестами. За счёт всего этого стабильно релизили некоторые приложения раз в неделю. Я понятия не имел, как ускорить разработку даже в два раза. Куда уж в 10. Поэтому мы определили, что для нас важно.
Читать дальше →
Total votes 16: ↑15 and ↓1 +14
Comments 12

Дружим React Native и Fastlane

Reading time 5 min
Views 4K
Development of mobile applications *
Sandbox

https://habrastorage.org/webt/n8/lo/r5/n8lor5lkvnqev0xktqwxayrv1t0.png


Те из вас, кто хоть раз интересовался подобной темой ни раз натыкался на Fastlane — крайне полезную утилиту, решающую проблему автоматизации сборок и публикации приложений.


Существует большое количество статей и видео, в которых подробно описывается преимущество использования автоматизированной сборки проекта и содержимое этих статей применительно к React Native (впрочем и к другой кроссплатформе) сводится к следующим действиям:


  1. Инициализируем Fastlane в папках iOS и Android
  2. Копируем платформо-зависимые скрипты вида: clean, build, publish
  3. Вставляем их в соответствующие iOS и Android директории
  4. Публикуем приложение!

В этих статьях упускаются важные моменты, с которыми сталкиваются все, кто публикует что-то сложнее синтетического примера. Мы не были исключением и поставили себе ряд задач, которые необходимо решить

Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Comments 2

Война с тормозами. Оптимизация количества рендеров компонентов в React Native

Reading time 14 min
Views 9.9K
Development of mobile applications *ReactJS *
🔥 Technotext 2020
Привет, Хабр! Меня зовут Камо Сперцян, я занимаюсь React Native разработкой в Profi.ru. Если вы решили воспользоваться технологией React Native для быстрой доставки продуктовых фич и сосредоточились на скорости разработки, то, скорее всего, столкнётесь с проблемами производительности. По крайней мере так случилось с нами. Через полгода активной разработки производительность нашего приложения упала ниже критического уровня — всё дико тормозило. Поэтому мы взялись за оптимизацию — убирали все «тормоза» во время запуска, переходов между экранами, отрисовки экранов, реакций на действия пользователя. В результате за три месяца довели пользовательский опыт до нативного уровня. В этой статье хочу рассказать о том, как мы оптимизировали приложение на React Native и решали проблему многократных ререндеров компонентов.



Я собрал рекомендации, которые помогут минимизировать количество бессмысленных перерисовок компонентов. Для наглядности в примерах сравниваю «‎плохую» и «‎хорошую»‎ реализации. Статья будет полезна тем, кто уже столкнулся с низкой производительностью приложения, и тем, кто не хочет допустить этого в будущем.

Мы используем React Native в паре с Redux. Часть советов связана с этой библиотекой. Также в примере я использую библиотеку Redux-thunk — для имитации работы с сетью.
Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Comments 12

React Native — сохранение фотографий и видео в галерею устройства

Reading time 2 min
Views 3.7K
Development of mobile applications *ReactJS *
Сохранение фотографий и видео на устройство android/ios вызывает у многих разработчиков React Native сложность. В этой статье я покажу как можно легко и безболезненно сохранять фотографии по url на устройство.

Для начала нам понадобятся две библиотеки:
Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Comments 4

10 вещей, о которых нужно помнить при переходе с React на React Native

Reading time 4 min
Views 5.2K
EPAM corporate blog Development of mobile applications *ReactJS *
Translation
Сегодня веб-разработчики проявляют большой интерес к мобильной разработке, иногда не представляя, что это совершенно иной мир. Однако работать с React-Native разработчикам React немного проще, но с некоторыми оговорками. В этом посте я расскажу, с чем мобильные разработчики могут столкнуться в «путешествии» от React к React Native.


Читать дальше →
Rating 0
Comments 0

Локализуем приложение на React Native

Reading time 4 min
Views 3.1K
Development of mobile applications *Language localisation *
В ходе разработки одного из наших приложений нам понадобилось сделать поддержку мультиязычности. Задача была дать пользователю возможность менять язык (русский и английский) интерфейса приложения. При этом текста и контент должны переводиться «на лету».

Для этого нам нужно было решить 2 задачи:

  1. Определить текущий язык приложения.
  2. Использование глобального состояния для перевода «на лету».

В этой статья попробую подробно расписать как мы решили данные задачи. И так поехали.

Определяем текущий язык устройства

Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Comments 4

Калькулятор на телефон как способ знакомства с React-native

Reading time 6 min
Views 4K
ReactJS *

Приветствую.

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

Так получилось, что последнее время стало интересно попробовать себя в мобильной разработке - в силу различных причин, начиная от того, что последнее время основной приоритет информационной области сместился в веб, в том числе - с телефонов, и заканчивая задумкой для пары pet-проектов. В рамках данной статьи хотелось бы разобрать один из них, а так же - высказаться насчет особенностей языка, которые особенно сильно бросаются в глаза человеку, не занимавшемуся веб-разработкой. Подробности под катом.

Читать далее
Total votes 3: ↑3 and ↓0 +3
Comments 0

Как выбрать мобильную кросс-платформу в 2021 году

Reading time 5 min
Views 35K
TINKOFF corporate blog Development of mobile applications *
Translation

Кросс-платформенные решения - тренд в мобильной разработке. Уже есть различные технологии от PWA до Flutter и Kotlin Multiplatform. Как выбрать среди них?

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

Далее
Total votes 27: ↑18 and ↓9 +9
Comments 20

Удвойте скорость написания кода на React с помощью этих простых трюков

Reading time 14 min
Views 14K
SkillFactory corporate blog JavaScript *Programming *Perfect code *ReactJS *
Translation

Если вы работаете с React или React Native и чувствуете, что у вас медленная скорость написания кода, вы тратите много времени на поиск ошибок, а не на добавление нового функционала, работаете с большими исходными файлами и вам сложно находить нужные части кода, а также многократно реализуете одну и ту же логику, то эта статья для вас. Вы удвоите скорость написания кода, если отрефакторите код в повторно используемые строительные блоки.

Мы рассмотрим React компонент, который можно хорошо разобрать. И мы будем шаг за шагом реорганизовывать его до хорошего уровня. Вы увидите большое количество идей, которые повысят вашу скорость написания кода.

Читать далее
Total votes 18: ↑11 and ↓7 +4
Comments 15

JavaScript Bot

Reading time 1 min
Views 2.3K
JavaScript *ReactJS *TypeScript *
Recovery mode

С помощью этого Telegram бота вы сможете протестировать свои знания по основам JavaScript, React Native, TypeScript.


javascript bot


javascript bot


Мы используем вопросы, которые взяли из 29 тем нашего курса по основам JavaScript.

Читать дальше →
Total votes 11: ↑4 and ↓7 -3
Comments 6

Как внедрить In-app Updates в Android-приложение на React Native

Reading time 9 min
Views 5.4K
Development of mobile applications *Development for Android *ReactJS *

В 2019 году Google выпустила In-app Updates — возможность обновлять Android-приложения без перехода в Google Play. Однако до сих пор довольно мало приложений поддерживают этот способ обновления.

Когда я внедрял In-app Updates в приложение Профи для специалистов — без сложностей не обошлось. Пришлось покопаться в документации, статьях и даже пару раз переписать реализацию.

Чтобы меньше людей наступали на мои грабли, я сделал пошаговую инструкцию по интеграции In-app Updates в Android-приложение на React Native. Если следовать ей — сможете внедрить эту опцию за день.

Читать далее
Total votes 7: ↑7 and ↓0 +7
Comments 3

Планы React Native на второе полугодие 2021 года

Reading time 5 min
Views 3.9K
JavaScript *Development for iOS *Development for Android *ReactJS *
Translation

За последний год в нашем мире так много изменилось, и React Native не исключение. Мы приветствовали новых членов в нашей команде (с которыми мы очень рады встретиться лично!), наши проекты созрели, и появились новые возможности. Мы рады поделиться всем этим с вами в этой публикации!

В Facebook наша команда работает полугодиями. Каждое полугодие мы пересматриваем нашу стратегию, устанавливаем планы и делимся ими внутри компании. Сегодня мы хотим поделиться с вами, нашим комьюнити, нашими планами на второе полугодие 2021 года.

Вторая половина года - захватывающая для React Native. Наши основные направления включают развитие сообщества, начало развертывания новой архитектуры с открытым исходным кодом и продвижение технологии.

Читать далее
Total votes 6: ↑1 and ↓5 -4
Comments 1

Тестирование в React Native

Reading time 13 min
Views 2K
CDEK IT corporate blog Development of mobile applications *Mobile applications testing *

Эта статья – большущий гайд по технологиям, которые мы в СДЭК используем для проверки наших внутренних приложений, написанных на React Native. Часть из этих подходов вполне можно применить не только в мобильной разработке, но и за её пределами. Дальше буду описывать все в контексте веб-разработки. Если вас это еще не испугало – приглашаю окунуться в головокружительный мир автотестирования мобильных приложений.

Читать далее
Total votes 2: ↑2 and ↓0 +2
Comments 0
1