Получите полный доступ к интерфейсу [Интернет, мобильные устройства и компьютер]
Размышляя о цифровой стратегии, многие клиенты ищут способы, с помощью которых они могут поддерживать несколько платформ [настольных, веб- и мобильных] и сред с использованием одной и той же кодовой базы, чтобы можно было значительно сэкономить на затратах на разработку и обслуживание.
Это отличная новость для сообщества веб-разработчиков, поскольку навыки, приобретенные для веб-разработки, могут быть повторно использованы для мобильных и настольных платформ. Мы можем увидеть большую поддержку предприятий, применяющих описанный выше подход, но нам, как веб-разработчикам, необходимо понимать основы работы каждой платформы, чтобы быть готовыми к этой тенденции.
Ниже я оценил две платформы [Ionic и React Native], которые позволяют создавать мобильные приложения с использованием Javascript. С каждой структурой я также добавил моменты, которые необходимо учитывать при нацеливании на кроссплатформенный подход.
Ионный
IONIC Framework - это фреймворк, созданный с учетом мобильных приложений. Мобильное приложение, созданное с помощью Ionic, представляет собой гибридное приложение, которое размещает веб-ресурсы внутри веб-представления и использует Cordova для доступа к специфическим функциям платформы. Поскольку IONIC использовала веб-технологии, вскоре было обнаружено, что ту же структуру можно расширить для создания веб-приложений и настольных приложений. В настоящее время он нацелен на PWA [Progressive Web App] для Интернета.
Стратегия
Поддержка платформы
Ionic был разработан с учетом платформы мобильной разработки, поэтому он поддерживает не все веб-браузеры, а поддержка настольных приложений обеспечивается платформой Electron. Поэтому перед запуском мы должны подтвердить, поддерживает ли фреймворк требуемые среды.
Макет на разных платформах
Ionic был специально разработан для разработки мобильных приложений, поэтому большинство ионных компонентов были разработаны с учетом мобильного экрана, но недавно они представили компоненты, которые адаптируются в зависимости от размера экрана, чтобы обеспечить хорошее расположение на больших экранах. Два из них упомянуты ниже.
· Разделить панель
· Отзывчивая сетка
Помимо того, что IONIC использует веб-технологии, вся настройка интерфейса может быть достигнута с помощью медиа-запросов и настроек CSS.
Хранилище данных
Поскольку большинство решений обычно хранят некоторые данные на стороне приложения, нам нужно определить объем данных, которые мы хотим сохранить, и какие у нас есть лучшие варианты. Библиотека Ionic Storage довольно хорошо обеспечивает слой над различными вариантами хранения на стороне клиента, но на основе предпочтений мы можем предоставить заказ на выбор базы данных в зависимости от доступности. Порядок по умолчанию, как показано ниже.
Возможности, необходимые для взаимодействия с другими компонентами
В большинстве решений нам необходимо взаимодействовать с другими компонентами, такими как камера, GPS, файловая система. Ionic использует библиотеку Ionic Native, которая внутри использует плагины Cordova для взаимодействия с другими встроенными компонентами, такими как камера и GPS. Поскольку компоненты Cordova были специально разработаны для мобильных приложений, мы должны быть уверены, что плагин, который мы пытаемся использовать, будет нормально работать в немобильных средах, таких как Интернет или компьютер. Компоненты Ionic Native определяют поддержку каждого плагина, поэтому нам нужно убедиться, что плагин, который мы используем, поддерживается во всех целевых средах. Поддержку можно проверить на веб-сайте Ionic, как показано ниже для плагина камеры.
Кроме того, мы также можем написать собственную логику, если требуемый плагин не поддерживается на нашей желаемой платформе, как показано ниже.
Вывод
Основываясь на приведенном выше анализе, Ionic - довольно хорошая платформа для создания решений, в которых мы можем совместно использовать код между различными средами и платформами. Чтобы убедиться, что мы получаем довольно хорошее решение, необходимо продумать и создать макет и код с учетом нескольких платформ, которые мы должны поддерживать.
React Native [Мобильное приложение React Native по производительности лучше, чем мобильное приложение Ionic]
React - это библиотека JavaScript, которая была разработана, чтобы реализовать концепцию виртуальной DOM, которая делает рендеринг пользовательского интерфейса очень эффективным и быстрым в веб-приложениях. React Native был разработан для создания кроссплатформенных нативных приложений с использованием JavaScript, чтобы можно было поддерживать несколько сред, таких как iOS и Android, с использованием одной и той же базы кода. Поддержка рабочего стола может быть добавлена путем размещения приложения ReactJS с использованием Electron, и соображения будут очень похожи на то, что покрывается фреймворком Ionic.
React был разработан не для повторного использования кода, а для того, чтобы «учиться один раз, писать везде», поэтому тот же код, который был создан в React, нельзя использовать прямо в React Native. Для решения той же проблемы в экосистеме есть несколько фреймворков и библиотек, которые можно использовать для решения этой проблемы.
Платформы или библиотеки, доступные для совместного использования кода между мобильными устройствами и Интернетом
Реагировать на примитивы
Эта библиотека пытается предложить идеальный набор примитивов для создания приложений React, независимо от платформы. Он довольно примитивен и экспортирует некоторые интерфейсы, которые предназначены для основных компонентов, таких как
· Анимированный
· Таблица стилей
· Просмотр
· Текст
· Изображение
· Прикосновение
Чтобы использовать его для готового приложения, потребуются довольно приличные усилия.
React Native для Интернета
«React Native для Интернета» приносит в Интернет не зависящие от платформы компоненты и API-интерфейсы React Native. Следовательно, если есть требование перенести существующее приложение React Native в Интернет с максимальным повторным использованием кода, эта структура хорошо подходит.
Кто его использует: Twitter, Major League Soccer, PlayStation, Uber, The Times, документация React Native.
Поддержка браузера: Chrome, Firefox, Safari ›= 7, IE 10, Edge.
ReactXP
ReactXP основан на популярных фреймворках React JS и React Native. ReactXP изначально был разработан командой Skype в Microsoft. С тех пор он был принят другими командами Microsoft. С React и React Native ваше веб-приложение может делиться большей частью своей логики с вашими приложениями iOS и Android, но уровень представления необходимо реализовать отдельно для каждой платформы. Они пошли дальше и разработали тонкий кроссплатформенный слой, который мы называем ReactXP. Он поддерживается командой Microsoft и распространяется под лицензией MIT.
ReactXP в настоящее время поддерживает следующие платформы:
· IOS (React Native)
· Android (React Native)
· Интернет (React)
· Windows 10 - UWP (React Native) - в процессе
Для других платформ, таких как Windows 7 и 8, MacOS и Linux, можно использовать такую веб-оболочку, как Electron.
Сравнение ReactXP с другими вариантами
Вывод
Основываясь на приведенном выше анализе, обе эти структуры хорошо подходят, если вы хотите использовать код для обмена между веб-приложением и мобильным приложением, но компоненты и API, поддерживаемые ими, довольно просты, поэтому правильная стратегия проектирования должна быть проверена с учетом требований. Поэтому в большинстве случаев нельзя делиться следующими элементами.
· Определения пользовательского интерфейса компонентов, если они не поддерживаются вышеуказанными платформами
· Модули, которые имеют разные реализации для Интернета и мобильных устройств
· Зависимые от DOM операции, которые будут работать только в браузере
· Переходы между страницами, характерными для мобильного UX
· Компоненты пользовательского интерфейса - например, вам нужно будет использовать две разные библиотеки диаграмм для диаграмм в ваших мобильных / веб-приложениях [Доступен ли компонент React Native в Интернете или нет, можно проверить с помощью Native Directory]
Забрать
Следовательно, повторное использование кода с помощью React Native не так просто, как в приложении Ionic, и вам нужно написать много кода для конкретной платформы для компонентов пользовательского интерфейса и API платформы. Код для бизнес-логики и уровня доступа к базе данных будет общим. Наибольшее преимущество описанного выше подхода заключается в том, что в этом случае одна команда может работать над созданием решений для всех платформ.
Производительность приложения React Native лучше, чем у приложения Ionic, поэтому это также следует учитывать перед выбором фреймворка.
