Разработка мобильных веб-приложений: когда, зачем и как

На планете 6,8 миллиарда человек, 5,1 миллиарда из которых имеют мобильный телефон. И сегодня постоянно растущий процент этих устройств составляют смартфоны. Согласно недавнему исследованию Pew Research Center, количество пользователей, выходящих в Интернет со своих смартфонов, за последние 5 лет увеличилось более чем вдвое, равно как и количество пользователей, загружающих и использующих мобильные приложения. Из тех, кто пользуется Интернетом или электронной почтой на своих телефонах, более трети выходят в сеть в основном через свои портативные устройства.

Действительно, мобильные компьютеры становятся все более распространенными… и это здорово.

Кроме, конечно, когда это не так.

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

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

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

Мобильное веб-приложение против нативного приложения против гибридного приложения

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

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

И помимо вопроса о старых веб-приложениях и нативных приложениях, гибридное мобильное приложение может быть правильным ответом для вас, в зависимости от ваших требований и ограничений ресурсов. Гибридные приложения, как и нативные приложения, запускаются на самом устройстве (а не внутри браузера), но они написаны с использованием веб-технологий (HTML5, CSS и JavaScript) и обычно поддерживаются платформой гибридных приложений. В частности, гибридные приложения запускаются внутри собственного контейнера и используют механизм браузера устройства (но не браузер) для рендеринга HTML и локальной обработки JavaScript. Уровень абстракции «из сети в собственный» обеспечивает доступ к возможностям устройства, недоступным в мобильных веб-приложениях, таким как акселерометр, камера и локальное хранилище.

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

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

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

Разработка мобильных веб-приложений требует детального планирования

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

Еще одна распространенная ошибка для новичков в разработке мобильных веб-приложений — предположить, что веб-код для настольного браузера будет работать «как есть» в мобильном браузере. Нет. Там определенно есть различия, и, если вы не знаете о них, они определенно могут вас укусить. Например, функция автоматического воспроизведения тега HTML5 <video> не работает в мобильных браузерах. Точно так же свойства transition и opacity CSS не поддерживаются (или, по крайней мере, не всегда поддерживаются) в большинстве мобильных браузеров в настоящее время. У вас также будут проблемы с некоторыми методами веб-API на мобильной платформе, такими как API потоковой передачи музыки SoundCloud, для которого требуется Adobe Flash, который не поддерживается на большинстве мобильных устройств.

Особенно сложным фактором в разработке мобильных веб-приложений является то, что срок службы мобильных устройств, как правило, намного короче, чем срок службы дисплеев настольных компьютеров (средний срок службы сотового телефона в США составляет около 21 месяца). Эти более короткие сроки службы устройств, сопровождаемые постоянным выпуском новых мобильных устройств и технологий, приводят к постоянно меняющемуся ландшафту целевых устройств. Хотя работа в браузере несколько облегчает эту проблему, защищая вас от ряда проблем, связанных с конкретным устройством, вам все равно потребуется разработать представление на основе браузера, которое поддерживает множество различных разрешений экрана (а также соответствующую настройку для альбомной и портретной ориентаций). ).

Следует подумать и о поддержке дисплеев Apple Retina (жидкокристаллические дисплеи с плотностью пикселей, достаточно высокой, чтобы человеческий глаз не мог различить отдельные пиксели на обычном расстоянии просмотра). Некоторые продукты Apple, в том числе iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini и iPad Air, оснащены дисплеями Retina. В частности, для мобильного веб-приложения важно знать, что на дисплее Retina изображения с низким разрешением (которые обычно передаются на мобильные устройства) выглядят нечеткими, и может возникнуть пикселизация. Лучшее решение для разработки приложений в этих случаях — заставить сервер распознать, что запрос исходит от устройства Retina, а затем предоставить клиенту альтернативное изображение с более высоким разрешением.

Если вы хотите использовать некоторые из интересных вещей HTML5, не забудьте заранее убедиться, что искомая функциональность поддерживается на всех устройствах, которые, вероятно, будут использовать ваши клиенты. Например, в iOS 6 и более поздних версиях нет поддержки функции getUserMedia навигатора, поскольку доступ к камере возможен только через собственные приложения. Два отличных ресурса для проверки того, что поддерживается на конкретных устройствах и браузерах, — это caniuse.com и html5test.com.

Медиа-запросы CSS3 также могут помочь вам предоставить индивидуальный контент для каждого устройства. Вот пример кода для захвата различных характеристик устройства, таких как плотность пикселей, разрешение экрана и ориентация:

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Оптимизация мобильного веб-приложения для повышения производительности

«ОМГ, эта штука такая медленная!» Как разработчик мобильных веб-приложений, это, вероятно, самые последние слова, которые вы когда-либо хотели услышать от одного из ваших пользователей. Поэтому вы должны тщательно продумать, как уменьшить и оптимизировать каждый байт и передачу сервера, чтобы сократить время ожидания пользователя. Нереально ожидать, что передача всегда будет осуществляться через сеть Wi-Fi, и вы должны знать, что 60% пользователей мобильного Интернета говорят, что ожидают, что сайт загрузится на их мобильный телефон за 3 секунды или меньше (источник). Точно так же Google обнаружил, что на каждые дополнительные пять секунд времени загрузки трафик падает на 20% (и также стоит отметить, что поисковые системы учитывают время загрузки как часть своего расчета показателя качества страницы).

В рамках этого руководства по разработке мобильных веб-приложений вы найдете несколько советов, которые помогут оптимизировать производительность ваших мобильных веб-приложений и свести к минимуму задержки:

• Оптимизация изображения. Известно, что время загрузки изображения является одной из самых больших проблем с производительностью, влияющих на загрузку страниц на мобильных устройствах. Использование онлайн-оптимизаторов изображений, таких как smashit.com, может помочь в решении этой проблемы.
• Сжатие кода. Сжатие файлов JavaScript и CSS, в зависимости от объема имеющегося у вас кода, потенциально может оказать значительное влияние на производительность.
• Запросы к базе данных.
  • Браузеры некоторых мобильных устройств не принимают столько файлов cookie, сколько браузеры настольных компьютеров, что может привести к необходимости выполнять еще больше запросов, чем обычно. Поэтому кэширование на стороне сервера особенно важно при поддержке клиентов мобильных веб-приложений.
  • Не забудьте использовать соответствующие фильтры, чтобы предотвратить внедрение SQL-запросов, которые в противном случае могут поставить под угрозу безопасность вашего сайта и сервера.
• Сети доставки контента (CDN). Если вы планируете предоставить много видео, изображений, аудиофайлов или других типов мультимедиа, настоятельно рекомендуется использовать CDN. Некоторые из наиболее распространенных коммерческих CDN включают Amazon S3, Microsoft Windows Azure и MaxCDN. Преимущества использования CDN многочисленны и включают в себя:
  • Улучшена производительность загрузки. Использование ресурсов CDN позволяет распределять нагрузку, экономить пропускную способность и повышать производительность. Лучшие CDN предлагают более высокую доступность, меньшую задержку в сети и меньшую потерю пакетов. Более того, многие CDN предоставляют глобально распределенный выбор центров обработки данных, позволяя загружать файлы с сервера, расположенного ближе к местоположению пользователя (что приводит к меньшему количеству сетевых переходов и более быстрой загрузке).
  • Больше одновременных загрузок. Браузеры обычно ограничивают количество одновременных подключений к одному домену, после чего дополнительные загрузки блокируются до завершения одной из предыдущих загрузок. Вы часто можете увидеть это ограничение в действии при загрузке большого количества больших файлов с одного и того же сайта. Каждая дополнительная CDN (в другом домене) позволяет выполнять дополнительные одновременные загрузки.
  • Расширенная аналитика. Многие коммерческие CDN предоставляют отчеты об использовании, которые могут дополнять аналитику вашего собственного веб-сайта и могут предложить более точную количественную оценку просмотров и загрузок видео. GTmetrix, например, имеет отличный инструмент для создания отчетов о веб-сайтах для мониторинга и оптимизации источников, загруженных на ваш сайт.

Инструменты разработки мобильных веб-приложений

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

Выбор правильной инфраструктуры мобильных веб-приложений JavaScript

Поскольку разработка мобильных веб-приложений, как правило, создает множество общих проблем, таких как кросс-браузерная совместимость и несогласованность HTML и CSS в мобильных браузерах, были разработаны фреймворки (на основе HTML5 и CSS3), специально предназначенные для решения этих проблем и для максимально безупречной работы на широком спектре смартфонов и планшетов. Большинство этих фреймворков для мобильных веб-приложений являются легкими, что помогает ускорить просмотр мобильных веб-страниц без ущерба для внешнего вида вашего сайта.

Расширяя наш взгляд за пределы мобильного ландшафта, если и есть один популярный JavaScript-фреймворк, о котором стоит упомянуть, так это jQuery. Если вы знакомы с настольной версией, я рекомендую попробовать jQuery Mobile для вашего мобильного веб-приложения. Он имеет библиотеку виджетов, которая преобразует семантическую разметку в удобный для жестов формат, упрощая работу на сенсорных экранах. Последняя версия состоит из очень легкой кодовой базы, которая содержит множество графических элементов, которые действительно могут улучшить ваш пользовательский интерфейс.

Другая альтернатива, Sencha Touch, также быстро завоевывает рынок. Он предлагает отличную производительность в целом и помогает создать мобильный веб-интерфейс пользователя, который в значительной степени выглядит и ощущается как родной. Его полнофункциональная библиотека виджетов основана на библиотеке JavaScript ExtJS Sencha.

Вот некоторые ключевые различия, которые следует учитывать при сравнении jQuery Mobile и Sencha Touch:

• Смотри и чувствуй. Вообще говоря, внешний вид приложения Sencha Touch четче и лучше, чем у мобильного приложения jQuery, но важно помнить, что такие реакции, как правило, очень субъективны.
• Расширяемость. jQuery Mobile предлагает множество сторонних расширений и изначально спроектирован так, чтобы быть очень расширяемым, тогда как Sencha Touch в настоящее время представляет собой гораздо более «закрытую» структуру.
• Поддержка устройств. jQuery Mobile в настоящее время нацелен на большее количество устройств, чем Sencha Touch.
• HTML «против» JavaScript. jQuery в значительной степени ориентирован на HTML (т. е. расширяет и манипулирует существующим HTML в JavaScript), тогда как кодирование Sencha Touch полностью основано на JavaScript. (Кстати, это пример того, как важно учитывать набор навыков вашей команды разработчиков при выборе технологии.)
• Внешние зависимости. jQuery mobile требует jQuery и пользовательского интерфейса jQuery для манипулирования DOM, тогда как Sencha Touch не имеет внешних зависимостей.
• Кривая обучения. Большинство разработчиков считают, что время разгона с jQuery меньше, чем у Sencha Touch, возможно, благодаря большому проценту веб-разработчиков, которые уже знакомы со стандартными библиотеками jQuery.

Адаптивные фреймворки и мобильные веб-приложения

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

Изучая два ведущих варианта, Bootstrap и Foundation, можно выделить несколько ключевых отличий, которые следует учитывать:

• Целевые платформы. Хотя Bootstrap поддерживает мобильные устройства, планшеты и настольные компьютеры, он в первую очередь ориентирован на использование на настольных компьютерах. Foundation, с другой стороны, предназначен практически для всех размеров и типов экранов.
• Совместимость с браузером. Bootstrap совместим с IE7 или выше, тогда как Foundation совместим только с IE9 или выше.
• Разнообразие планировок и компонентов. Bootstrap имеет значительно больший набор элементов пользовательского интерфейса, чем предлагает Foundation.
• Автоматическое изменение размера. В Foundation сетка сжимается и растягивается в соответствии с текущей высотой и шириной браузера, тогда как Bootstrap поддерживает только предопределенный набор размеров сетки, основанный на стандартном наборе размеров экрана.

Отладка и тестирование мобильных веб-приложений

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

В этом контексте одно явное преимущество мобильной веб-разработки (по сравнению с разработкой нативных приложений) заключается в том, что вы можете использовать стандартные браузерные инструменты разработчика для отладки своего приложения. Исходя из моих личных предпочтений в отношении удаленной отладки, в этом руководстве по разработке приложений я рекомендую Chrome с его DevTools. Другие стандартные варианты включают Firefox с инструментами Firebug или Opera Dragonfly.

Вот некоторые из причин, по которым я предпочитаю Chrome с его DevTools:

• Мобильный эмулятор в Chrome DevTools. Пожалуй, одной этой причины достаточно, чтобы выбрать Chrome для отладки мобильных веб-приложений. Основные функции включают эмуляцию событий касания, подмену пользовательского агента, регулирование пропускной способности сети, переопределение геолокации, переопределение ориентации устройства и эмуляцию типа мультимедиа CSS.
• Интерактивный редактор. Возможность редактировать JavaScript или CSS на лету.
• Превосходный отладчик JavaScript. Позволяет использовать точки останова DOM и предоставляет возможность профилировать время выполнения кода JavaScript.
• Встроенные средства просмотра JSON и XML. Избегает необходимости в каких-либо плагинах для проверки ответов сервера.
• Поддержка протокола Android Debug Bridge (ADB) непосредственно через USB. Облегчает создание экземпляра сеанса удаленной отладки. (Вот хороший учебник от Google о том, как начать удаленную отладку в Chrome.)
• Динамический осмотр ресурсов. Позволяет проверять локальные источники данных вашего приложения, включая базы данных IndexedDB или Web SQL, локальное хранилище и хранилище сеансов, файлы cookie и ресурсы кэша приложений. Вы также можете быстро проверить визуальные ресурсы вашего приложения, включая изображения, шрифты и таблицы стилей.

Чтобы протестировать макет и совместимость вашего веб-приложения с несколькими браузерами, вы также можете использовать некоторые полезные онлайн-инструменты, такие как BrowserStack. Просто введите URL своего приложения, выберите браузер, версию и операционную систему, и вы получите эмулированный вид (и скорость загрузки) вашего сайта в этой среде. Еще один полезный инструмент для этих целей — CrossBrowserTesting.

Заворачивать

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

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