Настало время поговорить об эволюции мобильных приложений. Для того чтобы понять как работает большинство приложений, необязательно иметь глубоких знаний в этой области. Достаточно понимать, как работает HTML, CSS и JavaScript. С помощью веб-технологий создаются приложения, которые работают на различных платформах, в отличие от родных приложений.
Сегодня существуют различные инструменты и структуры (фреймворки), которые помогают нам создать мобильные приложения без особого труда.
В этой статье мы разберем топ-7 таких фреймворков.
IONIC - одна из самых многообещающих фреймворков для мобильных приложений на основе HTML 5. Построен с использованием SASS, что обеспечивает большое количество компонентов UI, позволяющие создавать интерактивные приложения. Для запуска приложений используется фреймворк JavaScript MVVM и AngularJS. Двустороннее закрепление данных, взаимодействие с серверными службами и API делает AngularJS самым популярным среди разработчиков приложений. Нет сомнений, что он станет еще более популярным, после выхода новой версии AngularJS 2.0, ориентированный на мобильные устройства.
Команда работников IONIC скоро представят новый помощник в создании IONIC приложений под названием «IONIC creator». Он будет анонсирован совсем скоро и будет поддерживать перетаскивание, что намного ускорит создание приложений.
Для того чтобы поближе познакомиться с IONIC, вы можете почитать статьи о начале работы с мобильными приложениями и о разработке игр на основе ОС Firefox.
Mobile Angular UI - фреймворк на основе HTML 5, который использует bootstrap 3 и AngularJS для создания интерактивных мобильных приложений.
Основные особенности Mobile AngularUI включают в себя:
Ответные медиа запросы отделены от программы начальной загрузки и вам остается только выбрать то, что необходимо. Мобильный Angular UI независим от jQuery, поэтому все, что вам нужно для создания мобильного приложения, это некоторые AngularJS директивы.
Для того чтобы посмотреть Mobile Angular UI в действии, обратите внимание на демо страницу. Также мы рекомендуем вам ознакомиться с инструкцией о том, с чего начинать работу с Mobile Angular UI.
Intel XDK - это мульти платформная разработка Intel. Работать с ней достаточно легко, вам нужно лишь скачать бесплатные приложения, которые совместимы с Linux, Windows и Mac. Она содержит множество шаблонов для начала работы и поддерживает UI фреймворки, такие как Twitter bootstrap, jQuery Mobile и Topcoat.
Intel XDK обеспечивает предварительный просмотр в реальном времени на подключенном устройстве, в то время как вы можете изучать другие интересные инструменты.
На наш взгляд, Intel XDK является самым простым в использовании. Он использует перетаскивание, что позволяет избежать много рутинной работы.
Во введении в работу с Intel XDK вы найдете большое количество обучающего материала по работе с платформой.
Appcelerator Titanium - это открытый ресурс фреймворков мобильных приложений, который обеспечивает условия для создания родных приложений для нескольких мобильных платформ.
Titanium - это отличная разработка, в которой вы найдете все, что нужно для создания гибридных мобильных приложений. Для работы с Titanium скачайте Titanium studio. Titanium SDK содержит несколько API платформ и Cloud сервис, работающий как хранилище. Он идет с независимой платформой API, которая упрощает доступ к мобильному устройству.
Titanium использует Alloy, фреймворк MVC для ускорения работы с мобильными приложениями. Созданные с помощью Alloy модули легко повторно использовать для различных приложений, следовательно, значительно уменьшается время работы и линия кода.
Titanium studio содержит некоторые примеры кода, а также мы надеемся, что скоро появятся обучающие видео на SitePoint.
Sencha Touch - это HTML 5 фреймворк для создания приложений для таких платформ как iOS, Android и Blackberry и не только. Он существует уже несколько лет, но относительно недавно стал популярным среди разработчиков гибридных мобильных приложений.
Sencha Touch более продвинутый, чем его оппоненты в вопросе создания родных приложений для различных платформ.
Работать с ним также не сложно, но для того чтобы выжать из него лучшее, придется потратить достаточно большое количество времени.
Для того чтобы полностью оценить достоинства Sencha Touch, взгляните на примерные коды на официальном сайте.
Telerik’s Kendo UI - HTML 5 фреймворк для создания мульти-платформных мобильных приложений. Kendo UI сильно зависит от jQuery и содержит некоторое количество виджетов, основанных на jQuery.
Работать с ним не сложно. Разработчики знакомые с jQuery оценят легкость работы с Kendo UI. У Kendo UI есть открытый ресурс инструментов и JavaScript фреймворков.
Однако, большинство используемых виджетов все еще доступны лишь в соответствии с коммерческой лицензией.
Просмотрите официальную документацию для работы с Kendo UI. Там вы найдете видео уроки, которые помогут вам изучить этот фреймворк.
PhoneGap немного выбивается из нашего списка, поскольку этот фреймворк не для создания приложения, а для его упаковки и выпуска. Платная программа PhoneGap находится на открытом источнике Cordova и принадлежит Adobe. Популярен среди многих разработчиков мобильных приложений.
Для работы с PhoneGap вы можете выбрать между фраймфорками JavaScript или UI. Хороши комбинации jQuery Mobile и KnockOut.js или AngularJS. Как только вы закончите работу с кодом, PhoneGap завершает всю оставшуюся работу на платформе, с которой вы работаете. Приложения, созданные с помощью PhoneGap используют веб представление для передачи контента. PhoneGap содержит минимальный набор веб API для доступа к возможностям мобильного устройства и позволяет писать запрашиваемые плагины.
Инструкцию по работе с PhoneGap вы найдете .
Бонус
App.js - библиотека JavaScript для создания мобильных приложений. Этот, не похожий на других фреймворк, не использует AngularJS. Он предоставляет несколько базовых тем и виджетов. Вы можете написать приложение, используя zepto или jQuery.
Вывод
В этой статье мы рассмотрели одни из лучших фреймворков мобильных приложений HTML 5. Мобильный HTML 5 хорошо развивается и с каждым днем предлагает все новые опции. А каким фреймворкам отдаете предпочтение вы? Поделитесь в комментариях.
1. Sencha Touch
Sencha Touch является первым Фреймворком HTML5 мобильных веб-приложений. Sencha Touch сохраняет внешний вид приложения – родной для iOS и Android устройств. Sencha Touch позволяет вам легко создавать приложения с массивными многопользовательскими интерфейсами и превосходным UX. Sencha Touch имеет лучшую техническую поддержку от команды Sencha и документация на все детали доступна в качестве поддержки даже для больших программных приложений предприятия. Фреймворк прост в использовании и разработке мобильного приложения. Sencha Touch является основой, которая позволяет программировать для Android, iOS и BlackBerry без изменения внешнего вида приложения. Sencha Touch может быть использовано в сотрудничестве с Phone Gap делая приложения, имеющие точный внешний вид нативного приложения, но созданные с помощью HTML / JavaScript.
2. Phone Gap
Фреймворк Phone Gap основан на HTML 5, которая позволяет разработчикам мобильных приложений делать нативные приложения с использованием JavaScript, CSS3 и HTML5. Лучшая черта Phone Gap в том, что он может быть использован в сотрудничестве с другими фреймворками, чтобы поддержать их с функциями, которые они не имеют, а Phone Gap их обеспечивает. За короткий период времени Phone Gap стал наиболее востребованным среди большинства разработчиков вместе с Sencha. Это позволяет разработчикам мобильных приложений создавать собственные полнофункциональные мобильные приложения и помещать их в оболочку, так что приложение может быть размещено на App Store, или Android Market.
3. JQuery Mobile
JQuery Mobile, Touch-оптимизированные веб-фреймворк для смартфонов и планшетов. Это единый пользовательский интерфейс, который остается постоянным на всех платформах. Код очень легкий и, следовательно, является предпочтительной основой для разработки мобильных приложений. Различные темы, созданные дизайнерами, могут быть легко изменены. Вместо того, чтобы писать разные коды различных операционных систем; JQuery позволяет писать один простой код для создания полнофункционального настроенного приложения на веб-сайте.
4. Titanium Appcelerator
Titanium способствует совмещению платформ при разработке приложений. Приложения, созданные на Titanium, изначально интегрированы. Фреймворк действует как мост между мобильными приложениями и платформой API, результатом которого является приложение, которое имеет лучшую производительность. Платформа Titanium Appcelerator была разработана со смещением, чтобы помочь веб-разработчикам создавать мобильные и планшетные приложения с легкостью. За последний год, платформа пережила огромный рост в развитии, и новые функции, и устройства добавляются для фреймвокра в быстром темпе.
Фреймворки характеризуются как комплексная среда разработки программного обеспечения. Они включают в себя много компонентов, чья основная работа - помочь вам в создании приложений. Фреймворки поставляются с рядом наборов инструментов, отладчиков, компиляторов, библиотеками кодов, программными интерфейсами и другими компонентами. Работая вместе, все они предназначены для того, чтобы облегчить работу разработчикам приложений.
Фреймворки являются основой разработки приложений, а их использование делает процесс разработки проще и более захватывающим. Без них, программисты будут писать каждое приложение, которое хотят, с нуля. Это потребует много кодинга, так чтобы приложение могло работать на разных платформах.
Существует ряд фреймворков, которые можно рассмотреть для использования. В этой статье представлены лучшие из них, чтобы помочь вам сделать разработку проще и легче.
Это один из самых популярных фреймворков для разработчиков мобильных приложений. Он позволяет разработчику создать лучшие прогрессивные и естественные веб-приложения. Эта возможность делает его простым для разработки приложений, которые будут работать на всех платформах, в том числе и на новейших мобильных устройствах. Любой разработчик, который заинтересован в коммерческом успехе своего приложения, обязательно выберет этот фреймворк.
Это плагин Zepto для создания мобильных приложений. Он зависит от нескольких внешних библиотек, таких как Backbone.js и Flickable.JS для некоторых из своих функций работы, но в целом имеет собственный внешний вид. В качестве фреймворка он создает мобильные приложения на HTML 5 с использованием компонентов пользовательского интерфейса Ratchet CSS.
Это хороший выбор фреймворка, поскольку он основан на HTML5 и JavaScript. Он очень гибкий и может помочь разработчику создать различные мобильные приложения, простые или сложные. Фреймворк имеет одни из самых высокопроизводительных виджетов пользовательского интерфейса, которые окажутся очень полезными в вашем развитии. Некоторые виджеты, которые вы получите используя Ext JS – это формы, списки, панели инструментов и меню в частности. Все эти ресурсы доступны, чтобы помочь разработчику создавать великолепные приложения для Android, iOS, iPhone и Windows.
Это так же плагин Zepto для мобильных фреймворков, который был разработан в первую очередь для браузеров на базе WebKit. Он настраиваемый и расширяемый. Фреймворк поставляется с темой, которая может быть изменена, используя Compass или Sass, и с очень крутыми 3D-переходами, которые могут быть скорректированы путем использования CSS3. Вы также можете расширить его своими собственными функциями, чтобы получить нужную поддержку, необходимую для создания своего приложения.
Данный фреймворк может помочь вам создавать впечатляющие мобильные приложения. Он идеально подходит для создания проектов кросс-платформенных мобильных приложений. Фреймворк имеет широкий наборо плагинов, которые минимизируют количество времени, необходимое для создания приложения. Вам нужен только этот единственный фреймворк, и приложения, которые вы будете создавать, смогут работать на различных устройствах, операционных системах и платформах. jQuery Mobile также поставляется с ThemeRoller, являющимся уникальной функцией, которую вы не найдете в других фреймворках. Она поможет вам создавать приложения, которые будут единственные в своем роде.
Легкий мобильный фреймворк, который основан на HTML5 и CSS3. Он пользуется популярностью из-за своих хороших стилей по умолчанию, которые вы можете использовать в качестве отправной точки для разработки мобильного приложения. Фреймворк также поставляется с несколькими JavaScript API для управления вашим приложением. Lungo создает приложения, которые могут работать на различных платформах, таких как BlackBerry, iOS, Android и Firefox OS.
Отличный фреймворк от весьма авторитетной компании Adobe. Он является идеальным выбором при создании гибридных мобильных приложений с помощью JavaScript, CSS и HTML. Фреймворк предлагает множество программных решений для дизайнеров, такие как InDesign, Photoshop, Illustrator и другие. Одной из его сильных сторон является возможность создавать высокопроизводительные приложения, которые могут хорошо работать на различных устройствах. Adobe PhoneGap имеет множество плагинов, которые обеспечат более легкое создание простых, а также сложных мобильных приложений.
Впервые этот фреймворк был использован Twitter, чтобы помочь им создать свой прототип мобильного приложения, а затем он был выпущен как бесплатный проект. Фреймворк предоставляет набор пользовательских интерфейсов и плагинов JavaScript, которые помогают в создании простых мобильных приложений. Ratchet также обеспечивает классы HTML для повторного использования.
Хороший фреймворк, чтобы использовать, если вы хотите создавать HTML5-приложения легко и быстро. Лучше всего, конечно, его рассматривать при создании сложных приложений, так как в нем имеются все необходимые решения, чтобы сделать процесс разработки намного проще. Он поставляется с отличными функциями на выбор, которые включают в себя плагины и ведущие в отрасли инструменты. Лучше всего его использовать при создании и монетизации игр. Фреймворк предлагает поддержку или сторонние плагины, которые могут значительно уменьшить количество времени, необходимое для создания высококачественных приложений.
Еще один великолепный фреймворк, который работает на HTML5 и CSS3. Он обеспечивает анимацию, API и компоненты, которые являются совместимыми с текущими браузерами и мобильными платформами. Фреймворк предлагает поддержку для Cordova и PhoneGap. Благодаря этой поддержке, вы можете создавать свои приложения, а затем поставлять его в магазин приложений соответствующей платформы. Он также предлагает набор тем для iOS, Windows Phone, Blackberry, Android, Tizen и других платформ, поэтому приложения будут всегда чувствовать себя в своей родной среде.
Фреймворки формируют основу вашего будущего приложения, таким образом, их правильный выбор для использования должен быть тщательно оценен. Одна вещь, которую вы должны отметить - фреймворки бывают разные, и вам нужно время, чтобы изучить их различные API для того, чтобы сделать лучший выбор для приложения, которое вы создаете. Отличным атрибутом этих фреймворков является то, что они способны справиться с широким спектром проблем, которые могут возникнуть при разработке мобильных приложений, что сделает вашу работу намного легче.
Objective C, Swift или JavaScriptСкажу прямо, ваш покорный слуга тащится от многих продуктов яблочной компании, но в этот список Objective-C не входит. У меня было несколько попыток с ним подружиться, но дружба как-то не пошла. Не знаю, не нравятся мне он и все. Релиз Swift можно сказать исправил ситуацию, но пока он в стадии активной разработки и шлифовки. Применять его в реальных проектах не сильно хочется.
Поразмышляв о плюсах и минусах всех доступных технологий разработки под iOS, я решил остановиться на своем любимом JavaScript. Если нет жизненной необходимости в нативных фишках Objective C, а за плечами имеется опыт разработки на JavaScript, то почему бы не начать покорение мобильных платформы именно с него?
Тем более нередко возникают одноразовые проекты (без дальнейшей поддержки) и ради них в серьез изучать Objective-C попросту нет. Как минимум это дорого и долго. Однажды мне выпал проект разработки приложения для корпоративного интернет-магазина. Задача по факту одноразовая – упрощаем покупателям жизнь и отправляем приложение в свободное плавание.
В таких случаях хочется быстрей решить задачу с минимальными затратами. "Серебряной пулей" на этом поприще давно зарекомендовала себя проект PhoneGap . Он генерирует каркас будущего приложения и приравнивает процесс создания мобильного приложения к типовому сайту. Вот и получается, что при наличии средних знаний HTML/CSS/JS вполне себе реально собрать приличное приложение.
Платформа PhoneGap предоставляет все необходимое для создания приложений, но дизайнерские тонкости оставляет на наше усмотрение. Грубо говоря, вот так просто взять и собрать приложение с приближенным к нативному исполнению интерфейсу – не получится. Без привлечения дополнительных технологий тут не обойтись.
«Бутстрап» для мобильных платформСовременные веб-разработчики однозначно наслышаны о мощи и неуклюжести фреймворка Bootstrap. Он позволяет творить «чудеса» и за считанные минуты создавать прототипы современных веб-приложений. Framework7 – это своего рода bootstrap , но нацеленный на мобильные платформы. Как и подобает хорошему фреймворку, в F7 собраны всевозможные виджеты, компоненты, позволяющие создать приложение, максимально похожее на нативное.
Изначально F7 специализировался сугубо на платформе iOS. Стандартная тема оформления была ориентирована на iOS 7 и по сравнению с конкурентами выделялась производительностью интерфейса. Совсем недавно, разработчики анонсировали поддержку Material дизайна от Google, тем самым добавив в список поддерживаемых платформ Android.
Разработчики проекта постарались навести под капотом порядок и оставить только действительно необходимые вещи. В итоге, привычных вещей вроде встроенной библиотеки jQuery , в F7 не найти. Вместо нее доступна легковесная Dom7 , обладающая большинством необходимых возможностей.
Резюмируем F7 – это JS/CSS фреймворк со всеми необходимыми UI элементами , выполненными в нативном для мобильной платформы стилем. Скажу честно, подобные фреймворки уже светились на GitHib, но F7 выгодно отличается от многих: производительностью и реализацией многих нативных UX фишек. Например, такие привычные для iOS пользователи как Pull To Refresh (потяни для обновления), Swipe, back-bar и многие другие доступны из коробки и не требуют дополнительного программирования.
На этом сильные стороны F7 не ограничиваются. Не буду вдаваться в подробности, а лишь немного поделюсь личными впечатлениями. Начну с наиболее важного для меня атрибута качественного проекта – документации. Ожидать появление книг по таким скороспелым вещам бессмысленно – пока их будут писать, фреймворк наверняка обновиться и текст потеряет актуальность. Вся надежда в таких проектах на документацию. Чем она подробней и лучше представлена – тем лучше. В F7 с этим полный порядок. Как мне показалось, документирована большая часть проекта, а там, где не хватило текста, разработчики привели примеры кода.
О потрясающей производительности я уже упомянул. Достигается она в первую очередь за счет жесткой диеты и использованию актуальных современных возможностей JavaScript . Что касается замены jQuery на Dom7, то переживать не стоит. Основные методы в ней реализованы точно также. Название однотипных методов, порядок параметров – полностью сохранены. Следовательно, проблем с привыканием не возникнет.
На официальном сайте проекта представлены различные графики, подтверждающие производительность F7, но не особо в них разбирался, т.к. больше доверяю своему восприятию. После разработки первого реального проекта, время отклика интерфейса я проверил самостоятельно. На последних моделях iPhone (5, 5S, 6) оно выше всяческих похвал. Все работает вполне естественно и привычно.
Из других приятных плюшек для себя я отметил применение языка LESS для описания стилей. При разработке веб-приложений с этой технологией приходится сталкиваться постоянно, поэтому чертовки приятно, что полученные навыки можно смело использовать на мобильных платформах.
Пробуем на практикеТехнологии регулярно сменяют друг друга, но одно остается неизменным, лучший способ познакомиться с ними остается - практика. Для демонстрации работы F7, я решил написать полезное приложение, которое обязательно пригодится всем нашим читателем – читалка новостей с сайта любимого журнала. Поскольку в текущей реализации у нашего сайта нет полноценного API для получения материалов, мы воспользуемся старым добрым протоколом RSS (http://xakep.ru/rss).
Создать читалку на стэке HTML/CSS/JS/F7/PhoneGap достаточно просто. Учитывая, что для работы с RSS уже создан достаточно функциональный плагин. В остальном работа сведется к написанию нескольких десятков строк тухлого HTML. Это достаточно скучно, поэтому я взял на себя смелость добавить немного рок-н-ролла. Пример останется тем же, но писать мы его будем в MVC стиле. В итоге мы получим своеобразный микро-фреймворк с прицелом на будущее. Говоря другими словами, мы создадим универсальный каркас для последующей разработки хорошо расширяемых приложений.
Резюмируя перечисленные выше мысли, получаем примерно такой план действий. Первым делом готовим основу для проекта с помощью актуального стека технологий, затем создаем средствами F7 интерфейс приложения и на заключительном шаге заливаем эту ядовитую смесь в PhoneGap. Приложение будем ориентировать на iOS, нюансы разработки под Android оставлю тебе в качестве домашнего задания.
Есть несколько способов организации MVC паттерна в JavaScript , но мы воспользуемся вариантом от Philip Shurpik. Он достаточно простой и его уже успел опробовать (с некоторыми доработками) в своих реальных проектах. Что касается дополнительных компонент/библиотек, то помимо F7 нам потребуются:
Все возможности перечисленных компонент мы рассмотреть не сможем, да и в рамках нашего примера можно было обойтись меньшей кровью. Напомню, наша цель не только познакомиться с фреймворком F7, но и получить каркас приложения для дальнейших испытаний.
Структура приложенияФункционал нашего приложения предельно прост – подтягиваем обновленную RSS ленту и предоставляем пользователю возможность комфортного чтения. Комфорт немыслим, если загружать полные текст новости, поэтому будем придерживаться минимализма. Сначала отображаем заголовки, а полную версию текста пользователь сможет прочитать после тапа по нему.
Отлично, организационные моменты решили, осталось спроектировать структуру будущего приложения. Вариантов как всегда несколько, но я сразу ориентируюсь, что законченное веб-приложение будем скармливать PhoneGap, поэтому наиболее оптимальным вариантом будет:
В корневой директории проекта разместятся всего лишь два файлика - app.js и index.html . Первый файл будет стартовой точкой приложения. В нем выполним конфигурирование вспомогательных библиотек и проинициализируем F7.
Готовим каркасЗагружаем перечисленные библиотеки (bower, git) и распихиваем их по соответствующим директориям. Затем в корне проекта создаем файлик app.js и выполняем конфигурирование дополнительных компонент.
Конфигурация для require.js описана в первом листинге. Здесь мы подключаем дополнительные библиотеки. Поскольку handlebars не оформлен в AMD стиле, подключение выполняется через shim. В принципе, плагин для чтения RSS мы могли бы подключить точно таким способом, но поскольку наше приложение и так не может без него существовать, то его инициализацию будем делать по старинке, через стартовый файл index.html.
Разработка демонстрационного приложения подразумевает постоянное внесение всевозможных правок и исправлений, поэтому сразу ограничим аппетиты кэширования require.js. Отдельного параметра для этого не существует, но получить необходимый эффект можно с помощью свойства urlArgs.
Принцип прост - к каждому url добавляемый указанный в свойстве аргумент с определенным значением. Чтобы избавиться от кэширования, для аргумента необходимо подбирать уникальное значение. Каждый решает эту задачу по своему, но для уникальности получаю текущее время:
UrlArgs: "fake=" + (new Date()).getTime()
Листинг 2. Модуль app define("app", ["js/router"], function(Router){ Router.init(); var f7 = new Framework7(); var mainView = f7.addView(".view-main", { dynamicNavbar: true }); return { f7: f7, mainView: mainView, router: Router, }; });Во втором листинге приведен код модуля “app”. В нем мы выполняем инициализацию систему маршрутизации (router.js) и самого фреймворка. Описываем все виде AMD модуля. Для объявления модуля применяется метод define(). В первом параметре передаем название модуля, во втором перечисляем зависимости, а третьим описываем тело модуля. Подробности смотри в документации к require.js.
Тело модуля начинается с инициализации модуля маршрутизации (см. файл js/router.js). Роутер будет разруливать маршруты и запускать соответствующий метод контроллера. Сам роутинг реализуется достаточно просто (см. листинг 3): на входе получаем имя контроллера и пытаемся вызвать его заранее определенный метод init(). Путь к контроллеру (файлу) определить не сложно - на этапе обсуждения структуры приложения мы договорились сохранять их в папке js/имяКонтроллера/имяController.js.
Листинг 3. Роутинг function load(controllerName, query) { require(["js/" + controllerName + "/"+ controllerName + "Controller"], function(controller) { controller.init(query); }); }Закончив с роутингом, приступаем к инициализации Framework7. В самом простом случаем достаточно создать экземпляр объекта Framework7 () и радоваться жизни. Для нашего примера этого хватит, а вообще при конструктор принимает объект с настройками. Их достаточно много и все они подробно описаны в документации . Наиболее заслуживают внимания: fastClicks, cache, cacheDuration, material).
Дальше происходит инициализация области представления. В контексте F7, под областью представления (View), подразумевается отдельная визуальная часть приложения. Каждая область представления характеризуется собственными настройками, навигационной панелью и рядом других элементов.
Инициализировать требуется только те области представления, которым требуется навигация. В нашем случае это.main-view. Сама инициализация сводится к вызову метода addView(). Он просит от нас два параметра: селектор области представления и объект с параметрами.
Покоряем RSSУ нас все готово для разработки интерфейса приложения. Основную его часть опишем в файле index.html, расположенном в корне проекта (обязательно его создай). Текст разметки (html код) размашистый, поэтому копировать сюда его не стану, а направлю тебя на в раздел документации Basic App Layout . Смело бери оттуда весь исходник HTML, копируй подготовленный файл и приготовься внести несколько правок. Начнем с секции подключения сценариев. Приводим ее до следующего вида:
Нам обязательно требуется подключить сам фреймворк и плагин Feeds (для работы с RSS). В самом конце инклудим библиотеку require.js. Далее немного скролим текст и находим блок:
В эту область будем выводить содержимое определенных представлений. У нас планируется одно единственное представление, поэтому не будем заморачиваться и легким движением руки добавим поддержку функционала “Потяни и обнови”. Для этого прописываем в блок дополнительный класс pull-to-refresh-content и получаем примерно следующее:
Следующим шагом подключим дополнительные стили в шапку (framework7.feeds.min.css ) и приступим к созданию контроллера. Я не стал акцентировать внимание на изменение заголовка приложения, добавление вспомогательного текста – всю эту косметику ты сможешь сделать самостоятельно.
Приемы в стиле MVCНашему проекту потребуется один единственный контроллер, назовем его index и подготовим отдельную директорию в папке /js. Сразу в ней создавай несколько файликов:
Модель нам не потребуется, но для примера в корне директории js создан пустой файл-заглушка feedModel.js. При необходимости описываем в нем модель и получаем к ней доступ из контроллера.
Посмотрим на содержимое контроллера (Листинг 4). Первое, что бросается в глаза - формат объявления. Наш контроллер это не что иное, как обычный модуль с одним методом init, получающий порцию зависимостей.
После запроса индексной страницы будет вызван метод init контроллера. Дальше все зависит от задачи. Можем получить какие-нибудь данные и передать их в представление, можем что-то обработать и т.д. В нашем все ограничивается формированием представления. Для этого вызываем метод render(). Передавать данные из контроллера в представление можно через его единственный параметр. Нам передавать ничего не требуется, поэтому просто передадим объект заглушку.
Сформировав представление, DOM будет пополнен новыми узлами и мы можем сделать с ними что-нибудь полезное. Например, выполнить инициализацию плагина Feeds. Для этого определим селектор для вывода и объект с настройками. Из настроек необходим
Путь к rss ленте и способ отображения (на странице, в окне). Подробности смотри в четвертом листинге.
Листинг 4. Код контроллера define(["app","js/index/indexView", "js/feedModel"], function(app, IndexView, Index) { function init(query) { IndexView.render({ model: { message: "test"} }); var myFeed = app.f7.feeds(".feed", { url: "http://localhost/feed.xml", openIn: "page" }); } return { init: init }; });Код представления приведен в пятом листинге. По организации кода все похоже на контроллер. Тот же модуль и одна единственная функция. Обрати внимание на использование переменной $. Это не библиотека jQuery, а Dom7. Многие их методы идентичны, но в Dom7 есть далеко не все, поэтому будь внимательней.
Листинг 5. Код представления define(["js/feedModel", "hbs!js/index/index"], function(Index, viewTemplate) { var $ = Dom7; function render(params) { $(".page-content").html(viewTemplate({ model: params.model })); } return { render: render } }); Листинг 6. Содержимое представление Список новостей с xakep.ruДанные для вывода мы будем получать из RSS ленты, поэтому шаблон представления, содержит стандартный html. Стоит обратить внимание на добавление функционала pull to refresh (потяни и обнови). Ранее мы добавили соответствующий класс в index.html, а в представлении лишь завершили начатое. Код для запроса обновленной ленты писать не требуется, т.к. плагин RSS-Feed из коробки поддерживает функционал Pull To Refresh.
На этом разработка приложения завершена. Можешь протестировать его с помощью локального веб-сервера (например, входящий в состав gulp).
Подготавливаем PhoneGapВеб-приложение готово и теперь остается только собрать его с помощью платформы PhoneGap. Для установки PhoneGap нам потребуется установленный в системе node.js. Если ты не отстаешь от современных трендов, то наверняка нода уже установлена в твоей системе. Если нет, то беги на официальный сайт и следуй инструкциям.
$ sudo nmp install -g phonegap
Отлично, но одного PhoneGap недостаточно. Без инструментов Cordova Command Line тоже не обойтись:
$ sudo npm install -g cordova
Из других вспомогательных тулза для автоматизации процесса сборки – Ant. Установить Ant можно несколькими способами. Проще всего этого сделать с помощью менеджера пакетов. Для OS X их несколько, но у меня прижился HomeBrew (http://brew.sh/). Работает стабильно и содержит большое количество пакетов. Установить HomeBrew достаточно просто. Набираем в терминале команду:
Ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Сразу после завершения установки приступаем за Ant:
$ brew update $ brew install ant
Следующим шагом будет установка XCode. Набираемся терпения и устанавливаем актуальную версию из AppStore. После установки обязательно запускаем его и принимаем лицензионное соглашение. Если этого не сделать, то PhoneGap не сможет собрать проект.
Собираем мобильное приложениеНе отходим далеко от консоли и создадим новый проект мобильного приложения. Вводим в консоле:
$ phonegap create xakepRssReader $ cd xakepRssReader
Отлично, базовая заготовка готова – можно приступать к переносу нашего веб-приложения. Перейди в директорию www и удали из нее все содержимое. Затем скопируй в нее все файлы и папки созданного нами приложения. В результате весь наш проект должен разместить в папке www. Возвращайся в консоль и приступай к сборке. Сначала определим мобильную платформу для сборки (в нашем случае iOS), а затем запустим деплой проекта:
$ cordova platform add ios $ cordova build ios
При отсутствии ошибок в консоль будет выведена надпись “Build Succeeded”. Остается только открыть из директории platforms/js файл xakepRssReader.xcodeprof в XCode и запустить процесс сборки (нажимаем кнопку Play). Если все пройдет успешно (а должно быть именно так), то через несколько секунд запустится окно эмулятора (в моем случае iPhone 6).
Собрать мобильное приложение при помощи знакомого каждому веб-программисту стеку технологий на практике оказалось не так уж и сложно. Если посмотреть в AppStore, то большинство корпоративных приложений – не что иное как трансляция определенного контента/сервиса с официального сайта компании. Можно ли создавать подобные вещи не прибегая к нативным технологиям? Определенно, да.
Разработчики видят перспективы веба в мобильной среде и стараются перенести в нее как можно больше трендовых технологий. Фрейворки вроде рассмотренного в сегодняшней статье, лишний раз подтверждают – невозможного не существует. Производительность мобильных устройств продолжает расти и этот факт только подстегивает переносу привычных технологий в новую среду.
Безусловно, не стоит питать излишних иллюзий и отказываться от изучения нативных технологий (Objective C, Swift). Если ты серьезно настроен на разработку под мобильные платформы, то обойтись одними веб-технологиями скорей всего не удастся. Во всяком случае на текущем временном этапе. Но если твоя цель «попрактиковаться» и неплохо подзаработать на типовых проектах, то веб-технологии определенно смогут помочь.
На этом у меня все. Удачной мобильной разработки!
Плюсы PhoneGapГибридное приложение сочетает в себе элементы как нативных (родных), так и веб-приложений. Разработка нативных приложений делается для конкретной платформы и устанавливается на цифровом устройстве. При создании мобильных приложений, в рамках HTML5 предоставляется несколько альтернатив, которые имеют свою собственную динамику и функциональные возможности.
Эта структура также является полезной для оформления внутреннего и внешнего вида приложения, когда приложение будет готово оно будет работать с помощью HTML, JavaScript и CSS.
Итак, почему гибридные приложения так популярны? Это связано с легкостью и простотой написания приложений разработчиками, и возможностью их дальнейшей работы на любой платформе.
Создание гибридных мобильных приложений
Ниже предоставлена группа Фреймворков HTML5 для удобства программирования и проектирования:
Sencha Touch является ведущим MVC JavaScript Фреймворком для создания кроссплатформенных мобильных приложений, которая облегчает процесс разработки веб-приложений с использованием HTML5 и javascript. В состав этой платформы входит широкий спектр продуктов, которые работают сразу «с места в карьер». Sencha Touch использует методы аппаратного ускорения для обеспечения высокой производительности компонентов пользовательского интерфейса для мобильных устройств.
С более чем 50 встроенных компонентов пользовательского интерфейса и просмотром темы для всех основных мобильных платформ, Sencha Touch обеспечивает все необходимое для создания впечатляющих приложений, которые работают на iOS, Android, BlackBerry, Windows Phone, и многих других. Адаптивная верстка, плавная анимация и плавная прокрутка позволяют разработчикам создавать приложения, которые реагируют на действия пользователя, почти мгновенно, подобно нативным технологиям.
Структура включает в себя надежный пакет данных, который может получать данные от любого серверного источника данных. Расширенный пакет диаграмм позволяет визуализировать данные на мобильных устройствах. Нативно выглядящие темы для каждой крупной платформы позволят вам создавать гибридные и веб-приложения в соответствии с внешним видом ваших целевых платформ.
Свободный и открытый исходный код Ionic предлагает библиотеку мобильных-оптимизированных HTML, CSS и JS компонентов и инструментов для создания интерактивной родной и прогрессивных веб-приложений. Ionic, который поставляется с набором эксклюзивных функций, можно назвать пионером в области разработки гибридных мобильных приложений.
Понятная, простая и функциональная платформа Ionic была разработана, чтобы работать и красиво отображаться на всех современных мобильных устройствах и платформах. С готовыми мобильными компонентами и великолепной базовой темой, которая адаптируется к каждой платформе.
Telerik Kendo UI является расширением HTML5 Фреймворка, выступает в качестве одной из лучших платформ для разработчиков, которые хотят создавать кросс-платформенные мобильные приложения. Эти Фреймворки во многом зависят от JQuery и включают в себя ряд виджетов на основе JQuery. JavaScript Фреймворк также доступен в этом открытом Фреймворке и в этом его отличительная особенность.
Любители Angular (Angular - Фреймворк с открытым исходным кодом) и bootstrap (Bootstrap - это свободный набор инструментов для создания сайтов и веб-приложений) могут пользоваться мобильным Angular UI, так же, они получают возможность добавлять, как Bootstrap 3, так и Angular платформу для создания HTML5. Основное расширение Bootstrap 3 очень похоже на Angular; тем не менее, оно не имеет зависимость от JS, Bootstrap или JQuery. Мобильный Angular UI использует overthrow.js и fastclick.js для получения мобильного опыты для всех тех, кто его использует.
Intel XDK для поставляется с полным набором инструментов, используемых для разработки, тестирования и эмуляции, отладки и публикации кроссплатформенных гибридных приложений на HTML5. Это тоже Фреймворк с открытым исходным кодом поддерживаемый корпорацией Intel. Темы, предоставляемые этим Фреймворком, поддерживают Android, Windows, Blackberry и т.д.
Onsen UI является относительно новым Фреймворком; однако, он дает вызов существующим тяжелым платформам, особенно для Ionic. Это платформа с открытым исходным кодом предоставляется под лицензией Apache. Для большинства составляющих его пользовательского интерфейса, используются Angular директивы и Фреймворки верхнего уровня.
M Project, мобильный HTML5 JavaScript Фреймворк, используется для построения кросс мобильных веб-приложений, установленных на Backbone.js. Легко интегрируется с PhoneGap, чтобы помочь в создании приложения, является одним из его основных характеристик. Этот простой Фреймворк используется для быстрой разработки приложений.
По сути это мобильное HTML-приложение с открытым исходным кодом, Jo легко интегрируется с PhoneGap и Cordova для разработки приложений. Может свободно использовать Фреймворк с открытым исходным кодом, также может помочь изменить внешний вид приложения с помощью CSS.
