В чем основные различия между ReactJS и React-Native?

Что я узнал, создавая веб-приложения, а затем мобильные приложения на React

React-Native существует уже около 2 лет и стал действительно интересным фреймворком, поскольку его можно использовать для Android и позволять создавать кроссплатформенные мобильные приложения. Несколько участников также настроили фреймворк для создания настольных приложений для Mac и Windows, что довольно круто.

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

Настройка и комплектация

React-Native - это фреймворк, где ReactJS - это библиотека javascript, которую вы можете использовать для своего веб-сайта. Когда вы начинаете новый проект с ReactJS, вы, вероятно, выберете сборщик, такой как Webpack, и попытаетесь выяснить, какие модули сборки вам нужны для вашего проекта. React-Native поставляется со всем, что вам нужно, и, скорее всего, вам не понадобится больше. Когда вы начнете новый проект, вы заметите, насколько легко его настроить: он очень быстрый, вам понадобится всего одна командная строка для запуска в терминале, и вы будете готовы к работе. Вы можете сразу приступить к написанию кода своего первого нативного приложения, используя ES6, некоторые функции ES7 и даже несколько полифиллов.

Чтобы запустить приложение, на вашем компьютере должен быть установлен Xcode (для iOS, только на Mac) или Android Studio (для Android). Вы можете либо запустить его на симуляторе / эмуляторе платформы, которую вы хотите использовать, либо непосредственно на своих устройствах.

DOM и стили

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

Большинство предоставленных компонентов можно преобразовать во что-то подобное в HTML, где, например, компонент View аналогичен тегу div, а компонент Text аналогичен тегу p.

Поскольку ваш код не отображается на HTML-странице, это также означает, что вы не сможете повторно использовать какие-либо библиотеки, которые вы ранее использовали с ReactJS, которые отображают любые типы HTML, SVG или Canvas. Хотя вы можете найти альтернативные библиотеки для React-Native, react.parts имеет категорию Native, в которой вы можете найти то, что вам нужно.

Чтобы стилизовать ваши компоненты React-Native, вам нужно будет создать таблицы стилей в Javascript. Он похож на CSS, но не совсем то же самое. Поначалу это может сбивать с толку, и вы можете достичь точки, когда вам станет интересно, как можно создавать миксины, как если бы вы это делали с SASS, или как можно переопределить стиль компонента, который вы хотите использовать повторно. Тогда вы понимаете, что React-Native не состоит из веб-элементов и не может быть оформлен таким же образом. К счастью, вы, скорее всего, найдете альтернативные решения для выполнения того, что вам нужно.

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

Анимации и жесты

Прощай, CSS-анимация! С React-Native вам придется изучить совершенно новый способ анимации различных компонентов вашего приложения с помощью Javascript. Рекомендуемый способ анимировать компонент - использовать Animated API, предоставляемый React-Native. Вы можете сравнить его со знаменитой библиотекой Javascript Velocity.js. Он позволяет создавать различные виды анимации, синхронизированные или основанные на скорости, связанной с жестом, и может использоваться с различными типами замедления. В целом вы можете делать практически любую анимацию, которую вы бы использовали в Интернете. React-Native также предоставляет LayoutAnimation, который на самом деле очень крутой и простой в использовании для переходов, но на данный момент работает только для iOS, так как Android не очень хорошо его поддерживает.

Для взаимодействия с пользовательскими жестами React-Native предоставляет нечто похожее на веб-API событий касания Javascript, называемый PanResponder. Запуск и запуск может показаться обескураживающим, но вы увидите, что это, наконец, не так уж и сложно. PanResponder необходимо применить к представлению (или тексту или изображению) вашего компонента, чтобы включить обработчик касания в этом представлении. Оттуда PanResponder предоставляет список функций, которые вы можете использовать для отслеживания различных событий касания, таких как onPanResponderGrant (touchstart), onPanResponderMove (touchmove) или onPanResponderRelease (touchend). Эти функции предоставят вам доступ к исходному событию и состоянию жеста с такой информацией, как все касания и их местоположение, а также накопленное расстояние, скорость и происхождение касания.

На мой взгляд, основная трудность с PanResponder возникает, когда у вас есть вложенные представления / компоненты с их собственным PanResponder, и вам нужно решить, какой из них должен иметь управление жестом. Чтобы узнать больше об Animated и PanResponder, эта статья может быть очень полезной: React-native Animated API с PanResponder

Навигация

Когда я начал создавать свое первое мобильное приложение с React-Native, мне было интересно, как перемещаться между двумя сценами. Первое, что я сделал, - это поиск альтернативы response-router, этой известной библиотеке, которую большинство веб-приложений React использует для перехода между страницами. Я нашел несколько библиотек, которые выполняют аналогичную работу, но всегда было что-то, что мне не нравилось в тех, которые я пробовал: либо это было довольно сложно использовать, меня не устраивала анимация, не настраивалась так, как я хотел, чтобы это было, или не ведет себя или не работает должным образом на устройствах Android и iOS. Затем мне стало интересно, как на самом деле работает навигация, и я обнаружил компонент Навигатор, предоставляемый React-Native. Я должен был начать с этого, искать альтернативу react-router, на мой взгляд, было не самой лучшей идеей.

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

Код для конкретной платформы

Разработка приложения для нескольких платформ с одним и тем же набором кода иногда может быть немного утомительной, и ваш код скоро начнет выглядеть некрасиво. Я уверен, что вы сталкивались с аналогичными проблемами при написании кода для современных браузеров и при необходимости сделать так, чтобы все выглядело «не так уж плохо» в старых браузерах, добавляя несколько наборов условного кода здесь и там в вашем CSS или даже в Javascript. .

Когда вы создаете собственное приложение, важно знать, что пользовательский интерфейс и возможности для iOS и Android могут отличаться. В этой статье это очень хорошо объясняется: Проектирование и для Android, и для iOS.

Если исходить из предположения, что у вас есть контроль над тем, как ваше приложение будет выглядеть и вести себя, у вас есть два варианта:

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

Если вы решите перейти ко второму пункту, React-Native может определить, с какой платформы вы запускаете код и загрузить правильный код для нужной платформы. Я бы порекомендовал вам определить основную логику ваших компонентов в одном файле с именем index.js, тогда у вас будут презентационные компоненты, определенные с отдельными файлами. Для iOS и Android у вас будут файлы index.ios.js и index.android.js соответственно.

Если вы организуете структуру папок по моей рекомендации, она будет выглядеть так:

/src
  /components 
    /Button
      /components
        /Icon
          /index.android.js
          /index.ios.js      
        /Content
          /index.android.js
          /index.ios.js
      /index.js

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

Инструменты разработчика

Когда вы начинаете новый нативный проект, вы получаете несколько инструментов разработчика из коробки из React без необходимости устанавливать что-либо, и это, на мой взгляд, довольно круто. Доступна горячая перезагрузка, и ее удобно использовать, когда вам нужно внести небольшие изменения в стили вашего приложения. Для более серьезных изменений, влияющих на логику приложения, я обычно предпочитаю использовать Live Reload, который полностью перезагружает ваше приложение, когда вы вносите изменения в код.

Прелесть работы с React-Native также заключается в возможности использовать большинство инструментов разработчика, которые вы используете с ReactJS. Инструменты разработчика Chrome прекрасно работают для проверки сетевых запросов (хотя вам нужно добавить небольшой трюк для просмотра запросов), отображения журналов консоли и остановки кода на debuggerstatements. Вы даже можете использовать отличный Redux DevTools для проверки состояния вашего магазина Redux. Одна функция, которую мне больше всего не хватает, - это возможность проверять DOM, как если бы вы делали это в Интернете, собственный Inspector определенно не так хорош.

Издательский

Если вы разрабатываете приложение как для iOS, так и для Android, вам нужно будет узнать, как работают Xcode и Android Studio, чтобы убедиться, что все настроено правильно, перед первым развертыванием вашего приложения в App Store или Google Play. Для iOS это работает так же, как вы развертываете обычное нативное приложение, хотя для Android вам нужно будет следовать рекомендации React, чтобы подписать свой APK, прежде чем загружать его в Google Play.

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

Подведение итогов

Мне очень нравится сегодня использовать React-Native. Я использую его чуть меньше года, и чертовски быстро установить и подготовить приложение! Вы можете создать сложный пользовательский интерфейс так же быстро, как это сделали бы с ReactJS, и обычно хорошо работает как для iOS, так и для Android. Кривая обучения от ReactJS до React-Native, на мой взгляд, довольно проста, особенно если вам нравится изучать новые фреймворки Javascript; это просто другой способ использования React.

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

Повеселись!

Еще статьи от меня

Обо мне

Привет, я Алексис! Я разработчик полного цикла, занимающийся программированием более 14 лет. Я специализируюсь на разработке Javascript и архитектуре решений для крупномасштабных приложений, и мне нравится проводить бесчисленные часы, изучая и играя с новыми технологиями, которые я использую в своих следующих проектах.
Недавно я начал использовать Twitter, вы можете следить за мной здесь : @Alexmngn



Алексис Мангин
Алексис Мангин | Веб-разработчик и мобильный разработчик, архитектор решений www.alexismangin.com