Мобильные веб-сайты, «родные» и гибридные приложения

Один вопрос, который рутинно появляется на ландшафте современной разработки: что именно создавать — мобильный веб-сайт, «родное» приложение или гибридное приложение. Как разработчик вы должны продумать ряд факторов, прежде чем браться за разработку ПО. Один из таких факторов — ваша целевая аудитория. В значительной степени этот фактор определяет ваши целевые платформы.

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

Существует три основных типа современных приложений: мобильные веб-приложения (веб-сайты), «родные» и гибридные приложения. Я рассмотрю каждый тип приложений, все их плюсы и минусы и то, как приступать к их разработке. Ввиду целей этой статьи я не обсуждаю традиционные настольные приложения, создаваемые с помощью Windows Forms или Windows Presentation Foundation (WPF). Они не считаются современными, так как выполняются только на компьютерах с большими экранами, а не на множестве устройств.

Мобильные веб-сайты

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

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

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

Вы можете использовать все свои имеющиеся навыки в веб-разработке для создания мобильной версии веб-сайта. Это означает применение HTML, JavaScript, CSS и, возможно, нескольких любимых вами инфраструктур.

Важно отметить, что при создании мобильной версии веб-сайта необходимо интегрировать адаптивный дизайн и реструктурировать контент так, чтобы он работал на малых устройствах. Media-запросы CSS охватывают адаптивный дизайн. Media-запросы являются способом кодирования CSS для определения правил стилей, ориентированных на специфические форм-факторы устройств. Например, ваш сайт должен предусматривать media-запросы для нескольких форм-факторов устройств, включая телефоны, планшеты, фаблеты (phablets) (новые устройства, сочетающие в себе большие смартфоны с планшетами), лэптопы и устройства с большими экранами.

К счастью, вы можете создавать media-запросы, которые работают для нескольких устройств одной категории. Реструктуризация контента включает изменение разметки под малые экраны. Это влечет за собой и уменьшение объема передаваемых данных. Существуют media-запросы по умолчанию, поставляемые с Twitter Bootstrap, популярной библиотекой, которая содержит CSS и стили с адаптивным дизайном и которая послужит вам хорошей отправной точкой.

Например, на рис. 1 представлен CSS, работающий с большим количеством разнообразных устройств. Код на рис. 1 не охватывает все возможные сценарии, но с большинством из них справляется. Вы можете внести некоторые изменения, чтобы этот код соответствовал вашим потребностям.

Рис. 1. Media-запросы CSS для популярных форм-факторов

Smartphones
Portrait and Landscape
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) { ... }
Landscape
@media only screen and (min-width : 321px) { ... }
Portrait
@media only screen and (max-width : 320px) { ... }
Tablets, Surfaces, iPads
Portrait and landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) { ... }
Landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape) { ... }
Portrait
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) { ... }}
Desktops, laptops, larger screens
@media only screen  and (min-width : 1224px) { ... }
Large screen
@media only screen  and (min-width : 1824px) {  ... }
Smartphones
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { ... }
Portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { ... }

CSS на рис. 1 работает не только в мобильных веб-приложениях, но и в «родных» приложениях. То есть он применим ко всем трем типам приложений, рассматриваемых в этой статье. На платформе Windows его можно использовать в проектах Windows Library for JavaScript (WinJS) и гибридных приложений на C#. Более подробное обсуждение адаптивного дизайна приложений см. в моей статье «Build a Responsive and Modern UI with CSS for WinJS Apps» за октябрь 2013 г. (msdn.microsoft.com/magazine/dn451447).

UI и UX мобильных сайтов скорее всего не будут сочетаться с таковыми в операционных системах устройств, поскольку веб- и «родные» платформы используют свои проектировочные шаблоны и методики. Многие пытаются затолкать содержимое веб-сайта, рассчитанного на большие мониторы, в тесные рамки малых экранов смартфонов или фаблетов. Такой вариант редко работает хорошо. Всегда учитывайте, как работают с информацией на малых устройствах.

Один недостаток мобильных веб-сайтов в том, что многие средства, доступные «родным» приложениям, недоступны таким сайтам. Но это сделано в основном по соображениям безопасности.

Файловая система и локальные ресурсы недоступны никаким веб-сайтам — мобильные они или нет. Эта ситуация изменится, когда в браузеры произойдет широкое внедрение File API. А пока Mobile IE, Opera Mini и некоторые версии iOS Safari не поддерживают этот API. Код не может вызывать веб-камеру, датчики и другие аппаратные компоненты. В какой-то момент браузеры откроют доступ к большему числу аппаратных средств, но сейчас оно в основном недоступно.

Для поддержки автономных средств мобильные веб-сайты должны использовать такие веб-технологии, как Web Storage, IndexedDb и AppCache. Мобильные сайты не могут задействовать преимущества ресурсов файловой системы, но их модель изолированной программной среды («песочницы») все же разрешает использовать некую часть клиентского хранилища.

«Родные» приложения

Для большинства целевых платформ вы сможете использовать уже имеющиеся у вас навыки. Если вы занимаетесь разработками для Windows, то можете создавать приложения на C#, Visual Basic или C++, попутно используя XAML для UI. Вы также могли бы писать на JavaScript, применяя HTML, CSS и WinJS для UI. В Android вы можете писать на Java и Objective-C для iOS.

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

Зачастую ориентации на несколько платформ мешает то, что приходится заново создавать, как минимум, UI для каждой целевой платформы. То есть вам придется создавать отдельные UI для приложений Windows Store, Windows Phone, iOS и Android. Создание гибкого UI, способного хорошо работать на десятках слегка отличающихся по разрешению экранах, может оказаться весьма трудной задачей. Однако в результате пользователи получат полнофункциональный UI, отвечающий «духу и букве» платформы. В конечном счете рейтинги в магазине приложений отражают качество и функционал приложений.

Перед разработкой вы должны выработать кросс-платформенную стратегию. Подумайте, на какие платформы вы будете ориентироваться и в каком порядке вы будете публиковать соответствующие версии приложения. Если рассматривать этот вопрос с позиции типов приложений, то самый беспроблемный путь таков: от мобильного веб-сайта к гибридному приложению, а затем к «родному».

Хотя вы можете публиковать «родные» приложения, вы захотите сохранить полную поддержку мобильного веб-сайта. Затем выберите платформу, возможно, такую, которая соответствует вашим навыкам, и приступайте к разработке. Подробнее о различных соображениях при создании кросс-платформенных приложений см. мою статью «Design a Cross-Platform Modern App Architecture» за май 2014 г. (msdn.microsoft.com/magazine/dn683800).

Visual Studio содержит много шаблонов проектов для создания «родных» приложений для платформы Windows. В разделах для C#, Visual Basic и C++ вы найдете шаблоны проектов для Windows Store и Windows Phone. Visual Studio также содержит шаблоны для приложений на JavaScript. Сначала вы должны определить язык, которым будете пользоваться, и здесь тоже следует принять во внимание множество соображений, в том числе, будет ли приложение кросс-платформенным. Моя статья «Understanding Your Language Choices for Developing Modern Apps» за сентябрь 2013 г. (msdn.microsoft.com/magazine/dn385713) поможет вам в выборе языка.

Большинство «родных» приложений в рамках конкретной платформы имеет схожую парадигму навигации. Например, на платформе Windows Store используются панели приложений и определенным образом размещаемые кнопки Back. Задействовав преимущества встроенных схем навигации, вы сможете предоставить своим пользователям привычную среду, не требующую дополнительного обучения. Это повысит ваши рейтинги в магазинах и увеличит количество скачиваний. Вся информация о навигации в приложениях Windows Store была изложена в моей статье «Navigation Essentials in Windows Store Apps» за апрель 2014 г. (msdn.microsoft.com/magazine/dn342878).

Гибридные приложения

Между мобильными веб-сайтами и «родными» приложениями располагаются гибридные приложения. Они позволяют предоставлять контент с существующих веб-сайтов в формате приложения. Это отличный способ упаковать ваш веб-контент для публикации в магазине приложений. Вы можете публиковать гибридные приложения в любом из крупнейших магазинов: Microsoft Windows Store, Google Play, Apple App Store, Amazon Appstore и даже BlackBerry World.

Сильная сторона гибридного приложения — его можно опубликовать как готовый продукт или как временный заменитель, чтобы застолбить свою нишу в магазине приложений, пока вы работаете над созданием набора «родных» приложений. Это дает вам значительную фору на рынке и позволяет запустить процесс маркетинга, когда вы еще работаете над набором «родных» приложений (если вы ставите такую цель).

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

Хорошая новость в том, что, если вы выбрали гибридные приложения, то сможете использовать привычные приемы веб-разработки. Гибридные приложения в значительной мере являются оболочками веб-сайтов. В их основе те же старые HTML, JavaScript и CSS, хорошо известные вам.

Вокруг гибридных приложений существует целая экосистема для различных магазинов приложений. Как и следовало ожидать, в Visual Studio есть шаблоны для создания гибридных приложений. Все популярные поставщики, такие как Xamarin, Telerik, DevExpress и Infragistics, предлагают инструментарий и элементы управления, которые ускоряют процесс разработки гибридных приложений.

Применение iFrame в Visual Studio для приложений JavaScript позволяет создавать гибридное приложение исключительно на веб-языках. Вы также можете создать гибридное приложение, используя шаблон проекта Windows Phone HTML5 с C# или Visual Basic .NET. Наконец, возьмите любое XAML-приложение и добавьте в него элемент управления WebView — вы получите тот же результат. Элемент управления WebView ведет себя так, словно он является браузером. То есть вы можете контролировать его, вызывая методы вроде Navigate, Refresh или Stop, зачастую сопоставляемые эквивалентным операциям. Вот пример использования элемента управления WebView и некоторого базового кода для навигации на начальную страницу приложения:

В MainPage.Xaml

<WebView x:Name="webView"/>

In MainPage.Xaml.Cs

public MainPage()
{
  this.InitializeComponent();
  Uri targetUri = new Uri("http://rachelappel.com");
  webView.Navigate(targetUri);
}

Вы можете прослушивать события в WebView для выполнения навигации, загрузки страницы или других задач. Например, вы можете подключиться к навигации и регистрировать популярные ссылки, как в этом примере:

private void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender,
  WebViewNavigationCompletedEventArgs args)
{
  logNavigation(args.Uri.ToString());
}

Это как раз тот тип события, который вы ожидали бы при управлении веб-браузером. WebView значительно упрощает объединение существующего веб-контента с возможностями «родного» приложения.

Заключение

Каждый способ проектирования и создания приложений имеет свои плюсы и минусы. Например, концепция магазина приложений может быть аргументом как за, так и против. Преимущество заключается в адресной видимости для потенциальной аудитории. Недостаток состоит в том, что вы должны создавать несколько UI, хотя код внутренних сервисов зачастую одинаков.

Независимо от того, создаете вы «родное» или гибридное приложение, у вас должна быть мобильная версия вашего веб-сайта. Мобильные веб-сайты обеспечивают самый большой охват всех типов приложений. Гибридные приложения помогают выйти на рынок заранее, еще в процессе разработки «родных» приложений. Это отличный способ собрать данные о количестве скачиваний и использовании, чтобы решить, насколько существенен для вас конкретный рынок. Наконец, адаптивный дизайн и адаптивный CSS-код расширяют функционал любого из рассмотренных здесь приложений, поддерживающих веб-технологии.