Обзор веб-инструментов для создания приложений без использования Android SDK. Отладка и тестирование

Иногда у разработчиков мобильных приложений возникает вопрос: создать гибридное приложения на HTML 5 по все платформы или нативное под одну? У каждого из этих вариантов есть свои плюсы и минусы. В этой статье мы рассмотрим все «за» и «против» и в конце подведем итоги.

Определения

Перед тем как начатт сравнивать нативные приложения и приложения, созданные с помощью HTML 5, нам нужно определиться с терминологией.

Нативное (родное) приложение — приложение, созданное с использованием языка программирования и технологий определенной ОС. Например в Android приложения пишутся на Java с использовпнием фреймворка Android SDK, а в iOS используется язык программирования Objective-C или же Swift.

HTML 5-приложение — приложение, написанное основанное на HTML 5, CSS и JavaScript, и исполбзующее браузер ОС для работы.

Сравнение HTML 5 и нативных приложений

Мобильность

HTML 5 приложения могут быть портированы на различные ОС и устройства. Если при написании приложения использовалась адаптивная верстка, приложение может автоматически подстраиваться под различные размеры экранов. Если приложение обновилось, то обновление получают одновременно все устройства.

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

Победитель: HTML 5

Стоимость разработки

HTML 5-приложения, как правило, дешевле в плане разработки и поддержки, чем нативные приложения. Приложение на HTML 5 может быть разработано одним разработчиком. Нативные приложений для всех основных мобильных операционных систем обычно требуют специализированных разработчиков для каждой ОС (Java для Android, Objective-C/ Swift для iOS, C# для Windows), которые будут стоить значительно дороже, чем один веб-разработчик.

Победитель: HTML 5

Скорость и эффективность

Нативные приложения почти всегда более эффективные и быстрые, чем приложения на HTML 5. Несмотря на все попытки сделать интерпретатор JavaScript быстрее, HTML 5 не может работать быстрее нативных приложений.

Победитель: Нативные приложения

Использование «железа»

Родное приложение может взаимодействовать с широким спектром аппаратных средств, предоставляемых устройством, в том числе GPS, камера, акселерометр, динамики, экран и многое другое. HTML 5-приложения не имеют одинаковую способность взаимодействовать с аппаратными средствами.

Победитель: Нативные приложения

Заключение

Если вам нужно разработать приложение за небольшую сумму для несколькох ОС, при этом скорость приложения не критична, выбирайте HTML 5. Если приложение использует конкретные аппаратные средства, а также большая скорость работы, то, безусловно, нужно разрабатывать нативное приложение.

Business Insider (BI) Intelligence специализируется на аналитике мобильного и веб-программирования. И они задались вопросом: смогут ли веб-приложения вытеснить мобильные с рынка мобильных утилит?

Что лучше?

Мобильные приложения, которые загружаются из AppMarket’ов и предназначены для использования только на Android или только iOS? Или веб-приложения на HTML5, которые могут быть запущены на любом устройстве, лишь бы имелся браузер?

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

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

Теперь доступ в сеть имеют не только ПК и ноутбуки

Объемы продаж мобильных устройств с доступом в интернет (планшетов и смартфонов) к 2012 году, согласно статистике компании Gartner, вдвое превосходили объемы продаж компьютеров (в том числе, ноутбуков). А в 2013 году этот коэффициент увеличился почти до 10! (Источник: статистика Gartner).

С точки зрения абсолютных величин, количество поставок компьютеров существенно снизилось, и такая тенденция продолжает сохраняться (хотя ситуацию на некоторое время изменил выпуск Windows 8).

Сами по себе планшеты обойдут компьютеры по объемам продаж уже в ближайшие два-три года. (также см. статистику Gratner, ссылка выше).

Так что будущее за мобильным интернетом.

Так как же мы будем общаться с нашими девайсами? Посредством интернет-версий или стационарных версий приложений? Давайте посмотрим, что же происходит сейчас на рынке программного обеспечения для старших братьев мобильных устройств – компьютеров. Уже там мы нередко делаем выбор в пользу веб-приложений: мало найдется людей, которые предпочтут Microsoft Outlook или другой почтовый клиент веб-приложению Gmail. Та же ситуация и в сфере обмена мгновенными сообщениями: переписка в социальных сетях составляет серьезную конкуренцию мобильным мессенджерам (да и не только мобильным).

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

И поэтому всего 20% своего времени пользования мобильными устройствами мы уделяем веб-серфингу.

А наши мобильные устройства уже изначально напичканы немалым количеством разного рода native приложений. Иконка браузера же может и вовсе не находиться на домашнем экране.

Однако…

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

Кто разработал HTML5?

World Wide Web Consortium (W3C) – консорциум всемирной паутины под руководством сэра Тима Бернерса-Ли, одного из изобретателей интернета. Какое-то время назад HTML5 еще был на стадии разработки, но сейчас доступен каждому и поддерживается всеми браузерами. И многие действительно серьезные приложения создаются на HTML5 (они работают как и традиционные мобильные приложения, но «живут в сети»): например, tradeMONSTER – приложение для биржевой торговли.

Но и у HTML5 жизнь не так легка

Между тем, HTML5 приходится преодолевать некоторые препятствия на пути к пользователю. И первое же заключается в «кросс-браузерности». К сожалению, не все браузеры поддерживают возможности HTML5 в равной степени (а кроме того, эти различия могут зависеть от версий браузеров).

Поддержка HTML5 различными браузерами
(зел. = полностью, син. = частично, кр. = не поддерживается)

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

И кроме того, у мобильных приложений есть серьезное преимущество: они знают об устройстве и платформе больше, чем их HTML5-аналоги. В сентябре 2012 года Марк Цукерберг признался, что считает ошибкой переход на HTML5 как полноценную замену мобильным приложениям. Того же мнения, видимо, придерживается и команда LinkedIn, создавшая свое приложение после, вероятно, неудачного опыта с HTML5.

К недостаткам веб-приложений HTML5, которые делают разработку непривлекательной, относится также и невозможность монетизации таких приложений в силу отсутствия единого рынка. Согласно расчетам BI Intelligence, HTML5-разработчики теряют суммарно около 6 миллиардов долларов по сравнению с разработчиками мобильных приложений. С другой стороны, отсутствие единого рынка служит залогом независимости от корпораций-держателей: например, не требуется верификация приложений Google или Apple. (И, к тому же, с ними не надо делиться прибылью!)

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

Производительность HTML5-приложений

Давайте же зададимся вопросом: как показывают себя веб-приложения среди множества стабильных версий мобильных приложений? Оказывается, что в плане производительности веб-версии все же уступают своим традиционным аналогам. Да и пользовательский интерфейс в HTML5 несравнимо беднее.

К тому же, очень важным в отношении использования HTML5 является вопрос безопасности: в мобильных приложениях эта проблема стоит не так остро, как в веб-приложениях.

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

Начиная с IDE NetBeans 7.3 были представлены новые функции по поддержке и усовершенствованию процесса разработки с клиентскими веб-приложениями, которые используют семейство технологий HTML5. Эта интуитивная технология позволяет быстро создавать многофункциональные веб-приложения, отвечающие принципам интерактивной веб-разработки и работающие как на настольных системах, так и на мобильных платформах. Кроме того, технологии HTML5 можно использовать в приложениях Java EE и PHP .

Поддержки ускоренной разработки HTML5

IDE NetBeans обеспечивает возможность ускоренной разработки веб-приложений HTML5 сразу с момента создания проекта HTML5. Можно выбрать из списка популярных шаблонов в Интернете для проектов HTML5 или указать местоположение.ZIP архива шаблона сайта. При создании проекта на основе шаблона сайта, файлы, библиотеки и структура проекта определяются шаблоном.

Настройка динамического просмотра веб-страниц, поддержки редактора, возможностей отладки и других функций помогает в разработке, тестировании и отладке приложений HTML5, Java EE и PHP.

Динамический просмотр веб-страниц

Большинство профессиональных разработчиков признает, что по сравнению с WYSIWYG более предпочтительной является тесная интеграция с браузером Chrome и внутренним встроенным браузером WebKit, которая обеспечивает стабильную связь между кодом и дизайном страницы.

При использовании удаленных API WebKit сохраняется полная прозрачность и контроль кода в IDE и появляется возможность получать мгновенную визуальную обратную связь от страницы браузера

Примечание. Динамический предпросмотр веб-страниц возможен и на мобильных устройствах. Эту возможность можно использовать не только в браузере Chrome и внутреннем встроенном браузере WebKit, но и в браузере Chrome на устройствах Android и в браузере Mobile Safari на устройствах iOS.

Функция Responsive Web Design

IDE NetBeans поддерживает использование архитектур Responsive Web Design, позволяя пользователям выбирать различные форм-факторы для веб-страниц и мгновенно предоставляя доступ к визуальным элементам веб-страницы в браузере для этого форм-фактора. Предусмотрен выбор из целого ряда заданных форм-факторов, начиная от смартфонов до настольных компьютеров, как в портретном, так и в альбомном режимах.

Редактор стилей CSS в IDE не только улучшает возможности браузера, но и распознает текущие запросы носителей, отображаемые в браузере, и автоматически вносит изменения CSS в этот запрос носителя.

Расширенная поддержка JavaScript

Поддержка JavaScript в IDE была переработана. Поддержка включает в себя функции, характерные для платформы JavaScript: выделение синтаксиса цветом, автозавершение кода и другие средства редактирования и рефакторинга кода.

Поддерживаются следующие платформы JavaScript: jQuery, JSON, Knockout, Ext Js, AngularJS, JsDoc, ExtDoc и ScriptDoc.

Теперь вы также можете контролировать параметры форматирования для языка JavaScript в диалоговом окне "Параметры".

Поддержка редактирования и применения стилей CSS

Реализована поддержка редактирования для препроцессоров Sassy CSS и LESS CSS, включая выделение цветом синтаксических и семантических элементов в языковых конструкциях, отступы, изменение форматирования, свертывание кода и шаблоны файлов. Предусмотрены средства автозавершения и рефакторинга кода для переменных и примесей.

Тесная интеграция с браузерами Webkit позволяет просматривать в браузере изменения, внесенные в окне стилей CSS, в реальном времени по мере их внесения. Не нужно больше гадать, как будут выглядеть изменения CSS, до момента обновления браузера. Изменения отображаются в браузере и вносятся в исходный код.

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

Примечание. Поддержка редактирования и применения стилей CSS реализована и для мобильных устройств. Эту возможность можно использовать не только в браузере Chrome и внутреннем встроенном браузере WebKit, но и в браузере Chrome на устройствах Android и в браузере Mobile Safari на устройствах iOS.

Поддержка мобильных устройств и разработка по технологии Cordova

При разработке приложений на HTML5, JavaScript и CSS3 среда IDE создает встроенные пакеты распространения благодаря поддержке технологий Cordova/PhoneGap. Каждый проект HTML5 в среде IDE можно преобразовать во встроенный пакет для iOS или Android, который можно развернуть на соответствующем устройстве непосредственно из IDE.

IDE позволяет редактировать файлы CSS в визуальном редакторе и выполнять отладку приложений JavaScript в браузере Chrome, встроенном браузере WebKit и непосредственно на устройствах iOS (в браузере Safari) и Android (в браузере Chrome).

Примечание. Любое веб-приложение (HTML5, Java EE или PHP) можно протестировать и отладить на мобильном устройстве.

См. также

• На странице сведений о версии IDE netbeans 8.1 приведен список выделенных функций в последней стабильной версии.
• Учебная карта по PHP и HTML5 для учебных курсов по началу работы.

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

Назначение
Сегодня огромное количество веб-мастеров занимаются разработкой программного обеспечения на основе HTML5. Так как объем информации просто огромный, не у каждого получается запомнить все важные моменты, операторы.

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

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

Это очень удобно и практично, если нужно найти ответ на вопрос в считанные минуты.

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

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

Особенности приложения
Среди наиболее привлекательных особенностей следует выделить:
- Разноплановая справочная информация, связанная с HTML5;
- Возможность бесплатно и быстро скачать, а в последствии и установить книгу;
- Большое количество примеров;
- Постоянное обновление программного продукта.