Это вторая часть серии статей. Ознакомьтесь с частью 1, если хотите узнать, почему мы выбрали React Native и как мы к нему подошли.

Авторы Кеннет Сковхус и Кевин Пелгримс.

React Native под капотом, ускоренный курс

Чтобы понять, как React Native работает на мобильных устройствах, сначала нужно взглянуть на виртуальную DOM (объектную модель документа), которая используется как в React, так и в React Native. Если вы когда-либо занимались веб-разработкой, вы знаете, как DOM работает в браузере. Если нет, возможно, вам будет интересно почитать об этом. Вкратце: DOM представляет страницу как узлы и объекты. В простом React виртуальная модель DOM - это представление пользовательского интерфейса в памяти поверх реальной модели DOM. Когда узел или объект изменяется, React будет различать виртуальную DOM и фактическую DOM и обновлять только те узлы или объекты, которые изменились. В React Native нет DOM браузера. Вместо этого виртуальная модель DOM отображается в собственных представлениях iOS или Android.

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

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

Навигация сложна

Навигация всегда была проблемой в React Native, но огромное количество доступных пакетов показывает, что эта область находится в стадии разработки. В идеале Facebook создаст или, по крайней мере, порекомендует одно решение. Но пока это не так, и мы все должны выбрать стороннюю библиотеку и придерживаться ее. Для нас главными претендентами были react-navigation и wix / react-native-navigation. Первый очень гибкий и работает исключительно на JavaScript, а второй основан на нативной навигации на обеих платформах. Мы решили перейти на react-native-navigation, потому что мы чувствовали, что нативные компоненты сделают приложение более знакомым для наших пользователей.

Привыкаю к ​​JavaScript

JavaScript? Нет, спасибо

В кругах разработчиков мобильных приложений большинство людей съеживаются при мысли о написании всего приложения на JavaScript. Зачем вам вообще такое делать? У JavaScript плохая репутация, и это справедливо. Если вы работали с JavaScript десять лет назад, вероятно, у вас был ужасный опыт. Подходит для небольших скриптов на веб-сайтах, но не идеален для разработки приложений любого значительного размера.

Однако все изменилось, и за последние десять лет были предприняты значительные усилия по разработке инструментов, фреймворков и движков. Мы видели создание jQuery, V8, Node, Backbone… Все эти усилия превратили JavaScript в один из наиболее часто используемых языков в мире. Сегодня Angular от Google и React от Facebook - два самых популярных фреймворка JavaScript. Они используются самими Google и Facebook и обеспечивают прочную основу для разработки приложений.

Современный JavaScript

Сам JavaScript также значительно продвинулся за последние несколько лет. Когда вышел EcmaScript 6, разработчики наконец получили доступ к функциям, которые уже были распространены в большинстве современных языков программирования, таким как классы, стрелочные функции (также известные как лямбды), интерполяция строк, let и const и многое другое. Между тем, CoffeeScript и Babel первыми внедрили транспиляцию, чтобы каждый мог начать использовать новые языковые функции, которые еще не были реализованы во всех браузерах или движках. ES 7 и 8 продолжали значительно продвигать язык, и теперь мы можем сказать, что JavaScript может быть очень хорошим языком для работы.

Конечно, это не все солнечные лучи и радуги. Хотя сам язык становится лучше, по-прежнему сложно создать хорошую среду разработки. Из-за динамической природы языка выполнение такой простой задачи, как переименование переменной, по-прежнему может быть проблемой. Начиная с Android, вы можете найти IntelliJ JetBrains полезным из-за его знакомства. Веб-разработчики склонны придерживаться таких редакторов, как VSCode или Atom, когда они переходят на React Native. Пока есть плагины для поддержки того, что вам нужно, вы можете использовать любой редактор, какой захотите.

Мы обнаружили, что со многими недостатками JavaScript можно бороться с помощью внутренних соглашений о кодировании и хорошей настройки инструментов для их применения. Как только вы приобретете привычку писать хороший идиоматический JavaScript в правильной архитектуре, он станет довольно приятным, даже если вы пришли из Swift или Kotlin на родине.

Инструменты

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

Статический анализ и непротиворечивость кода

Динамический и слабо типизированный характер JavaScript делает его особенно подверженным ошибкам во время выполнения. Чтобы помочь нам найти эти ошибки перед запуском приложения, мы используем ESlint. ESlint также помогает нам видеть мертвый код и обнаруживать проблемные шаблоны, которые проникают в кодовую базу. Наша конфигурация основана на широко используемом eslint-config-airbnb.

Хотя ESlint также может проверять, соответствует ли кодовая база определенному руководству по стилю, мы твердо убеждены, что стиль кода должен быть реализован с помощью инструмента. Вместо того чтобы обсуждать стиль кодирования, мы используем Prettier для форматирования нашего кода. Он интегрируется с ESlint, поэтому при нажатии кнопки сохранения в нашем редакторе код форматируется и статически анализируется.

Государственное управление

Что касается управления состоянием, нам нравится простота и тестируемость Redux. Мы используем промежуточное ПО redux-persist для чтения и записи частей нашего хранилища Redux на диск.

Статическая проверка типа

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

TypeScript от Microsoft и Flow от Facebook - аналогичные инструменты, обеспечивающие постепенную статическую типизацию, аналогичный синтаксис и широкое распространение.

Для React Native Flow был естественным выбором. Он прекрасно интегрируется с инструментом сборки, и большинство сторонних библиотек уже предоставляют типы Flow.

Тем не менее, проверка шрифта - не панацея. Кривая обучения крутая, и вы обнаруживаете, что боретесь с системой шрифтов. Но мы рады, что в этой области происходит большое развитие. Одним из наиболее многообещающих вариантов на будущее является Reason (также от Facebook), типобезопасный язык, построенный на основе OCaml, который компилируется в очень читаемый JavaScript.

Сборник рассказов как средство повышения производительности

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

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

  • Работа с компонентами и экранами изолированно, без запуска всего приложения
  • Уметь описывать и быстро переключаться между компонентами и экранами в разных состояниях
  • Поддержка горячей перезагрузки при изменении стилей и разметки
  • Подключите несколько симуляторов и кроссплатформенных устройств и смотрите, как все они обновляются при обновлении кода.

Мы рады видеть, что Storybook предоставляет все это. Это серьезный ускоритель производительности при разработке пользовательского интерфейса.

Автоматизированное тестирование

Для модульного и интеграционного тестирования мы используем Jest - еще один отличный инструмент с открытым исходным кодом от Facebook. Он предоставляет платформу для тестирования с отличным режимом наблюдения, поддержкой покрытия, довольно простой имитацией и быстрой обратной связью при написании тестов. Когда он работает в Node, вы имитируете все собственные компоненты (хотя для этого требуется некоторая настройка).

Мы экспериментировали с Appium и Amazon Device Farm для кроссплатформенных тестов автоматизации пользовательского интерфейса. Но в настоящее время мы сосредоточены на надежной и быстрой настройке модульного тестирования, которая помогает нам обнаруживать ошибки и документировать ожидаемое поведение нашего кода.

Поддержка редактора

Каждый в команде использует свой предпочтительный редактор, будь то Visual Studio Code, Atom или IntelliJ IDEA. Чтобы иметь хороший и последовательный опыт разработки, мы гарантируем, что все наши редакторы:

  • Показать ошибки ESlint
  • Вызов eslint — fix при сохранении файла (мы никогда не выполняем ручное форматирование, для этого у нас есть Prettier)
  • Разбираемся с объявлениями Flow, поэтому мы получаем автозаполнение и ошибки типа в редакторе

Что дальше?

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

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