React native для чего
React Native с точки зрения мобильного разработчика
Статья ориентирована на iOS и android разработчиков, которые уже достаточно хорошо разбираются в своей области и поглядывают в сторону React Native.
Впервые узнав про React Native, я воспринял его как повод для веб-разработчиков вторгнуться на мою территорию (нипазволю!) и заодно испортить хорошо работающий crash-free-60-fps продукт. Так оно и произошло. Конец. Реальная история оказалась длиннее.
Отрицание
JavaScript в мобильном приложении? В голову приходило всего пара библиотек с использованием JavaScriptCore на iOS (эти же библиотеки были причиной 90% падений приложений, в которых использовались) и гибридные приложения “старого образца” (ну это вообще атас).
Гибридные приложения подавали надежду до того момента как ты их попробуешь, после чего начинаешь бежать от них сломя голову и как можно дальше.
Вспоминая неудачные потуги в освоении Xamarin 3 года назад я быстро отказался от идеи использовать React Native.
Стоит отметить что я всегда с радостью воспринимал новые способы написания нативных приложений (от ObjC к Swift, от Java к Kotlin, от Eclipse к Android Studio). Уже много лет занимаюсь iOS и android разработкой в качестве хобби и профессионально. После перехода на новый язык (внутри одной ОС) или IDE я редко возвращался к предыдущему. Казалось бы React Native — логичный следующий шаг, ещё одна новая ступень вверх. Или это шаг назад?
К чему мне учить упрощённый вариант, когда я уже знаю как делать это “по-настоящему”?!
На этот вопрос мне ещё предстояло найти ответ когда компания поставила задачу полного редизайна одного из приложений (в тот момент доступного только на iOS) и выпуска его на android.
Как сделать сразу два дела и написать меньше кода? Напрашивались решения вроде: тонкий клиент, библиотеки на C с вызовом из Swift / Kotlin кода, React Native?
React Native выглядел довольно перспективно из-за возможности сделать библиотеки и затем использовать их сразу на трёх платформах (iOS / android / web).
Торги
Перспективно для кого угодно, но только не для меня. Я точно не был счастлив такому повороту. Чувствовал что нахожусь на пике способности к развитию iOS и android и тут меня попросили выбросить все эти знания, как будто я свежий выпускник и опыта у меня 0. Ещё больше я сомневался в том что с React Native можно создать качественный продукт.
Депрессия
Сомнение были обоснованными. Главные проблемы:
Принятие
И конечно React Native — это не только минусы. Есть много хорошего, пишется это намного проще и работает из коробки лучше чем тоже самое на конкретных платформах.
Если отбросить очевидные проблемы, вроде падений и скудных доков, то вот примеры того, с чем пришлось столкнуться:
JavaScript
Ничего удивительного. Это первое с чем придётся идти рука об руку через кровь, пот и слёзы.
Когда я начал вспоминать свой предыдущий опыт frontend-разработчика (до мобильных приложений занимался сайтами), у меня начался вьетнамский синдром: Джонни, JavaScript нас окружает!
Если решите писать приложения на React Native, то рекомендую пройти один из свежих курсов по JS. Необязательно чтобы они были по React или React Native.
В последние несколько лет с выходом стандартов ES6, ES7 и ES8 способ написания кода сильно изменился.
И он стал очень даже ничего.
Статическая проверка
В первые месяцы очень недостаёт статического анализатора, который есть во всех нативных мобильных языках.
Есть разные утилиты, которые сглаживают его отсутствие, выполняя часть функций
Вёрстка элементов
Самым большой вызов здесь будет для начинающих iOS разработчиков.
Этот вызов — отсутствие визуального редактора интерфейса.
Всё делается в коде с помощью JSX-разметки. Технически, эта разметка не обязательна, она помогает увидеть иерархию компонентов. Android-разработчики будут в своей тарелке, заметив сходство с XML.
Одновременно есть понятный вид вьюшек и потенциал для переиспользования.
В iOS нет либо одного либо другого, зависит от того какой метод выбрать (вёрстка в коде или в Interface builder). Да, обе эти проблемы решаемы, но приходится писать приличное количество кода.
В React Native нет этой проблемы.
В Android, кстати, её тоже нет.
Зато Android-специалисты оценят способ передачи параметров из внешних компонентов во внутренние прямо в разметке.
Базовые View здесь — аналог LinearLayout (android) и UIStackView (iOS) с примесью констрейнтов одновременно. Довольно простой способ (по сравнению с констрейнтами) позиционирования элементов.
UIViewController и Activity
В React Native нет ни того ни другого.
Конечно они есть под капотом. Напрямую взаимодействовать с ними не получится. Да это и не нужно.
Жизненный цикл всех React Native компонентов полностью отличается от iOS и android, сложно провести какие-то параллели. Если сосредоточиться на отличиях от нативных систем, то:
Время сборки / Live Reload / Hot Reload
Большая скорость достигается за счет инкрементальной сборки — пересобираются только измененные модули, а не весь бандл.
Все изменения в JS-коде видны сразу видны в симуляторе. Колоссально ускоряет разработку!
Отсутствие нативного функционала в JS
В JS-части React Native из коробки доступно не всё что нужно.
Можно написать нативную часть на обе платформы, сделать JS-обёртку и вызывать её как остальной код. Ничего сложного нет.
Есть большое количество готовых модулей, написанных сторонними разработчиками.
Все модули подключаются через npm (аналог CocoaPods для iOS и Gradle для android), в которых есть нативный код с нужным функционалом.
Универсальные и глубокие ссылки
Функционал реализован силами Facebook.
Работает хорошо и консистентно.
Обработка сторонних Intent’ов
Как частный случай предыдущего пункта.
Самая большая проблема на android — обработать Intent, отличный от диплинка в приложение.
Зависит, конечно, от Intent’а и что необходимо сделать при его получении.
На эту тему можно написать отдельную статью. Стартовая точка — добавить метод createReactActivityDelegate в MainActivity.
Производительность
Довольно просто получить 60 FPS при прокрутке длинных списков со сложными ячейками.
Производительность всего остального (например — нажатие на кнопку, печать текста в поле) ниже. Заметно при анимированной смене состояния у большого количества элементов. С этим можно легко бороться. Хороший раздел в документации Using Native Driver for Animated.
А ещё из коробки нельзя получить нормальное управление жестами и их связывание с анимацией.
Нестабильность
Часто проект просто прекращает собираться, например после:
Нестабильность сторонних зависимостей
Самой большой проблемой на iOS было и есть повсеместное желание npm-модулей использовать method swizzling.
Множество нативных модулей подключается бинарниками. Понять что несколько независимых модулей свиззлят один и тот же метод не так просто.
Сборка происходит в несколько этапов и на каждом из них может что-нибудь пойти не так.
Нестабильность при обновлении сторонних зависимостей
Одни npm-модули зависят от других npm-модулей и так далее. Если два модуля завязаны на разные версии третьего модуля, то мы сразу получаем warning при установке, в лучшем случае. А в худшем случае warning’a нет, но ничего не работает.
Аналогичная проблема, если npm-модули полагаются на нативные Android-модули с разными версиями.
После чистки кеша могут тихо подгрузиться новые версии. Вроде ничего не делал, а работать перестало.
Unit и UI-тестирование
Очень лёгкий механизм тестирования через библиотеку Jest, идёт в комплекте к React Native. Удобный анализ покрытия тестами — показывает какие строки в тестируемой функции не вызывались ни разу.
Есть библиотеки для UI-тестирования. Пока на деле не пришлось использовать.
Заключение
Спустя 13 месяцев работы с React Native могу с уверенностью сказать:
Если считаешь что разобрался в теме и у тебя хорошо получается, то пожалуйста, пожалуйста, попробуй себя в роли нативного разработчика.
Как разработать своё первое приложение на React Native
Авторизуйтесь
Как разработать своё первое приложение на React Native
технический директор Secreate
Привет я Никита, занимаюсь разработкой на React/React Native и на всяких других штуках в Secreate. Хочу немного поговорить о том, что же всё-таки такое React Native, почему он сейчас важен и популярен, а также вместе с вами попробую написать небольшой проект для демонстрации основ.
Что такое React Native?
Сначала нужно разобраться, что есть React. React — это инструмент для создания пользовательских интерфейсов. Его основная задача — обеспечить отображение на экране того, что можно увидеть на веб-страницах. React позволяет легко создавать интерфейсы, разделяя каждую страницу на небольшие фрагменты и компоненты. Он очень удобен для создания веб-приложений и не требует большого порога вхождения. Так вот, ребята из Facebook подумали, что было бы круто, если бы React можно было бы использовать для создания кросс-платформенных мобильных приложений, и в 2015 году React Native был представлен публике и появился на GitHub, где уже каждый мог внести свой вклад. React популярен по нескольким причинам. Он компактен и отличается высокой производительностью, в особенности при работе с быстро меняющимися данными. За счет своей компонентной структуры, React поощряет вас писать модульный и многократно используемый код.
В мире кроссплатформенной мобильной разработки уже были свои решения, к примеру Apache Cordova — технология, которая позволяла использовать HTML + CSS + JavaScript + нативный функционал платформы, на которой приложение было запущено, для его работы. Однако, технология имеет большую проблему — быстродействие. Так же на данный момент существуют и другие, такие как Xamarin, Flutter, QT и так далее.
В React Native код пишется на JavaScript, и исполняется при помощи JavaScriptCore — движка, который использует Safari. Так же можно использовать нативные модули платформы, к примеру камеру или Bluetooth. Для этого пишется код, реализующий функциональность на языке, который предназначается для разработки под конкретную платформу (Java/Swift/Objective C) и сообщается со средой JavaScript посредством bridge.
Если сравнивать с типовой разработкой для iOS и Android, React Native предлагает много других возможностей. Так как ваше приложение в основном состоит из JavaScript, можно воспользоваться многими преимуществами. Например, для того чтобы увидеть добавленные в код изменения, вы можете немедленно «обновить» приложение, не дожидаясь завершения билда.
Для большинства стандартных элементов UI есть компоненты в RN, к примеру View = UIView в iOS, так что реализовывать изыски интерфейса должно быть несложно, если есть знания React.
Почему же RN стал таким популярным?
Первое приложение
Давайте попробуем написать своё первое приложение и понять что для этого нужно. Пусть это будет, к примеру, приложение для отображения и поиска разных пользователей.
Нам понадобится cli утилита npx, которая поставляется вместе с Node.js, Android Studio — если мы хотим протестировать приложение на Android, либо Xcode — если на iPhone. Как установить указанные инструменты подробнее можно почитать здесь.
Спустя какое-то время у нас создалась такая структура папок
В index.js написано:
import
Начнем с создания роутера. В браузере, когда пользователь кликает по ссылке, URL добавляется в стек истории переходов, а когда он жмет кнопку назад — браузер удаляет последний посещенный адрес из стека. В RN по умолчанию такого понятия нет, для этого и нужен React Navigation. В приложении может быть несколько стеков. К примеру у каждого таба внутри приложения может быть собственная история посещений, но может быть и один.
Что здесь происходит? Создаётся новый стек навигации, в котором указывается список экранов, находящихся в нем. А также указывается стартовый экран стека. Т. к. у нас будет всего один стек, то по сути это и будет стартовый экран приложения.
Там разместим такой код:
Сборка и запуск
Когда проект запустится, то на экране должно появиться, что-то вроде этого.
Для отладки приложения можно использовать react-native-debugger, либо браузер. Включается дебаггер комбинацией клавиш ctrl(cmd) + M для Android, cmd + D для iOS. Там же можно включить live reload.
Сверху к import из react-native добавим импорт модуля StyleSheet
Вниз этого же файла добавим
При подтяжке экрана вниз — список обновляется, при скролле — догружается. Добавим возможность перехода в карточку юзера.
Это переход в экран с названием info с передачей выбранного юзера как параметра. В дальнейшем его можно будет получить из компонента экрана. Теперь добавим этот экран в навигатор RootNavigator.js и напишем для него код.
Так же создадим файл src/screens/PersonInfoScreen.js и добавим туда следующий код.
Вот что у нас получилось.
Таким образом мы сделали приложение для вывода и просмотра некоторой информации по разным людям.
Ресурсы
Для изучения RN можно найти много ресурсов, вот небольшой список:
В итоге
React Native — это мощная платформа, используемая предприятиями любого размера для создания мобильных приложений. Это быстрый, эффективный и относительно простой способ для создания приложений на JavaScript. Главным его преимуществом является то, что он позволяет быстро создавать приложение под несколько платформ одновременно, а также имеет невысокий порог вхождения. React Native широко используется крупными брендами, поэтому не стоит беспокоиться о том, что он куда-то денется в ближайшие пару лет.
React Native: Разбираем Плюсы и Минусы
Данная статья посвящена преимуществам и недостаткам использования React Native для разработки приложений для мобильных устройств.
ReactNative является одним из самых популярных фреймворков, использующих JavaScript, в современном мире. Он известен своим плюсами в создании нативных приложений для платформ Android и iOS. React Native берет свое начало в React; это библиотека JavaScript, созданная Facebook для разработки интерфейса мобильных приложений. React Nativeможет легко сочетаться с JavaScript для создания приложений с такими же функциями, как и у нативных приложений. Поскольку, написанный код в React Native, доступен для одновременного использования, это отличная платформа для разработки кроссплатформенных приложений.
React Native использует комбинацию таких технологий, как JavaScript, JSX, XML разметку и многие другие. React Native bridge обрабатывает рендеринг API в Swift и Java для создания приложений iOS и Android соответственно.
При отображении приложения используется мобильный пользовательский интерфейс, а не объект WebView. Это дает разработчику интерфейс для взаимодействия с API-интерфейсами платформы приложений. Именно поэтому React Native может интегрировать нативные функции, такие как доступ к GPS-устройству и камере. В настоящее время он создает собственные приложения для платформ Android и iOS и может поддерживать дополнительные платформы приложений. Повторное использование кода экономит разработчикам много часов разработки. Многие пользователи, работающие с приложениями на Coinbase и Facebook, работают с React Native.
Давайте посмотрим на плюсы и минусы React Native.
Топ Десять Плюсов ReactNative
Вот десять главных преимуществ React Native как платформы для разработки мобильных приложений.
React Native предоставляет разработчикам недорогой способ создания кроссплатформенных приложений с помощью React Native. Вместо того чтобы создавать два разных приложения для Android и iOS, разработчик может использовать один и тот же код для обеих платформ. Это означает сокращение затрат на разработку примерно на 50%. Эта функция также делает React Native дешевле в обслуживании.
Способность React Native быстрее разрабатывать приложения-одна из самых привлекательных особенностей платформы. Разработчики используют различные готовые компоненты для создания функций приложений быстрее, чем когда-либо. На React Nativeлегче писать код по сравнению с другими платформами разработки. Поэтому требуется меньше усилий, чтобы создать и запустить приложения React Native.
Согласно популярному сайту Statista, JavaScript является самым широко используемым языком программирования в мире. Согласно исследованию Statista, 68% разработчиков пишут на JavaScript. Это позволяет разработчикам с опытом на JavaScript легко использовать React Native, поскольку фреймворк написан на JavaScript.
В то время как разработка React Native все еще может потребовать ввода данных от основных разработчиков iOS и Android. Основная часть заданий на разработку выполняется на JavaScript.
Стандартный проект разработки приложений нуждается в двух командах разработчиков для создания Android и iOS версии. Это часто приводит к недопониманию и несогласованности работы двух команд. В некоторых случаях внешний вид и функции приложения в конечном виде не будут одинаковыми на обеих платформах. Использование React Native дает преимущество в создании приложений для Android и IOS, ведь для этого нужна всего одна команда. Было бы полезно иметь опытного нативного разработчика среди членов команды. И две разные команды разработчиков больше не требуются.
Учитывая тот факт, что React Native- это лицензированная MIT платформа с открытым исходным кодом, она дает разработчикам доступ к использованию библиотек и фреймворков бесплатно. Это накладывает определенные ограничения на повторное использование программного обеспечения, но также обеспечивает правовую защиту для разработчиков.
Функция горячей перезагрузки является одной из самых полезных и привлекательных для разработчиков. Это позволяет разработчику внедрять изменения в код и видеть изменение в приложении в реальном времени. Таким образом, это позволяет обновить приложение, которое уже работает. Все, что требуется- это отредактировать исходный код, и обновление будет запущено в реальном времени после сохранения файла. Поэтому разработчики могут выпускать обновления без вынужденных простоев.
Сайт Statista показывает, что React Native-самая популярная на сегодняшний день платформа для разработки кроссплатформенных приложений с долей рынка 42% и количеством скачиваний более 90 тысяч на Github. Это неудивительно, потому что платформа обеспечивает огромную выгоду для разработчиков мобильных приложений.
Нативные приложения действительно имеют более высокую производительность, но приложения, созданные на React Native, также показывают впечатляющую производительность, сравнимую с нативными приложениями. Благодаря встроенным мобильным устройствам и элементам управления в приложениях React Native, которые используют собственные компоненты ОС, чтобы без проблем создавать коды для собственного API.
Очень часто пользователям трудно отличить нативные приложения от приложений на React Native. Это связано с тем, что пользовательские интерфейсы React Native выглядят так же, как и в нативных приложениях. Все это возможно благодаря мощным возможностям JavaScript, который беспрепятственно взаимодействует с нативной средой.
React Native использует технологию модульного программирования, в которой функции реализованы в виде отдельных блоков, называемых модулями. Этот подход обеспечивает гибкую среду разработки приложений, а также улучшает взаимодействие между разработчиками. Он позволяет легко создавать и интегрировать обновления приложений с помощью простых в использовании модулей, которые можно повторно использовать как для WEB, так и для мобильных API.
Топ Десять Минусов React Native
Ниже приведены основные недостатки React Native.
Несмотря на все замечательные функции, React Native все еще является бета-версией! Вот почему у нее все еще есть некоторые очевидные проблемы, как, например, сложность отладки приложений, а также ограничения, включая проблемы совместимости. Имейте в виду, что работа с React native может быть проблематичной, когда возникает необходимость в отладке.
Хотя опыт в JavaScript может далеко продвинуть вас в разработке на React Native, вам все равно нужны услуги нативных разработчиков для реализации определенных функций приложения. Таким образом, если вам нужно реализовать некоторые уникальные функции, среднестатистический разработчик JavaScript не сможет их реализовать.
Хотя разработчики могут использовать библиотеки для выполнения многих функций, они не сильно помогут, если они столкнуться с нативными проблемами. Так что имейте в виду, что в некоторых проектах по созданию приложений вам понадобится помощь нативных разработчиков.
Тот факт, что React Native был разработан Facebook, впечатляет, но одновременно является одним из недостатков платформы. Предположим, что Facebook перестанет предоставлять резервную копию платформы, тогда вы уже не сможете ее больше использовать. Но сейчас многие другие платформы предлагают те же функции, что и React Native.
React Native создает приложения с отличными функциями. Однако React Native может оказаться не самой лучшей платформой для создания приложений, эффективно управляющих аппаратными ресурсами.
Поскольку управление памятью в React Native не находится на высоте, то не стоит выбирать эту платформу для создания высокопроизводительных приложений. Если вам нужно создать приложение, которое должно делать сложные вычисления, вам лучше искать альтернативную платформу разработки.
Проблемы с лицензированием и патентами- еще один существенный недостаток ReactNative. В 2017 году Facebook обновила лицензионную политику для своих проектов с открытым исходным кодом. В нем говорится, что доступ пользователя может быть заблокирован Facebook, если на продукт, созданный с помощью их проектов с открытым исходным кодом, будет выдан патент.
Инновации в мобильных технологиях требуют быстрого использования; почти каждая новая модель вводит новые функции, которые нуждаются в новых обновлениях программного обеспечения, чтобы эффективно использовать их. Хотя React Native имеет опыт поддержки новых аппаратных функций, он часто задерживает выпуск новых обновлений. В других случаях для использования таких функций требуется собственная поддержка.
JavaScript хорошо известен своей низкой безопасностью. Именно поэтому JavaScript не используется для создания приложений, которые должны обеспечивать первоклассную безопасность. Несмотря на это, React Native использует JavaScript для основных задач разработки. В свете этого React Native следует использовать для разработки проектов, где безопасность не имеет первостепенного значения. В качестве альтернативы следует самим обеспечивать защиту первостепенно важных данных, таких как платежная информация.
React Native отлично подходит для создания простых приложений с привлекательными визуальными эффектами. Однако добиться отличной производительности становится непросто, когда вам нужно добавить сложные функции. Так что, возможно, вам выбрать одно из двух: функционал или интерфейс
Поскольку код, созданный на React Native, не генерируются изначально, решение проблем, связанных с конкретным устройством, может усложниться. Такие вопросы приводят к сложным проблемам, их которых невозможно найти выход.
Компоненты, необходимые для создания некоторых видов приложений, отсутствуют в ReactNative. Таким образом, вы должны использовать сторонние ресурсы для добавления этих компонентов в ваше приложение. В то время как использование сторонних компонентов является возможным, вы можете потерять на этом много времени и сил. В таких случаях вам придется найти способ решить проблему самостоятельно. Вот почему сложно использовать сторонние компоненты в проектах разработки приложений.
Заключение
React Native- это самый популярный кроссплатформенный фреймворк разработки с долей рынка 42%.
Его преимущества включают в себя высокую производительность, схожую с производительностью нативных приложений, поддержку сообщества и многое другое. Недостатки фреймворка заключаются в плохом управлении памятью, необходимостью иметь нативных разработчиков и изначальных проблем с безопасностью JavaScript.
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
Что такое React Native?
React Native- это платформа для разработки мобильных приложений на JavaScript, используемая для создания мобильных приложений для платформ iOS и Android. Такие приложения имеют производительность, схожую с производительностью нативных приложений. Код, созданный на React Native, может быть одновременно использован на разных платформах. По сути, один код может быть использован для приложений на Androidи iOS.
Каковы Плюсы React Native?
– Производительность схожая с нативными приложениями.
– Разработка на платформе позволяет экономить время и средства
– Бесплатный, использует открытый исходный код, имеет поддержку активного сообщества.
Есть ли какие-то Минусы в React Native?
– Проблемы с управлением памятью
– Проблемы безопасности, связанные с использованием JavaScript
– Потребность в нативном разработчике