React Native

React Native — это фреймворк для языка программирования JavaScript. Этот фреймворк позволяет писать на JS приложения для систем Android и iOS, поэтому его чаще всего используют в мобильной разработке.

React Native разработан на основе React.js, но это не новая версия React, а отдельный продукт со своими целями. Классический React нужен для веб-разработки, React Native — для мобильной.

Слово native — это «нативный» по-английски. Но React Native и нативный JS — разные понятия. Нативным JavaScript называют «чистый» язык без фреймворков. А React Native для JS — название фреймворка. Его называют «нейтивом», потому что он позволяет писать приложения, умеющие пользоваться компонентами операционной системы.

Чем React Native отличается от других решений

Нативные приложения для Android пишутся на языках Java и Kotlin, а для iOS — на Swift. Такое ПО может пользоваться функциями системы: меняться информацией с системными процессами, написанными на том же языке. Но перевести нативное Android-приложение на iOS или наоборот — задача, которая требует переписать весь код с нуля.

Еще существуют кросс-платформенные решения, например Ionic. Они позволяют писать приложения под iOS и Android одновременно. Большинство из них применяют веб-технологии: внутри приложения находится как бы браузер, а весь интерфейс — по сути веб-страница. Такие приложения обычно менее эффективны и требуют рисовать компоненты самостоятельно. 

React Native отличается от всех остальных. В отличие от всех перечисленных решений, React Native работает с системой напрямую и при этом не требует изучения Java, Kotlin или Swift. Изначально внутри фреймворка создавался «мост», который связывал код на JS с системными потоками iOS и Android. «Мост» был асинхронным: делал что-то не все время, а только когда к нему обращался процесс.

В последние годы от концепции «мостов» стали отходить — она оказалась недостаточно эффективной. В крупных приложениях одному «мосту» нужно было передать большое количество процессов, и получался эффект бутылочного горлышка. Поэтому в 2022 году на замену «мостам» пришла технология JavaScript Interface, или JSI. 

Для чего нужен React Native

Благодаря технологии «моста», а потом и JSI React Native стал универсальным решением для мобильной разработки. И вот почему.

• Не требует изучать несколько разных технологий — достаточно знать JS, React.js и React Native, а учить Java, Kotlin или Swift не нужно.
• Обеспечивает кросс-платформенность — приложение для Android легко перенести на iOS и обратно, при этом не нужно переписывать с нуля всю программу.
• Работает с нативными компонентами — в React Native нет представления программы как веб-интерфейса, вместо HTML используются модули и элементы из системы Android или iOS. В итоге приложение быстрее и функциональнее.

С помощью React Native создают многие популярные мобильные приложения. Например, на нем написано приложение Facebook*, а также приложения сервиса просмотра картинок Pinterest, интернет-магазина Walmart и мессенджера Skype. Кстати, Skype использует React Native и для десктопной версии программы — так тоже можно.

Особенности React Native

Структура интерфейса из React. React JS, на основе которого создан React Native, используется для создания пользовательских интерфейсов. Поэтому разрабатывать на React Native интерфейс приложения довольно удобно — у него логичная структура компонентов и понятный код.

Библиотеки и модули. У React Native довольно большой набор библиотек и модулей под разные задачи — и для iOS, и для Android. Некоторые части кода даже написаны на нативных языках этих ОС. А при необходимости можно создать собственный модуль.

CodePush. Интересная фишка React Native — возможность быстрого обновления приложения. Разработчик может изменить код программы у пользователей напрямую и не загружать его в магазин приложений заново. 

Flux-архитектура. Flux — это подход к построению архитектуры, который основан на однонаправленных потоках. Для него существуют наборы модулей, которые помогают эту архитектуру реализовать. Одноименный программный модуль Flux — решение от Facebook*, разработчики которого и придумали React Native. Также используют Redux — еще одну реализацию архитектуры, которую создало сообщество энтузиастов.

Преимущества фреймворка

Кросс-платформенность и повторное использование кода. Главный плюс React Native — благодаря нему можно не писать код одного и того же приложения с нуля. Переиспользуемость кода в отдельных проектах может составлять до 90%: это значит, что 90% кода из Android-проекта можно без особых изменений перенести в iOS-версию приложения. 

Скорость и простота разработки. Благодаря тому, что код можно использовать повторно, создать приложение с помощью React Native можно довольно быстро. А еще можно легко перенести его на другую мобильную ОС. Да, сборка для Android не будет работать в iOS, но изменений для создания iOS-версии нужно минимум. Это ускоряет разработку и поддержку приложений.

Быстрое обновление. Благодаря функции CodePush приложения можно обновлять без промежуточного этапа в виде загрузки обновлений в магазин. Пользователь устанавливает приложение на свой смартфон, а когда выходит обновление, приложение качает и устанавливает его само — ему для этого не нужно связываться с Google Play или App Store. Для разработчика это означает меньше сложностей с загрузкой обновлений в маркеты и быструю доставку их до пользователя.

Экономическая эффективность. Разрабатывать приложения с помощью React Native дешевле для бизнеса. За то же время и тот же бюджет компания фактически получает две версии приложения для разных систем. А при нативной разработке — только одну, а чтобы создать вторую, придется переписывать всё с нуля.

Больший охват. Можно одновременно охватить аудиторию iOS и Android, то есть разные сегменты. А если приложение увидит больше людей, соответственно, у его владельца будет больше клиентов.

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

Низкий порог входа. JavaScript, на котором пишутся проекты React Native, считается довольно простым в изучении языком по сравнению с тем же Java или Swift. Он подходит для начинающих разработчиков. Понадобится изучить его и фреймворки React и React Native, и всё. В отличие от других кросс-платформенных решений, основанных на веб-технологиях, тут не нужны будут даже знания HTML и CSS.

Недостатки React Native

Больший размер и меньшая производительность. Если сравнить приложение на React Native с полностью нативным, первое будет больше весить. Так происходит потому, что для работы приложения нужна «прослойка», которая будет соединять JS-код с системными потоками. Быстродействие у React Native-приложений тоже ниже, чем у нативных. Впрочем, выход JSI помог сгладить эту разницу.

Отсутствие внешнего единообразия. React Native использует нативные компоненты интерфейса: значки, слайдеры, кнопки и шрифты, которые применяются в самой системе. Но эти элементы разные для каждой ОС. Поэтому без кастомных стилей приложение может выглядеть абсолютно по-разному в iOS и Android. Приходится прилагать дополнительные усилия, чтобы графический интерфейс в разных версиях был похожим.

Меньшая безопасность. В React Native приложение «собирается» по ходу выполнения — это называют JIT-компиляцией. Других режимов нет. Этот подход считается менее безопасным, чем AOT-компиляция — когда всё приложение «собирается» разом. Из-за JIT-компиляции в теории возможна ситуация, когда пользователь получает несанкционированный доступ к исходному коду приложения.

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

Какие есть альтернативы

Кроме React Native, для кросс-платформенной мобильной разработки используют фреймворки Ionic, Flutter и другие. Они работают по иному принципу и не такие нативные, зато не требуют привлечения других разработчиков для реализации сложных фич. Что именно выбрать — зависит от навыков и потребностей. Например:

• Ionic часто используют для прототипов или MVP, например в стартапах, но сложное приложение с большой функциональностью с большой вероятностью окажется перегруженным;
• Flutter можно считать полноценной альтернативой React Native, но для него пока меньше модулей и библиотек, а специалисты нужны не так часто.

Стоит ли начинать изучение мобильной разработки с React Native

Да, это одна из опций. Вообще, у начинающего мобильного разработчика два варианта действий:

• стать нативным разработчиком и программировать на языках Java и Kotlin для Android либо Swift для iOS;
• стать кросс-платформенным разработчиком и работать с JavaScript.

React Native — один из инструментов для тех, кто выбрал второй вариант. Кроме него, можно начать с Flutter, более молодого фреймворка, который известен скоростью и удобством. Или с Ionic, не такого быстрого, зато легкого в освоении и требующего только знания веб-технологий.

Какой из инструментов выбрать первым — сложно предугадать заранее. У всех есть свои плюсы и минусы, и мы советуем выбирать то, что больше нравится и более удобно в использовании. А чтобы сделать такой выбор, стоит попробовать всё — и понять, к чему лежит душа. 

На наших курсах вы можете протестировать разные IT-профессии и выбрать из них ту, которая понравится больше других. Записывайтесь и сделайте первый шаг к новой профессии!

*Принадлежит компании Meta, которая признана экстремистской и запрещена на территории РФ.