Pull to refresh
  • by relevance
  • by date
  • by rating

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

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

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

Development for iOSDevelopment of mobile applicationsDevelopment for AndroidReactJS
Sandbox
Если вы фронтенд разработчик, да еще и с опытом работы react + redux, то вам определенно стоит обратить внимание на такой интересный инструмент как react-native. Он позволяет разрабатывать кроссплатформенные приложения под ios и android. React-native находится в стадии активного развития и выпускает обновления каждый месяц.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Views22.4K
Comments 7

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

EPAMDevelopment of mobile applications
Tutorial

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


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


image

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

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

JavaScriptDevelopment of mobile applicationsReactJS
Translation
Tutorial

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


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

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

Self Promo

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


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


Содержание


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

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


Quester

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

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

Development for iOSDevelopment for AndroidReactJS
Tutorial
Сегодня трудно кого-то удивить возможностью свайпать элементы списка в мобильных приложениях. В одном нашем react-native приложении тоже была такая функциональность, но недавно возникла необходимость расширить её возможностью перетаскивать элементы списка. А поскольку процесс поиска решения стоил мне некоторого количества нервных клеток, я решил запилить небольшую статью, чтобы сэкономить драгоценное время будущим поколениям.


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

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

Abnormal programmingDartFlutter
Недавно попалась на глаза новость, что вышел очередной релиз Flutter (1.9), который обещает разные вкусности и, в том числе, раннюю поддержку веб-приложений.

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

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

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

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


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

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

Development for iOSDevelopment for AndroidReactJS
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
Views5.5K
Comments 12

Дружим React Native и Fastlane

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
Views2.7K
Comments 2

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

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



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

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

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

Development of mobile applicationsReactJS
Сохранение фотографий и видео на устройство android/ios вызывает у многих разработчиков React Native сложность. В этой статье я покажу как можно легко и безболезненно сохранять фотографии по url на устройство.

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

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

EPAMDevelopment of mobile applicationsReactJS
Translation
Сегодня веб-разработчики проявляют большой интерес к мобильной разработке, иногда не представляя, что это совершенно иной мир. Однако работать с React-Native разработчикам React немного проще, но с некоторыми оговорками. В этом посте я расскажу, с чем мобильные разработчики могут столкнуться в «путешествии» от React к React Native.


Читать дальше →
Rating 0
Views3.5K
Comments 0

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

Development of mobile applicationsLanguage localisation
В ходе разработки одного из наших приложений нам понадобилось сделать поддержку мультиязычности. Задача была дать пользователю возможность менять язык (русский и английский) интерфейса приложения. При этом текста и контент должны переводиться «на лету».

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

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

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

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

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

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

ReactJS

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

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

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

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

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

TINKOFFDevelopment of mobile applications
Translation

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

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

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

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

SkillFactoryJavaScriptProgrammingPerfect codeReactJS
Translation

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

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

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