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

 

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.

Создать читалку на стеке HTML/CSS/JS/F7/PhoneGap не слишком сложно, поскольку для работы с RSS уже создан достаточно функциональный плагин. В остальном работа сведется к написанию нескольких десятков строк тухлого HTML. Это довольно скучно, поэтому я взял на себя смелость добавить немного рок-н-ролла. Пример останется тем же, но писать мы его будем в MVC-стиле. В итоге мы получим своеобразный микрофреймворк с прицелом на будущее. Говоря другими словами, мы создадим универсальный каркас для последующей разработки хорошо расширяемых приложений.

Резюмируя перечисленные выше мысли, получаем примерно такой план действий.

Продолжение доступно только подписчикам

Вариант 1. Оформи подписку на «Хакер», чтобы читать все материалы на сайте

Подписка позволит тебе в течение указанного срока читать ВСЕ платные материалы сайта. Мы принимаем оплату банковскими картами, электронными деньгами и переводами со счетов мобильных операторов. Подробнее о подписке

Вариант 2. Купи один материал

Заинтересовала информация, но нет возможности оплатить подписку? Тогда этот вариант для тебя! Обрати внимание: этот способ покупки доступен только для материалов, опубликованных более двух месяцев назад.


2 комментария

  1. apt_get_vera

    21.10.2015 at 13:25

    Почему бы не воспользоваться Intel XDK, вместо PhoneGap?

  2. Дмитрий Юнушкин

    02.11.2015 at 21:42

    Возможно я задам глупый вопрос, но мне хотелось бы узнать. Вот я на Си писал под микроконтроллеры, взялся писать программу для настройки датчиков на периметре под Android с использованием Android Studio и Java. Можно как-нибудь с HTML или JS добраться до Bluetooth и вообще до железа? А то я пробовал PhoneGap, Cordovу и что-то они все обваливал, причем это были приложения-примеры. И в чем основная прелесть JS/HTML фреймворков? Получается нативные разработчики не нужны?)

Оставить мнение

Check Also

Кавычкой по «Джумле». Учимся проводить SQL-инъекцию второго порядка на примере уязвимости в Joomla

Joomla — вторая по популярности система управления сайтами после WordPress. Уязвимость, о …