Как создать кроссплатформенное приложение
Я – Сергей Якимов, CTO Omega-R, международной компании по разработке и интеграции IT-решений. На базе многолетнего опыта в сфере информационных технологий и экспертизы компании хочу поделиться своим видением настоящего и ближайшего будущего кроссплатформенной разработки мобильных приложений.
На протяжении многих лет кроссплатформенная мобильная разработка заслужила репутацию одного из самых популярных направлений разработки программного обеспечения. Кроссплатформенный подход позволяет создавать приложения для различных платформ с одной кодовой базой, что экономит время и деньги и избавляет от ненужных усилий.
Согласно исследованию Digital 2020 Reports, подготовленному компаниями We Are Social Inc. и Hootsuite Inc., число пользователей интернета по всему миру увеличивается на 9 человек в секунду. Это означает, что каждый день к мировому онлайн-сообществу присоединяется более 800 тысяч человек, которые пользуются настольными или мобильными устройствами. Интересно, что последний вариант становится все более популярным с каждым месяцем.
Проникновение смартфонов в повседневную жизнь растет во всем мире. Ожидается, что к 2024 году три из четырех используемых телефонов будут смартфонами. Согласно статистике StatCounter, доля пользователей настольных устройств снизилась до 45,66%.
Самым простым объяснением такого состояния событий является изменение нашего образа жизни. Мы проводим в интернете больше времени, чем когда-либо прежде. Почти каждый имеет доступ к смартфону или планшету. Учитывая то, что среднестатистический пользователь в среднем проводит в сети почти 7 часов в день, неудивительно, что более половины этого трафика поступает с мобильных устройств.
Это, в свою очередь, подталкивает к росту рынок мобильных приложений. Результатом предпочтения мобильных приложений являются довольно внушительные цифры. Согласно отчету Statista за прошлый год, мировые доходы от мобильных приложений в 2019 году составили 461 млрд долл., а к 2023 году платные загрузки и реклама в приложениях, как предполагается, принесут более 935 млрд долл. дохода.
Выбор пути мобильной разработки
Приложения популярны не только среди современных пользователей интернета, но и достаточно прибыльны для их владельцев. Если связать эти два фактора воедино, можно сделать вывод, что практически любая стратегия развития бизнеса может включать создание приложения. Дилемма, однако, заключается в выборе правильного пути разработки мобильных приложений.
Одним из первых шагов на пути к цифровому успеху является решение о мобильной операционной системе – это, кстати, было не так просто десять лет назад, когда Android, iOS, Microsoft, RIM и Symbian были вполне жизнеспособными вариантами.
Сегодня выбор гораздо проще, поскольку единственными крупными игроками остаются Android и iOS, которые вместе составляют около 99% от общей доли рынка мобильных операционных систем. Согласно различным статистическим данным, Android выигрывает по количеству пользователей, но нет недостатка и в сторонниках iOS, доля которого на рынке составляет 25,75%. В то время как Google Play Store может похвастаться большим количеством приложений (2,5 млн), Apple App Store содержит более 1.8 млн приложений. Одного этого факта достаточно, чтобы показать, что ни одну из двух платформ не следует упускать из виду.
Поскольку выбор мобильной операционной системы является вопросом личных предпочтений пользователей, а не вопросом производительности или доступности, будет целесообразно в конечном итоге создать мобильное приложение как для Android, так и для iOS – и есть три способа сделать это.
Отдельные нативные приложения для Android и iOS
Нативное решение, как следует из названия, предполагает разработку приложения на родном для данной платформы языке программирования: Java или Kotlin для Android, Objective-C или Swift для iOS. Будучи глубоко ориентированной на операционную систему, разработка нативных приложений имеет свои достоинства и недостатки. С одной стороны, нативное решение обеспечивает доступ ко всем функциям данной ОС, позволяет неограниченно настраивать интерфейс и предотвращает любые проблемы с производительностью. С другой стороны, если вы хотите охватить оба типа пользователей, вам придется создать два отдельных приложения, которые требуют больше времени, денег и усилий.
Прогрессивное веб-приложение
Прогрессивное веб-приложение – технология в веб-разработке, которая добавляет сайтам возможности приложений для мобильных устройств и трансформирует сайт в приложение. На выходе получаем гибрид сайта и приложения для мобильных устройств. Однако, как любой другой вариант, прогрессивные веб-приложения небезупречны, так как они потребляют больше энергии батареи и не могут получить доступ ко всем функциям данного устройства, например, к календарю, камере, контактам и так далее. Кроме этого, теряется возможность перекрестного входа в веб-приложение с помощью приложения Facebook, Инстаграм, Вконтакте или т.д. Несмотря на то что веб-приложение не требует установки из Google Play Store или Apple App Store, последние выполняют функцию крайне удобных библиотек для пользователей.
Одно кроссплатформенное приложение для двух систем
Кроссплатформенность – это способность ПО (в нашем случае мобильных приложений) работать на нескольких платформах.
Кроссплатформенная мобильная разработка позволяет охватить две операционные системы, iOS и Android, одним кодом. Она не предполагает написания кода на родном языке программирования, однако обеспечивает почти нативный опыт благодаря интерфейсу визуализации с использованием собственных элементов управления.
На текущий момент многие компании используют кроссплатформенные решения, кто-то уже всерьез подумывает перейти на них в ближайшем будущем. Это не только вендоры самих решений, как, например, Facebook со своим React Native, на котором работают приложения Facebook и Instagram, но и другие крупные игроки рынка, у которых имеются продукты, например, на Flutter – Alibaba, Philips Hue, Hamilton, Tencent, Grab, Groupon и другие.
Существует множество статей, где подробно анализируются все преимущества кроссплатформенных приложений. Однако плюсы и минусы стоит рассматривать на платформе, которая имеет все шансы стать в 2020 году самой популярной среди разработчиков – Flutter.
Flutter
Flutter – SDK от компании Google с открытым исходным кодом для создания кроссплатформенных мобильных приложений, который предоставляет пользователям как Android, так и iOS по-настоящему нативный дизайн и опыт. Данная платформа разработки уже на старте показала внушительный рост по сравнению с React Native. Анонсированный на конференции Google I/O 2017 и выпущенный в 2018 году, Flutter остается все еще новичком на рынке платформ для создания кроссплатформенных приложений. С более чем 87 700 звездами в GitHub, что выше результата React Native, и подавляющим большинством разработчиков, называющих его одним из трех самых любимых фреймворков в обзоре Stack Overflow’s annual Developer Survey 2019, Flutter, несомненно, является силой, с которой следует считаться.
Рассмотрим плюсы и минусы Flutter как платформы для разработки продукта:
Плюсы
- короткий time-to-market;
- производительность приложений наравне с нативными решениями;
- общая стоимость разработки ниже аналогичного решения с нативными приложениями;
- поддержка единой кодовой базы;
- снижение затрат на исправление багов и добавление новой функциональности.
Минусы
- некоторую функциональность необходимо разрабатывать независимо на обеих платформах, если нет кроссплатформенных библиотек;
- один язык разработки – Dart, который необходимо выучить, если компания разрабатывает приложение, не имея необходимой экспертизы. В нашей компании есть разработчики на Flutter, что нейтрализует данный минус и позволяет получить специалистов быстрее поиска на рынке (согласно исследованиям, на найм специалиста тратится не менее двух недель).
Кроссплатформенные приложения на Flutter разрабатываются аналогично нативным в общепринятых IDE – Android Studio и XCode. Как дополнение, разработчикам доступен hot-reload кода, что ускоряет запуск приложения во время разработки. Кроме этого, процесс публикации ничем не отличается от нативных – собранные дистрибутивы подписываются и загружаются в магазины приложений.
Польза для бизнеса
В бизнесе решающую роль зачастую играет метрика TTM (time-to-market). Быть впереди и внедрять новые функции в свой продукт быстрее конкурентов сразу на обеих платформах – об этом с самого начала задумывается любая компания-лидер. Кроссплатформенные фреймворки позволяют это достигать и, как очевидный бонус, получать снижение затрат на разработку на каждом этапе. По нашим подсчетам – разработка на Flutter позволяет снижать общую стоимость разработки продукта на 25-30%.
Прогноз, перспективы на ближайшие 5 лет
Все, кому важен быстрый выход на рынок со своим продуктом одновременно на обеих платформах мобильной разработки, уже активно разрабатывают с использованием кроссплатформенных решений. В 2020 году тренд не изменится, и все больше компаний будут использовать кроссплатформенные мобильные приложения на Flutter.
Google разрабатывает новую ОС Fuchsia, в том числе для мобильных устройств. Flutter заявлен как UI toolkit в этой ОС. В ближайшем будущем Fuchsia может заменить ОС Android, и, несмотря на то что в Fuchsia в данный момент все же добавляется возможность запускать нативные приложения под Android, стоит учитывать эту тенденцию при планировании разработки и выхода на рынок со своими мобильными приложениями.
Таким образом, одна кодовая база, несомненно, влияет на все аспекты разработки приложения вплоть до снижения количества требуемых разработчиков, позволяя компании сэкономить деньги, которые обычно затрачиваются на исправление и обновление двух отдельных кодовых баз. Сэкономленную значительную часть первоначального бюджета проекта можно затратить на дальнейшее совершенствование приложения в соответствии с отзывами пользователей. В результате кроссплатформенная разработка мобильных приложений сбалансированно достигает своих целей как по критерию цены, так и по критериям времени, сложности и пользовательского опыта.
В настоящее время большинству предприятий приходится переходить на мобильные устройства, чтобы охватить большее количество целевой аудитории. Поэтому становится важным, чтобы они были представлены на всех возможных мобильных платформах.
Хотя нативные приложения оказались полностью интерактивными, интуитивно понятными и полностью совместимыми на всех устройствах. Создание двух высококачественных и безупречных продуктов требует больших затрат времени и средств.
Напротив, кроссплатформенные мобильные приложения становятся всё более популярными. Поскольку они предлагают доступ к разным мобильным платформам с использованием одной кодовой базы. Более того, благодаря постоянному техническому прогрессу они достигли того же уровня качества, что и нативные приложения. Но при значительно сниженной стоимости разработки.
В этом руководстве по кроссплатформенным мобильным приложениям вы познакомитесь с наиболее популярными инструментами для разработки кроссплатформенных приложений и их основными функциями.
Основные кроссплатформенные инструменты мобильной разработки
Рынок кроссплатформенной разработки приложений быстро растёт. Таким образом, выбор инструментов кроссплатформенной разработки становится шире, поэтому любой разработчик может найти тот, который соответствует его целям. Вот самые известные кроссплатформенные фреймворки.
React Native
React Native — это фреймворк с открытым исходным кодом, принадлежащий Facebook. По данным Statista, он лидирует среди самых известных инструментов для разработки кроссплатформенных мобильных приложений. Эта структура позволяет разработчикам создавать мобильные приложения, похожие на нативные, для iOS и Android. React Native требует знания JavaScript и React.js для создания пользовательских интерфейсов.
За и против
В качестве фреймворка на основе JavaScript React Native имеет доступ к богатым встроенным библиотекам. Он предлагает плавную интеграцию с другими проектами и упрощает тестирование.
С другой стороны, React Native — сложный фреймворк. Требуется команда специально обученных профессионалов, так как любая ошибка приведёт к полной несогласованности проекта.
Flutter
Flutter — это SDK, представленный Google. Хотя это новый инструмент, он уже завоевал популярность среди кроссплатформенных программистов. Основатели заявляют, что его можно использовать для разработки полностью настраиваемого приложения для мобильных, веб-платформ и настольных платформ. Этот инструментарий UI работает на Dart и в то же время поддерживает Swift, C, Java и другие языки программирования.
За и против
Flutter обеспечивает простой и быстрый процесс разработки с доступом к богатому набору виджетов. Что касается недостатков, эта структура используется для создания крупномасштабных приложений и не обеспечивает достаточной поддержки готовых к реализации библиотек.
Xamarin
IDE Xamarin (Xamarin Studio) вместе с Visual Studio от Microsoft занимает лидирующие позиции на рынке и обеспечивает среду высокого уровня для эффективной работы.
За и против
Appcelerator
Appcelerator использует кодовую базу JavaScript на платформе Alloy MVC для создания приложений на разных платформах. Это позволяет программистам разрабатывать высокопроизводительные приложения в короткие сроки. Его SDK предлагает более 5000 API для Android, iOS, Windows, HTML5 и Blackberry. Appcelerator подходит для лучших решений корпоративного уровня, поскольку предлагает виртуальное частное облако, которое удовлетворяет их потребности в безопасных подключениях к корпоративной информации.
За и против
Appcelerator делает процесс разработки флотом. Программистам нужно написать несколько строк кода и потратить пару минут вместо долгих часов. Более того, JavaScript делает инструмент более привлекательным для разработчиков, поскольку им не нужно изучать другие языки.
Что касается недостатков, Appcelerator печально известен своими ошибками и задержками. Хотя инструмент приобрёл популярность благодаря своей гибкости, разработчики начинают замечать множество ограничений. Он также не такой гладкий и удобный, как среды собственных приложений.
PhoneGap
Один из самых популярных фреймворков, PhoneGap, принадлежит Adobe. Он работает на Apache Cordova и использует HTML5, CSS и JavaScript для разработки кроссплатформенных приложений. Apache Cordova предоставляет доступ к PhoneGap Toolset, который, в свою очередь, бесплатно предлагает разработчикам новые коды из базы сообщества.
За и против
PhoneGap требует знания HTML5, CSS и JavaScript, которые являются наиболее известными языками программирования. Таким образом, разработчикам не нужно приобретать новые навыки, а компаниям не нужно нанимать дополнительных специалистов. Мобильные приложения, созданные на платформе PhoneGap, имеют доступ к собственным ресурсам телефона, поскольку инструмент взаимодействует с мобильным оборудованием. Это гибкий фреймворк, в котором есть все необходимые руководства в свободном доступе.
Напротив, PhoneGap не поддерживает некоторые функции и может иметь проблемы при работе с собственными приложениями.
Sencha
Платформа Sencha использует HTML5 для разработки веб-приложений, которые затем могут быть преобразованы в собственные приложения с помощью PhoneGap или Sencha SDK. Sencha предлагает широкий спектр высокоэффективных продуктов, таких как Sencha Architect, Sencha Touch Chart, Sencha Space и Sencha Eclipse Plugin.
За и против
Sencha выделяется множеством сложных визуальных решений, позволяющих создавать сложные и эффективные приложения. Фреймворк включает в себя гибкий менеджер компоновки и надёжный пакет данных. Он приближает мобильные приложения к естественному виду, предлагая большое количество тем для всех основных платформ.
Однако Sencha не имеет доступа к некоторым ресурсам свойств телефона, таким как камера, акселерометр и контакты, и не поддерживает push-уведомления. Более того, он плохо работает с анимационными приложениями.
Альтернативные кроссплатформенные редакторы и IDE
Для предприятий и разработчиков, которым не требуются сложные кроссплатформенные функции, вот список альтернативных инструментов. Некоторые из них могут выполнять широкий спектр задач, в то время как другие используются для более ограниченных целей.
Ionic
Более 5 миллионов программистов используют Ionic для создания приложений. Это инструмент с открытым и бесплатным исходным кодом, который предлагает богатую библиотеку компонентов пользовательского интерфейса. Ionic работает с HTML, CSS и JavaScript, что делает его интуитивно понятным для многих программистов. Он имеет доступ к встроенным функциям телефона и предлагает большой выбор плагинов. Использование единой кодовой базы Ionic позволяет разработчикам создавать приложения для Android, iOS и веб-приложения.
Corona
Corona — это полностью бесплатная платформа. В основном предназначенная для создания игровых приложений для мобильных телефонов и настольных систем. Этот кроссплатформенный инструмент работает на Lua, языке сценариев. Который используется во многих известных играх (Angry Birds, Warcraft и т.д.). Corona предлагает широкий выбор плагинов и доступ ко многим нативным библиотекам.
Кроссплатформенный инструмент Yapp помогает разрабатывать кроссплатформенные приложения для мероприятий, конференций и встреч.
Фреймворк Xojo заслуживает особого внимания, поскольку позволяет разработчикам создавать приложения на единой базе кода не только для Интернета, мобильных устройств и настольных компьютеров, но и для Raspberry Pi. Этот кроссплатформенный инструмент предлагает широкие возможности и пользовательский интерфейс с возможностью перетаскивания для быстрой разработки приложений.
AppsMoment
Этот фреймворк — отличное решение для новичков. AppsMoment предлагает широкий выбор шаблонов, охватывающих все основные категории. Его 200 шаблонов сокращают время написания кода до минимума. Это позволяет разработчикам публиковать свои приложения не только в магазинах Apple и Android, но также в магазинах Windows и Amazon.
Qt — это кроссплатформенная IDE, основанная на C ++. Этот фреймворк имеет внушительный список компаний, работающих с ними, таких как Mercedes, LG, Peugeot и другие. Qt предоставляет доступ к библиотеке C ++ и предлагает широкий спектр API для улучшенной разработки мобильных приложений.
Работа с кроссплатформенной разработкой
Выбрав подходящий кроссплатформенный инструмент, необходимо помнить, что работа с кроссплатформенными фреймворками имеет некоторые особенности.
Выделенные службы API для кроссплатформенных мобильных приложений
Кросс-платформенные мобильные приложения работают с внутренним API. Такие API-интерфейсы суммируют все функциональные детали и используют их для внутреннего сервера. Однако иногда разработчикам приходится применять индивидуальный подход как к платформе, так и к потребителям. Здесь возникает идея о выделенных службах API. Такой подход позволяет разработчикам изменять каждый серверный API отдельно, что позволяет настраивать приложение для конкретных требований мобильных и веб-пользователей. Однако такой подход сопряжён с некоторыми препятствиями. Наиболее важным из них является владение отдельными API-интерфейсами, которые часто требуют реструктуризации некоторых организационных сервисов.
Тестирование
Когда разработка приложения завершена, наступает процесс тестирования. Этот шаг обеспечивает устранение некоторых ошибок, предотвращает технические проблемы в будущем, повышает удовлетворённость клиентов и, наконец, приводит к утверждению приложения в магазинах приложений. Его основная цель — выявить проблемы, связанные с различиями в конфигурации платформ.
Тестирование — трудоёмкий и монотонный процесс. Поэтому есть возможность автоматизировать его с помощью одного из существующих инструментов. Это экономия времени и затрат. Но всё же присутствие человека предпочтительнее, поскольку некоторые проблемы нельзя сканировать таким образом.
Наиболее частые проблемы, выявленные на этапе тестирования, связаны с согласованностью интерфейса и ожиданиями пользователей. Кроссплатформенные мобильные приложения должны бесперебойно работать на любой из платформ, для которых они были разработаны, и быть удобными для пользователя, чтобы удовлетворять потребности всех клиентов.
Заключение
Хотя все признают, что нативные приложения предлагают надёжный пользовательский интерфейс и оптимизированную производительность, их разработка сложна и требует времени. Напротив, разработка кроссплатформенных приложений требует меньше времени и ресурсов. Кроссплатформенные приложения не только проще разрабатывать, но и поддерживать и обновлять их.
Кроссплатформенные инструменты — это будущее мобильной разработки. Они позволяют предприятиям охватить более широкую аудиторию с меньшими усилиями и затратами. Кроме того, большой выбор кроссплатформенных фреймворков упрощает разработчикам поиск подходящего инструмента. Который наилучшим образом соответствует их потребностям.
Используя Visual Studio, можно создавать приложения для устройств Android, iOS и Windows. При разработке приложения вы можете использовать инструменты Visual Studio для добавления подключенных служб, таких как Microsoft 365, Служба приложений Azure и Application Insights.
Для создания игр или мощных графических приложений установите инструменты Visual Studio для Unity. Это позволит максимально эффективно использовать функции Visual Studio и Unity — популярного движка и среды разработки для игр и мощных графических приложений в Windows, iOS, Android и на других платформах.
С помощью инструментов Visual Studio для Xamarin вы можете указать Android, iOS и Windows в качестве целевых устройств в одном и том же решении, при этом код и даже пользовательский интерфейс будут использоваться совместно.
Целевые устройства Android, iOS и Windows из единой базы кода
После окончания установки шаблоны проектов появятся в диалоговом окне Новый проект. Чтобы найти шаблоны Xamarin, проще всего ввести "Xamarin" в строке поиска.
После создания проекта вы сможете использовать все функции повышения продуктивности в составе Visual Studio. Например, вы сможете создавать страницы с помощью конструктора и изучить собственные API-интерфейсы мобильных платформ с помощью IntelliSense. Для запуска готового приложения и оценки его интерфейса можно использовать эмулятор пакета SDK для Android и запускать приложения в собственной среде Windows. Вы также можете использовать связанные устройства Android и Windows напрямую. Для проектов iOS необходимо подключиться к компьютеру Mac, подключенному к сети, и запустить эмулятор iOS из Visual Studio или подключиться к связанному устройству.
Создание одного набора страниц, отображаемого на всех устройствах, с помощью Xamarin.Forms
В зависимости от сложности конструкции приложения, возможно, имеет смысл использовать для его создания шаблоны Xamarin.Forms в группе шаблонов проектов Мобильные приложения . Xamarin.Forms — это набор средств разработки пользовательского интерфейса, с помощью которого можно создать единый интерфейс приложения для совместного использования на устройствах Android, iOS и Windows. При компиляции решения Xamarin.Forms вы получаете приложение для Android, приложение для iOS и приложение для Windows. Дополнительные сведения см. в разделе Дополнительные сведения о разработке мобильных приложений с помощью Xamarin и в документации по Xamarin.Forms.
Совместное использование кода приложениями Android, iOS и Windows
Код можно совместно использовать с помощью общего проекта, проекта переносимой библиотеки классов или обоих этих проектов. Может оказаться, что какой-то код больше подходит в общем проекте, а другой код лучше себя ведет в рамках проекта переносимой библиотеки классов.
Целевые устройства Windows 10
Если вы хотите создать одно приложение, предназначенное для полного спектра устройств Windows 10, создайте универсальное приложение Windows. Разработка приложения будет осуществляться с помощью одного проекта, а страницы будут отображаться должным образом независимо от того, какое устройство используется для их просмотра.
Начните с шаблона проекта приложения на универсальной платформе Windows (UWP). Вы можете визуально разрабатывать страницы, а затем открывать их в окне предварительного просмотра, чтобы увидеть, как они будут отображаться для различных типов устройств. Если вас не устраивает, как страница отображается на устройстве, вы можете оптимизировать ее в соответствии с размером экрана, разрешением или ориентацией (горизонтальной или вертикальной). Все это можно сделать с помощью удобных инструментальных окон и пунктов меню в Visual Studio. Когда вы будете готовы к запуску приложения и пошаговому выполнению кода, вы сможете найти все эмуляторы и имитаторы для различных типов устройств в одном раскрывающемся списке на стандартной панели инструментов.
| Дополнительные сведения |
|---|
| Общие сведения об универсальной платформе Windows |
| Создание первого приложения |
| Разработка приложений для универсальной платформы Windows (UWP) |
Сборка приложения для устройств Android, iOS и Windows (HTML/JavaScript)
Если вы разработчик веб-решений и знакомы с HTML и JavaScript, то вы можете создавать приложения для целевых платформ Windows, Android и iOS с помощью средств Visual Studio для Apache Cordova. Такие приложения могут быть ориентированы на все три платформы, и при их создании вы можете полагаться на привычные навыки и процедуры.
Apache Cordova — это платформа, включающая модель подключаемого модуля. Модель подключаемого модуля предоставляет единый API-интерфейс JavaScript, который можно использовать для доступа к собственным возможностям устройств на всех трех платформах (iOS, Android и Windows).
Поскольку эти API-интерфейсы являются кроссплатформенными, большую часть написанного кода можно совместно использовать для всех трех платформ. Это снижает расходы на разработку и обслуживание. Кроме того, нет необходимости начинать с нуля. При создании других типов веб-приложений можно предоставить эти файлы приложению Cordova без каких-либо изменений и переработки.
Чтобы приступить к работе, установите Visual Studio и выберите Разработка мобильных приложений на JavaScript во время установки. Инструменты Cordova автоматически установят любое стороннее программное обеспечение, необходимое для создания приложения для нескольких платформ.
После установки расширения откройте Visual Studio и создайте проект пустого приложения (Apache Cordova) . Затем можно разработать приложение с помощью JavaScript или TypeScript. Кроме того, можно добавлять подключаемые модули для расширения функциональности приложения, и API-интерфейсы из подключаемых модулей будут появляться в IntelliSense в ходе написания кода.
Когда вы будете готовы к запуску приложения и пошаговому выполнению кода, выберите эмулятор, например Apache Ripple или Android Emulator, браузер или устройство, подключенное непосредственно к компьютеру. Запустите приложение. Если вы разрабатываете приложение на компьютере Windows, можно запустить его прямо на нем. Все эти возможности встроены в Visual Studio в составе расширения "Инструменты Visual Studio для Apache Cordova".
Шаблоны проектов для создания приложений на универсальной платформе Windows (UWP) по-прежнему доступны в Visual Studio, и вы можете свободно использовать их, если планируете ориентироваться только на устройства Windows. Если впоследствии вы решите перейти к устройствам Android и iOS, то всегда сможете перенести свой код в проект Cordova.
Создание приложения для Android, iOS и Windows (C++)
Сначала установите Visual Studio и рабочую нагрузку Разработка мобильных приложений на C++ . Затем вы сможете создать приложение Native Activity для Android, Windows или iOS. Одно и то же решение можно ориентировать на устройства Android, iOS и Windows, а затем наладить совместное использование кода между ними с помощью общей кроссплатформенной статической или динамической библиотеки.
Если вам нужно создать приложение для Android, требующее сложных операций с графикой (например, игру), можно воспользоваться C++. Начните с проекта Native Activity (Android) . В этом проекте реализована полная поддержка цепочки инструментов Clang.
Для запуска готового приложения и оценки его интерфейса воспользуйтесь Android Emulator. Это быстрый, надежный и простой в установке и настройке инструмент.
Вы можете создавать приложения, ориентированные на весь спектр устройств под управлением Windows 10, с помощью C++ и шаблона проекта приложения универсальной платформы Windows (UWP). Дополнительные сведения см. в разделе Целевые устройства Windows 10 ранее в этой статье.
С помощью статической или динамической общей библиотеки вы сможете совместно использовать код С++ между устройствами Android, iOS и Windows.
Эту библиотеку можно использовать в проекте Windows, iOS или Android, как описано ранее в этом разделе. Также ее можно использовать в приложении, созданном с помощью Xamarin, Java или любого другого языка, который позволяет вызывать функции в неуправляемой библиотеке DLL.
При написании кода в этих библиотеках можно использовать IntelliSense для просмотра собственных API платформ Android и Windows. Эти проекты библиотеки полностью интегрированы с отладчиком Visual Studio, поэтому можно задавать точки останова, осуществлять пошаговое выполнение кода, находить и исправлять проблемы, используя расширенные возможности этого отладчика.
Создание кросс-платформенной игры для устройств Android, iOS и Windows с использованием инструментов Visual Studio для Unity
Инструменты Visual Studio для Unity представляют собой бесплатное расширение Visual Studio, которое интегрирует мощные функции редактирования кода, повышения продуктивности и средства отладки в составе Visual Studio с Unity, популярной кроссплатформенной системой и средой разработки для игр и мощных графических приложений на платформах Windows, iOS, Android и других платформах, включая веб-приложения.
Мало кто сможет удержаться от желания работать меньше, а получать больше. Это желание, исполненное в позитивном ключе, ведет к прогрессу, — пишет сайт DOU.UA. Одной из попыток достичь этого стала кроссплатформенная разработка мобильных приложений.
С ростом популярности смартфонов, планшетов, электронных книг и нетбуков мобильные платформы становятся все более актуальными — начиная от адаптивной верстки сайта и заканчивая полноценным приложением.
Давайте посмотрим, какие варианты кроссплатформенной разработки существуют и что они предлагают нам как создателям. Бизнес постучит со своими «хотелками», а выбор того, на чем писать, часто приходится делать именно разработчику.
В конце статьи вы найдете описание конкурса, победители которого смогут пройти курс изучения одного из перечисленных ниже фреймворков.
Проблема архитектуры в кроссплатформах
В мире кроссплатформы все фреймворки примерно одинаковы по своей структуре. В основе всего — целевая платформа (iOS, Android, etc.), для которой ведется разработка, и слой абстракции, который обещают сделать быстро, дешево и красиво, а между ними мост, соединяющий эти две сущности. Слой абстракции в большинстве своем представлен связкой из JS и CSS (частично или полностью).
У такой архитектуры есть типичные проблемы.
Частично они обусловлены тем, что слой абстракции, условно говоря, пытается усидеть на двух стульях — с переменным успехом. Отсюда и сложности: на каждой отдельно взятой платформе приложение отображается и ведет себя по-разному. Иногда это не проблема, но бывают случаи, когда уникальный дизайн и поведение на обеих платформах являются дополнительным business value.
В пример можно привести приложение Reflectly. Изначально оно было написано на React Native, впервые вышло на iOS, а позже была попытка выйти на платформу Android.
Запуск приложения в Android преподнес неприятный сюрприз. В итоге его полностью переписали на Flutter.
В данном случае приложение реализует уникальный функционал, уходящий немного в сторону от списков и форм, дизайн тоже является уникальным. Узнать подробности этой истории можно здесь.
Асинхронность и производительность моста, соединяющего две платформы. Все, что вы хотите от платформы (рендеринг, вызов нативных методов), вам сначала нужно сериализовать в строку, передать, по ту сторону десериализовать и только потом получить ожидаемый результат. Такие действия явно не увеличат производительность.
Миф о том, что любого web-разработчика можно быстро переквалифицировать в мобильщика с помощью «магического фреймворка Х». Все выглядит похоже: на Web — CSS + JS, на кроссплатформе — то же самое. Должно работать. Но не учитывается факт, что к имеющимся знаниям требуется быстро прибавить понимание как минимум двух платформ (iOS и Android), с которыми разработчик раньше не сталкивался. Отдельным бонусом идет набивка руки в специфических тонкостях, связанных со взаимодействиями внутри всего этого зоопарка.
Из-за всех этих нюансов кроссплатформенную разработку троллят вот так:
Начнем знакомство с фреймворков, основанных на WebView.
Cordova
Одним из первых кроссплатформенных фреймворков стал Cordova (бывш. PhoneGap). Первый релиз состоялся в 2009 году. Изначально разрабатывался компанией Nitobi, купленной Adobe. В результате поглощения исходный код PhoneGap был передан Apache Foundation.
Из официальной архитектурной схемы видно, что основой рендеринга выступает обычный WebView — то есть обычный браузер. Несмотря на то что это самый давний фреймворк, предлагает он лишь джентльменский набор из плагинов и связки API для обеспечения их взаимодействия. Какого-то специфического набора инструментов у него нет. Есть перечень сервисов и библиотек, который предлагается на главной странице, например Onsen UI — UI-библиотека.
Developer experience довольно неоднозначный: фактически, как ты его себе организуешь, так и будет. Можно на jQuery все писать и обновлять страницу с F5, а можно собрать себе уютный и привычный набор библиотек и пользоваться уже существующими решениями для hot reload.
Дебаг происходит в консоли браузера. Дебаг на устройстве — через подключение из Safari к WebView, запущенном на iOS.
Также есть удобный механизм темплейтов, который позволяет генерить проект из готовых сторонних бойлерплейтов. Например, cordova-template-framework7-vue-webpack.
Ionic
На основе Cordova в 2013 году был выпущен Ionic. Со временем Cordova заменили Capacitor с сохранением совместимости API, чтобы осталась работоспособной вся существующая база компонентов.
Имеет свою базу UI-компонентов и позволяет реализовывать бизнес-логику на любом фреймворке из могучей тройки (до версии 4 была возможность использовать только Angular). Есть возможность оплатить энтерпрайз-поддержку. В остальном все сказанное о Cordova относится и к Ionic. Дебаг в консоли браузера, хот-релоад от фреймворка, работает внутри WebView.
Xamarin
Фреймворк с длинной историей. Изначально развивался отдельно, позже был приобретен компанией «Майкрософт». Поскольку он «не на JS», то не очень популярен.
Здесь UI-слой разрабатывается отдельно для обеих платформ, а бизнес-логика общая. Этот вариант будет интересен, если есть желание сделать максимально нативное приложение с точки зрения UI (с учетом всех гайдлайнов), а на дублировании бизнес-логики сэкономить путем повторного использования существующих наработок. В то же время требует наличия в команде разработчиков, способных написать UI-часть для обеих платформ отдельно.
Продолжение развития Xamarin, но уже с покрытием UI, не требующим написания по отдельности.
Доступны наборы инструментов для разработки на любой вкус. Есть бесплатная Visual Studio Community Edition и платная версия Visual Studio Professional по подписке за 45 $ в месяц.
Дебагер, хот-релоад (только для верстки), лейаут-эдитор — все имеется в наличии. Однако язык разработки и относительная дороговизна инструментов разработки делает Xamarin малораспространенным за пределами экосистемы Microsoft.
NativeScript
Фреймворк выпущен в 2014 году. На данный момент из коробки предлагается писать на Angular или Vue. За долгие годы развития накопил достаточно большой арсенал инструментов разработчика: готовый набор UI-компонентов, собственную песочницу, маркетплейс компонентов, приложение для быстрого запуска превью написанного кода на устройстве, приложение, где можно увидеть вживую работу компонентов. Для дебага можно использовать или консоль браузера, или предоставляемый разработчиками плагин для VS Code.
Имеет интересную архитектуру — API платформы через рефлексию пробрасываются на сторону JavaScript.
На практике работа с API-платформы выглядит так, как будто вы пишете, например, на Java, только через призму JS. В повседневной же работе используется набор встроенных layout-компонентов и CSS-подобный синтаксис для раскраски. При изменении стилей достаточно неплохо работает hot reload.
На выходе имеем бандл JS-кода, выполненный в JSCore (iOS) или V8 (Android) и работающий через мост с платформой.
React Native
Первый релиз состоялся в 2015 году. Практически единственный из кроссплатформенных фреймворков JS, который не дает нам выбора и предлагает только React как фреймворк для разработки. Его появление подтверждает, что React можно скормить любой движок для рендеринга виртуального дома дерева. Первая имплементация этого подхода была результатом хакатона и в итоге продолжила свое развитие в Open Source. На данный момент очень популярен не в последнюю очередь благодаря «Реакту» для Web.
Общая архитектура очень похожа на NativeScript, только мост на 100 метров выше по реке. Нативные плагины пишутся на стороне платформы, а через мост передаются лишь параметры. В промежутке между JS и платформой находится Yoga — кроссплатформенный движок, который реализует flex-box layout на целевой платформе.
Технически React Native очень похож на то, что frontend-разработчики привыкли видеть на Web.
Фреймворк активно развивается: релизы появляются каждые 3–6 месяцев. В версии 0.61.0 обновили механизм hot reload, который позволяет работать более производительно. Не так давно была выпущена версия 0.62.0, которая добавила интеграцию fbflipper из коробки. Надеюсь, эта инициатива получит достойное продолжение, так как до сих пор арсенал инструментов разработчика был похож на лоскутное одеяло. Изначально предлагается только консоль браузера, можно использовать также react-native-debugger или reactotron, которые дают дополнительные инструменты при разработке (инспекция Redux, MobX, Apollo Cache).
Из особенностей: иногда встречаются отличия при отображении в iOS и Android. В большинстве случаев все хорошо, но перед завершением разработки фичи стоит проверять на обеих платформах. Виджеты, предоставляемые платформой, иногда сильно отличаются. В случае переключателей механика и общий принцип работы одинаковы, в случае пикера отличия кардинальны. Если требуется подобная механика, приходится прибегать к услугам модулей.
Последними рассмотрим фреймворки native-like. Отличает их то, что они совсем не используют встроенных виджетов. Вместо этого рисуют все своими силами. Одним из новичков в этой категории является Flutter. В процессе подготовки статьи я с удивлением обнаружил, что с 2011 года на Python развивается аналогичный фреймворк, реализующий такую же концепцию, — Kyvi. Увы, но этому фреймворку не хватает финансирования и комьюнити. Например, имплементация Material UI уже 3 года не развивается, а инициатива была перехвачена нашим соотечественником.
Flutter
Первый релиз состоялся в конце 2018 года. Платформа достаточно молодая, но она активно развивается: ежеквартальные релизы, активное развитие языка Dart, богатый инструментарий разработчика, изумительный hot reload, онлайн-редактор для анимации, специализированная CI/CD — все это было доступно с первого дня релиза версии 1.0.
Особенностью архитектуры Flutter является то, что он сам рисует каждый пиксель, контролирует жесты и анимацию. Он не использует ОЕМ-виджеты, как это делает React Native. Вместо этого команда Flutter создала два набора виджетов для основных мобильных платформ: Material для Android и Cupertino для iOS. Таким образом, они заново отрисовали все UI-компоненты с обеих мобильных платформ, полностью повторив их поведение. Непосредственно с мобильной платформой (геолокация, звук, Bluetooth) взаимодействие происходит через Platform Channels.
Благодаря такой архитектуре заявлена поддержка «всего что угодно», в теории. На практике хорошо поддерживаются iOS и Android. Активно развивается Web. Фактически успех на web-поприще определит дальнейшую популярность фреймворка во всем мире. На данный момент есть поддержка Web в бета-версии, и с каждым днем она становится все лучше. Одной из проблем является производительность. С флагом FLUTTER_WEB_USE_SKIA=true производительность существенно возрастает. Более подробный обзор Flutter доступен в моей предыдущей статье.
Относительная «молодость» платформы и широкий перечень поддерживаемых платформ, бывает, преподносит баги в неожиданных местах. Благодаря быстро растущему комьюнити на многие из них есть ишьюс на GitHub, в которых часто можно найти вариант обходного решения проблемы.
С этим фреймворком мне еще не довелось плотно познакомиться. На всякий случай я его установил и запустил. Не без проблем — из-за бага, который благополучно пофиксили в версии 5.14.2. В комментариях отпишитесь, если у вас есть опыт кроссплатформенной мобильной разработки на Qt.
Тренды
Для полноты картины приведу тренды на Stack Overflow:
- React Native — 45.
- Flutter — 19.
- Xamarin — 4.
- Cordova/Ionic — 1.
- NativeScript — 0.
Муки выбора
Выбор конкретного решения будет продиктован, скорее, не плюсами и минусами фреймворка, а общей картиной и целями на проекте. Кроссплатформу можно назвать компромиссом между созданием отдельных команд разработки и получением качественного результата. Также кроссплатформа подходит стартап-проектам. В обоих случаях вы будете выбирать исходя из того, что имеется в активе, а не ради перспективы получения сферически идеального продукта. Под активом подразумевается существующий продукт (код, который можно заново использовать), компетенции сотрудников, популярность фреймворка (наём новых сотрудников, развитие фреймворка и плагинов).
Если вам нужно простейшее решение, чтобы текущий web-продукт поддержать мобильной платформой, вам подойдут PWA или Ioinc (с дистрибуцией через магазины).
Если вы только за Angular либо за React, а все остальное — «фу-фу-фу», если нет времени или желания разбираться, а нужно приложение на вчера, вы, скорее всего, остановите выбор на NativeScript в первом случае или на React Native во втором.
Стартапам придется выбирать между React Native и Flutter из-за их популярности и поддержки большими компаниями. Первый — это зрелый фреймворк с устоявшимися практиками разработки, богатством библиотек и большим комьюнити. Второй — молодой, быстрый и перспективный с богатым набором встроенных UI-компонентов и крутым developer experience.
Начинающим разработчикам или желающим попробовать что-то новое стоит обратить внимание на Flutter.
Читайте также: