Изначально всё началось как внутренний проект на хакатоне Facebook в 2013 году. В то время инженеры крупнейшей соцсети даже не представляли, что работают над технологией, которая станет платформой для создания одних из самых популярных приложений на React. Спрос на приложения, разработанные с использованием React, должен был вскоре заинтересовать миллионы пользователей.
В 2015 году Facebook официально выпустил React Native как open-source фреймворк. С тех пор он завоевал признание по всему миру и считается №1 решением для кроссплатформенной разработки мобильных приложений.
Что такое React Native?
React Native это кроссплатформенный фреймворк для разработки мобильных приложений, который использует JavaScript вместе с JSX. В отличие от других решений, он содержит десятки новых и инновационных возможностей. Многие разработчики выбирают React для мобильных приложений именно благодаря уникальным преимуществам этой структуры.
React Native стал первым фреймворком, который успешно объединил достоинства нативных и гибридных приложений. В среднем версии одного и того же мобильного приложения для Android и iOS имеют 60–70% общего кода. Это значительно ускоряет процесс разработки, сохраняя при этом нативное качество пользовательского опыта.
Благодаря этому успеху React Native активно используют стартапы и компании разных размеров и из различных отраслей.
Компоненты React являются «чистыми»: их функции не имеют побочных эффектов и возвращают представления (views) именно такими, какими они должны быть в реальном времени. Это упрощает написание интерфейсов, зависящих от состояния. Вам не нужно вручную обновлять экран при изменении состояния фреймворк делает это автоматически.
При этом UI, который создаётся с помощью React Native, использует реальные нативные элементы, поэтому конечный пользовательский опыт гораздо выше, чем у решений, которые просто рендерят веб-компоненты внутри WebView.
Топ-10 приложений, разработанных на React Native
В этом разделе вы познакомитесь с примерами приложений, созданных с помощью React Native, о чём многие даже не догадываются. Крупные бренды и известные приложения, построенные на React, произвели настоящий фурор во всём мире.
Гибкость и универсальность этого фреймворка впечатляют, и именно поэтому вы всё чаще встречаете компании по разработке приложений, которые рекомендуют использовать кроссплатформенный React Native.
1. React Native и Facebook
Как уже упоминалось ранее, фреймворк React Native появился как хакатон-проект внутри Facebook. Его разработка была ответом на внутренние потребности компании.
У Facebook была одна цель перенести все преимущества веб-разработки (быстрые итерации, одна команда для создания всего продукта) в мобильную среду. Так появился React Native, который вскоре стал применяться для разработки мобильных приложений под Android и iOS.
Чтобы протестировать эффективность фреймворка и производительность приложений например, скорость запуска, команда разработчиков перевела функцию «Events Dashboard» (Панель событий) в iOS-приложении Facebook на React Native.
Быстрая загрузка особенно важна для такого рода приложений, ведь это значительная часть первого впечатления пользователя. От неё зависит, останется ли человек в приложении или уйдёт.
Результат работы команды Facebook оказался впечатляющим: время вывода продукта на рынок удалось сократить почти вдвое.
Сегодня пользователи могут наслаждаться значительным ростом производительности. Например, загрузка Events Dashboard стала в два раза быстрее, так как ключевые улучшения были внедрены на уровне самого фреймворка. Это означает, что любое новое приложение на React Native будет автоматически выигрывать при переходе на свежие версии технологии.
2. Instagram и React Native: категория фото и видео
В 2014 году Facebook приобрёл эту социальную сеть для обмена фотографиями, и вскоре команда разработчиков Facebook начала переписывать приложение. Когда появился React Native, стало очевидно, что именно этот фреймворк станет выбором для дальнейшей работы.
В 2016 году команда Instagram начала экспериментировать с идеей внедрения React Native в уже существующие нативные приложения. Для начала они выбрали самый простой элемент Push-уведомления. Результаты оказались настолько успешными, что разработчики продолжили работу и с другими частями приложения.
Благодаря React Native команда смогла выпускать новые функции гораздо быстрее как для Android-, так и для iOS-версий. Доля общего кода при этом впечатляет: от 85% в модерации комментариев до 99% в функции продвижения постов (Post Promote).
3. Facebook Ads и React Native
Facebook Ads стало первым приложением на React Native для Android и первой полностью кроссплатформенной разработкой компании на этом фреймворке.
Фреймворк отлично подошёл для реализации сложной бизнес-логики, учитывающей различия во временных зонах, форматах рекламы, валютах, конвенциях валют, форматах даты и других аспектах. Большая часть приложения уже была написана на JavaScript.
Интерфейс приложения отличается невероятной чистотой, интуитивной удобностью и простой навигацией. Плавность переходов и анимаций идеальна ни на одном этапе пользователь не сталкивается с багами или ненатуральными эффектами.
Приложение работает крайне быстро, независимо от выполняемой операции. Для доступа к данным или перехода на следующий уровень приложению требуется всего секунда или две, что обеспечивает лёгкую и комфортную работу пользователя.
4. SoundCloud Pulse: категория музыка
Сегодня SoundCloud является крупнейшей в мире платформой для потоковой передачи музыки и аудиотреков с библиотекой до 150 миллионов треков. Платформа постоянно развивается в живую сеть артистов, которые регулярно публикуют новую музыку.
Приложение SoundCloud Pulse, созданное на React Native, позволяет пользователям управлять треками, проверять их статистику и отвечать на комментарии независимо от того, находятся ли они в пути, в студии или вдали от рабочего места.
SoundCloud отличное приложение для креативных авторов, где они могут создавать и управлять своими треками, поддерживая активность сообщества. React Native оказался полезным, когда компании пришлось сталкиваться с нехваткой разработчиков для создания второго набора нативных приложений.
Из-за недостатка iOS-разработчиков возник риск серьёзной задержки между релизами для Android и iOS. Команда SoundCloud решила использовать React Native, хотя столкнулась с рядом трудностей. Тем не менее, компания была уверена в потенциале технологии, поскольку работать с React Native оказалось значительно проще, чем с чисто нативными методами.
5. Walmart и React Native
Walmart управляет обширной сетью супермаркетов, продуктовых магазинов и дискаунтеров по всему миру. Нет сомнений, что этот ритейл-гигант входит в число крупнейших корпораций планеты. В 2019 году компания получила более 500 миллионов долларов дохода, заняв первое место в списке Fortune 500.
Приложение Walmart оснащено множеством функций: оно позволяет пользователям делать покупки онлайн, проверять цены в магазинах, искать товары и даже использовать мобильный кошелёк Walmart Pay.
Разработка приложения с таким широким набором функций была серьёзной задачей для команды разработчиков Walmart. Решением стал React Native, и фреймворк полностью оправдал ожидания.
На данный момент до 95% кода приложения используется одновременно для Android и iOS, что показывает, насколько эффективно сработала кроссплатформенная разработка.
После добавления Node.js в технологический стек компании Walmart полностью переписала приложение на React Native.
Разработка приложений для обеих платформ велась одновременно, что позволило сократить трудозатраты вдвое.
6. Discord и React Native
Discord это кроссплатформенное приложение для текстового и голосового общения, которое отлично работает как на десктопе, так и на мобильных устройствах. Приложение особенно популярно среди геймеров, хотя многие миллениалы используют Discord и для обычного общения, как социальную сеть.
Приложение Discord стало одним из первых на рынке, разработанных с использованием React Native. Компания решила применить эту технологию для iOS ещё до официального выхода фреймворка несколько лет назад.
Приложение позволяет пользователям оставаться на связи со всеми чатами и голосовыми каналами Discord, даже когда они не у консоли. Это идеальный инструмент для общения с коллегами и для того, чтобы видеть, кто онлайн.
React Native доказал свою эффективность в Discord, позволяя разработчикам писать переиспользуемый код и быстро внедрять обновления. Даже команда из двух человек может поддерживать приложение!
Discord также попытался внедрить React Native для Android, и команда переписала часть приложения всего за два дня, используя лучшие практики популярных приложений. Однако в итоге компания выбрала Kotlin для Android, оставаясь при этом с React Native для iOS.
7. UberEats и React Native
UberEats это сервис доставки еды от Uber. Его цель сделать процесс доставки еды из ресторанов максимально удобным для пользователей и предоставить партнёрам по доставке гибкий способ заработка. Сложность заключалась в том, чтобы соединить три стороны: водителей, рестораны и клиентов.
Команда Uber столкнулась с задачей адаптировать существующую панель управления ресторанами под мобильные устройства для Android и iOS. Они заметили, что большинство ресторанов заходят в панель именно с мобильных устройств.
Также разработчики хотели добавить функции, такие как push-уведомления и звуковые уведомления для ресторанов. Ранее приложение использовало веб-интерфейс, что приводило к задержкам и неполной информации, вызывая потери в бизнесе.
Решением стала интеграция React Native. Он составил небольшую часть мобильного приложения, но команда Uber положительно оценила возможности фреймворка: улучшение пользовательского опыта для владельцев ресторанов, рост загрузок приложения и увеличение положительных отзывов. Всё это позволило масштабировать сервис и сделать его более успешным.
8. Bloomberg и React Native
Приложение Bloomberg предоставляет пользователям глобальные новости о финансах и бизнесе. Новое мобильное приложение для Android и iOS предлагает интерактивный и удобный интерфейс, персонализированный контент, прямые трансляции и видеоматериалы, интегрированные в медиаплатформу Bloomberg.
Для разработки этого приложения инженерной команде Bloomberg в Нью-Йорке пришлось использовать React Native и потратить значительное время на создание и обновление версий для Android и iOS отдельно.
Команда Bloomberg тщательно протестировала прототип на React Native и выбрала технологию благодаря возможности одновременного обновления приложений для разных платформ.
Ещё одно впечатляющее преимущество React Native, которое команда Bloomberg оценила и использовала, это автоматическое обновление кода, что ускоряет выпуск новых функций продукта. Мобильное приложение перезагружается мгновенно, без необходимости полной перекомпиляции.
9. Townske и React Native
Цель Townske стать ведущим городским путеводителем и источником вдохновения для путешественников. Приложение соединяет пользователей с местными жителями, чтобы получать списки любимых мест, а также формирует специально подобранные маршруты для изучения города так, как это делают сами местные жители.
Для использования приложения не требуется создавать аккаунт, что упрощает поиск и планирование следующей поездки.
React Native ориентирован исключительно на создание мобильного интерфейса, что делает его скорее библиотекой JavaScript, чем полноценным фреймворком, особенно по сравнению с такими технологиями, как MeteorJS или AngularJS.
В результате интерфейс приложения получается быстрым, отзывчивым и плавным, благодаря асинхронному взаимодействию JavaScript с нативной средой. Это обеспечивает более быструю загрузку и плавную работу, чем у обычных гибридных приложений, а также более приятное ощущение работы с интерфейсом.
10. Wix и React Native
Wix, запущенный в 2006 году, это онлайн-компания, предоставляющая услуги по созданию сайтов и веб-хостингу. Пользователи могут создавать и оформлять свои сайты с помощью CSS/HTML5, а также мобильные версии сайтов, используя инструменты drag-and-drop.
Две из самых популярных функций платформы позволяют разработчикам создавать собственные приложения для продвижения среди других пользователей. При этом пользователям не нужно знать программирование, чтобы создать сайт.
Для навигации в приложениях на React Native доступны различные решения, такие как React-native-router-flux, Airbnb-native-navigation, react-navigation и Wix-react-native-navigation.
Некоторые пользователи Wix предпочитают react-native-navigation за его высокую настраиваемость экранов, удобную навигацию и актуальную, хорошо поддерживаемую кодовую базу.
Теперь, когда вы увидели примеры приложений на React Native, становится очевидно, что знаковые приложения, созданные с React, действительно успешны.
React Native имеет явное преимущество в скорости и гибкости разработки по сравнению с нативной разработкой, которая часто сопровождается меньшей продуктивностью разработчиков, неэффективностью и долгими сроками выпуска. Именно поэтому Wix выбирает этот фреймворк для своих сервисов.
Как показано в статье, React Native это современная и мощная технология, которая помогает стартапам и крупным компаниям по всему миру достигать новых и уже существующих клиентов на мобильных платформах.
React Native эффективен, быстр и относительно прост для изучения JavaScript-разработчиками. Если вашей целью является расширение аудитории и предоставление сервисов через смартфоны, стоит рассмотреть возможность сотрудничества с компанией по разработке приложений на React для создания вашего собственного приложения.