Разработка кроссплатформенных приложений сегодня очень шумная. Поскольку компании, занимающиеся разработкой программного обеспечения, вместе со своими клиентами изо всех сил стараются не отставать, мы углубляемся в технические аспекты и рассматриваем кроссплатформенные платформы с самым высоким рейтингом 2019 года. Я надеюсь дать вам немного больше, чем просто общий взгляд или совет о том, что выбрать.
React Native был создан Facebook. История началась во внутреннем проекте по хакатону летом 2013 года. Полная версия React Native была опубликована в 2015 году в React.js Con. В марте 2015 года на F8 Facebook объявил, что React Native теперь доступен на GitHub. Facebook, разрабатывая собственные продукты, такие как Messenger, и используя их опыт в веб-инфраструктуре React.js, создала решение для создания собственных компонентов приложения из потока JavaScript.
Для более общего представления о фреймворке читайте о плюсах и минусах React Native .
Первая версия Flutter под кодовым названием «Sky» была представлена в 2015 году на конференции разработчиков Dart. Первая стабильная версия, позволяющая компилировать нативные приложения для Android и iOS из одного кода Версия 1.0 была выпущена на мероприятии Flutter Live, декабрь 2018 года. Среди главных преимуществ фреймворка создатели отметили плавный уровень работы с нативными приложениями и поддержку состояние приложения Hot Reload. Первоначальный прием новых рамок был очень позитивным, и первые отзывы о трепетании дали нам многое, чего можно было ожидать.
JavaScript является основным языком программирования для React Native. Расширение JSX включено по умолчанию для облегчения написания декларативных компонентов пользовательского интерфейса, как в React.js. Программист не ограничен в использовании других транспортеров. Вот почему Flow, TypeScript или ReasonML часто встречаются в программировании React Native. Кроме того, вы можете использовать новейшие языковые конструкции, такие как async / await или генераторы. В конечном итоге, после переноса приложение на вашем телефоне полностью поддерживает JavaScript.
React Native содержит набор стандартных элементов пользовательского интерфейса, снабженных привязками к собственным компонентам, которые будут использоваться в приложении в соответствии с операционной системой. Компоненты могут быть свободно сгруппированы в иерархической структуре декларативного представления. Они могут отображать другие декларативные компоненты или компоненты с собственными привязками.
Компонент (React.Component) является фундаментальной концепцией в React Native. Это объект (или функция), который имеет «реквизит» и «состояние». Для заданных реквизитов и состояния компонент должен возвращать представление, но только при изменении реквизита или состояния. Реквизиты являются типом аргументов для компонента, которые устанавливаются извне - компонент не контролирует их. Состояние, с другой стороны, является внутренними, частными данными, полностью и исключительно под контролем компонента.
React Native использует однонаправленный поток данных, который отличает его от других декларативных сред, таких как Angular (двусторонняя привязка данных). Это повышает производительность и упрощает отладку. Односторонний поток данных в React Native осуществляется путем передачи компонента в фазе рендеринга только для чтения реквизитам и состоянию. Он может свободно преобразовывать их, передавать их вниз по иерархии представлений, но не должен иметь возможности напрямую изменять их. То же самое касается дочерних компонентов, которые будут получать эти данные в качестве реквизита. Изменение реквизита или состояния напрямую не обновит представление. Для этого используйте метод setState компонента (или аналогичную функцию при использовании Redux или других решений). Обработка событий дочерними компонентами должна осуществляться путем передачи реквизитов обратных вызовов для обработки событий, которые в конечном итоге реализуют родительский setState по мере необходимости.
Приложения Flutter написаны на Dart, объектно-ориентированном языке с системой типов, которая сочетает статическую типизацию с управлением во время выполнения. Это позволяет выводить типы, так что вы можете пропустить их объявления. Он имеет механизм async / await, который вместе с типом Future позволяет писать асинхронный код, как если бы он был синхронным. Если вы знакомы с Kotlin или JavaScript, изучение Dart не должно быть проблемой.
Основным строительным блоком пользовательского интерфейса является виджет. Принцип работы аналогичен React Native - документация Flutter фактически упоминает React как источник вдохновения. Отдельные элементы расположены в иерархической структуре, перестраиваются каждый раз, когда изменяется состояние приложения. Это не означает, однако, что представление строится снова и снова. Возвращенная структура является только посредником, в котором платформа изменяет видимый интерфейс. Таким образом, Flutter заменяет императивный стиль, известный на нативных платформах, декларативным стилем, снимая бремя написания и управления переходами между возможными состояниями интерфейса с плеч программиста.
Flutter предлагает широкий ассортимент готовых виджетов, соответствующих рекомендациям по дизайну материалов. Программист имеет, помимо прочего, кнопки, текстовые поля с заголовками или оболочки, которые управляют положением балок или плавающих кнопок. Расположение элементов на экране может вызвать некоторую путаницу, поскольку мы определяем положение и внешний вид компонентов, помещая их в контейнеры. Это часто приводит к росту структуры и заставляет вас помнить поведение и отношения между несколькими типами контейнеров.
Архитектура BLoC (Bussiness Logic Component) является одним из решений, предложенных Google. Он размещает варианты использования в отдельных классах. Связь с ними происходит через асинхронные потоки, где интерфейс публикует события в соответствующих «входах» BLoC и в то же время прослушивает выходные данные для потока последующих состояний приложения. Посредником между этими компонентами и интерфейсом является виджет StreamBuilder, который получает данные из потоков. Основное предположение этой архитектуры заключается в том, чтобы адаптировать приложение для работы в асинхронной среде, где в любое время и в любом порядке поступают различные данные.
Программисты, знакомые с архитектурой RxJava и MVVM , определенно найдут это удобным решением. Однако это не единственный способ, поскольку Flutter может работать, например, с Redux, и тогда состояние может распространяться самими компонентами. Этот процесс может быть упрощен с помощью InheritedWidget, который сократит путь к целевому компоненту, к которому должны перемещаться данные. Поставщик также может быть использован в качестве решения, являясь библиотекой, объединяющей внедрение зависимости и управление состоянием приложения. С его помощью программист может предоставить необходимые значения в соответствующие места в интерфейсе. Вы можете внедрить любые объекты, простые данные, потоки или объекты, наблюдающие изменения данных (например, ChangeNotifier).
Все вышеперечисленные решения хорошо документированы и объяснены в официальных руководствах. Это поможет многим программистам реализовать решения, которые они уже знают.
Теперь давайте сравним некоторые основные инструменты, доступные программистам, работающим в кроссплатформенных средах.
Горячая перезагрузка обеспечивает сильное ускорение процесса разработки, потому что каждое изменение в JavaScript можно увидеть на телефоне практически сразу. Функция ограничена только режимом отладки (необходимо подключить Metro-Bundler), а собственные изменения не видны.
Все, что вам нужно сделать, это установить одно приложение Expo на свой телефон, и вы можете загрузить код приложения RN из Интернета или QR-код и мгновенно обновить его при его изменении. Он не подходит для создания производственных приложений, а скорее для быстрого прототипирования. Если мы просто хотим добавить реальные push-уведомления, Crashlytics или любую библиотеку, не включенную в Expo SDK, мы должны сначала завершить работу с Expo и экспортировать (expo eject) проект в «полную» версию.
Нам даже не нужно устанавливать Expo на телефон, так как мы можем смоделировать приложение в браузере!
Программа для создания нового проекта React Native. К сожалению, очень ограниченные возможности, и программа используется из терминала.
Обычно предстоит выполнить еще много работы по инициализации, например, генерация сертификатов, добавление вариантов dev / prod или подключение Crashlytics. Вы можете подготовить шаблон проекта для более быстрого запуска новых проектов, но среда React Native меняется так быстро, что мы будем использовать такой шаблон только один раз. Плохо по сравнению с дизайнерами проектов в Android Studio / XCode.
Есть несколько фреймворков для React Native. По умолчанию «Jest» включен. Мы можем легко добавить новые модульные тесты, поместив их в __tests__ и выполнив команду «npm test». Вы должны быть осторожны при импорте собственных модулей - вам нужны макеты, которые часто отсутствуют в пакетах npm или работают плохо.
Все должно быть сделано изначально, и мы ограничены тем, что предлагает Android Studio / XCode. У нас есть две платформы для управления, и здесь нет никаких преимуществ React NativeFLUTTER
Flutter предлагает плагины для облегчения работы в Android Studio и Visual Studio Code. Они поддерживают создание проектов, отладку и функцию Hot Reload.
Инструмент для отладки и профилирования приложений из вашего браузера. Это позволяет, среди прочего, просматривать интерфейс в виде дерева и проверять отдельные виджеты. Он также позволяет отслеживать использование памяти, ресурсов процессора и тестирование производительности приложений.
Это позволяет отлаживать не только код Dart, но и файлы, созданные для конкретной платформы. Это особенно полезно при написании собственных системных решений.
Flutter предлагает свой собственный плагин, предназначенный для выполнения модульных и интеграционных тестов, а также для проверки виджетов. Для ложных зависимостей официальная документация рекомендует Mockito.
Flutter поддерживает разновидности, которые позволяют вам настраивать различные варианты сборки, осуществлять поиск среди существующих версий продукта Android и схемы iOS. Вы можете ссылаться на них непосредственно в коде Dart или вызывать их из CLI Flutter, но они должны быть настроены отдельно для каждой платформы. Процесс описан в статьях сообщества Flutter. Что с этим, Google?
Чтобы подготовить релизную версию, необходимо настроить каждую платформу индивидуально. В документации описан процесс редактирования отдельных файлов, но знание Android и iOS определенно ускорит процесс.
Google активно поощряет разработчиков учиться и переключаться на Flutter. Есть много учебных материалов, доступных в виде лекций и видеоуроков.
Документация является исчерпывающей, содержит множество примеров и подробно объясняет различные аспекты работы со средой - от создания интерфейса до написания тестов. Авторы фреймворка дают нам рецепты для создания разнообразных элементов современных приложений. Они также предлагают простую и дружественную к флаттеру архитектурную модель - BLoC. Раздел, посвященный программистам, знакомым с другими популярными платформами, как мобильными, так и веб, очень полезен. Это объясняет ключевые различия между Flutter и другими средами программирования.
Предлагаемая поддержка облегчает изучение структуры. В зависимости от вашего опыта, вам может потребоваться освоить ReactiveX, декларативный пользовательский интерфейс или шаблон асинхронного ожидания / ожидания. Фреймворк использует язык Dart, не столь популярный, как JavaScript или Java, поэтому для некоторых программистов это будет означать необходимость потратить некоторое время на изучение синтаксиса. В рейтинге популярности Stack Overflow с 2019 года он занял 22 место с результатом всего 1,9% - результат, далеко отстающий от лидера первой позиции - JavaScript. Тем не менее, он очень похож на другие объектно-ориентированные языки и имеет защиту типов, поэтому переключение не должно быть слишком сложным.
Кроме того, в указанном рейтинге в категории «Самые любимые» оба языка демонстрируют практически одинаковый результат, JavaScript - 66,8%, Dart - 66,3%. Категория отражает, сколько разработчиков заинтересованы в работе с данной технологией. Учитывая, что большинство результатов приближается к 60%, Дарт кажется простой и интересной технологией для изучения.
Кроссплатформенные платформы продолжают развиваться и завоевывают популярность в ИТ-среде. Решения, которые создают приложения, аналогичные собственным, однозначно вытесняют гибридные решения, предлагая лучшую производительность, а также внешний вид и поведение приложения. Flutter и React Native, похоже, играют важную роль в кроссплатформенном поле.
Рынок проявляет большой интерес к приложениям React Native . Это происходит не только от экономных стартапов, но и от крупнейших мировых брендов. Фреймворк кажется идеальным выбором для создания версий программного обеспечения MVP .
Обе платформы создают представления декларативным способом. Они вводят аналогичные концепции Компонента и Виджета, как базовых строительных блоков приложений, работающих на основе неизменного состояния. Каждый из них также предлагает функцию «Горячая перезагрузка», которая позволяет быстро перезагрузить работающее приложение и увидеть внесенные изменения.
В основе обеих технологий довольно похожи. Они используют декларативный стиль построения пользовательского интерфейса и довольно гибки, что позволяет разработчику применять различные методы для управления состоянием приложения. Доступ к функциям устройства обеспечивается с помощью плагинов.
React Native в этой области больше полагается на сообщество, имея несколько отдельных библиотек для выполнения одних и тех же задач. Это может быть как недостатком, так и преимуществом. Flutter остается под большим контролем своих авторов, которые постоянно предоставляют готовые решения. В то же время они сотрудничают с растущим сообществом в поиске недостающих инструментов, таких как поддержка баз данных.
Окончательное решение об использовании технологии принадлежит разработчикам. Флаттер как младший каркас неизбежно менее популярен. React Native, использует JavaScript и основан на React.js, поэтому он может быть более привлекательным для опытных веб-разработчиков.
Тем не менее, обе технологии имеют определенные уровни входа. Разработчикам, имеющим опыт разработки собственных приложений, придется ассимилировать шаблоны, известные в веб-продуктах, а не те, к которым они привыкли, тогда как разработчикам переднего плана придется столкнуться с конкретными шаблонами разработки для мобильных платформ. Знание конкретных платформ также будет полезно, хотя бы для улучшения процесса создания и реализации приложений.