Обзор мультиплатформенных фреймворков — jQuery Mobile (1/6)

Опубликовано автором

Предположим, что в один прекрасный день к Вам подходит начальник и говорит, что-то типа: ‘Мы всю жизнь делали десктопные приложения и совсем не представлены на мобильном рынке. Давай ка ты Вася сделай нам прототип нашего бизнес решения на мобильную платформу’. И Вы, как человек подневольный, беретесь за дело.

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

Для мультиплатформенной разработки необходимо использовать фреймворки.  Сразу стоит оговориться: При написании приложения не на родном для платформы SDK встает вопрос о сборке приложения. Т.е. написав приложение на JS не получится просто взять и собрать из него к примеру apk. Для этого используются сторонние средства, например PhoneGap(который по сути так же является фреймворком), если конечно фреймворк сам не предоставляет средства сборки. Так же есть возможность дружить между собой фреймворки или по крайней мере использовать их средства разработки.

На первый взгляд можно выделить несколько интересных фреймворков(каждый из описанных фреймворков имеет явные отличия от других):

1) jQuery Mobile

JQuery лого

jQuery Mobile — это каркас, построенный на основе библиотеки jQuery и предназначенный для создания Web-интерфейсов, ориентированных на использование в мобильных устройствах. В настоящее время он обеспечивает совместимость со всеми распространенными мобильными платформами и поддерживает знакомый разработчикам jQuery синтаксис. Принцип работы jQuery Mobile можно описать следующим образом: этот каркас, используя стандартные HTML-элементы, расширенные с помощью дополнительных атрибутов, создает элементы соответствующие стилю и требованиям мобильных интерфейсов. Т.е. другими словами все UI вашего приложения описывается как html веб документ с разными модификаторами , а логика обработки ситуаций пишется  на JS.

К достоинствам jQuery Mobile можно отнести:

  • бесплатный
  • Присутствует визуальная среда разработки облегчающая работу: Codiqa
  • короткую «кривую обучения» и легкость использования;
  • небольшой размер (12 Кб в сжатом виде);
  • поддержка широкого ряда мобильных (и немобильных) Web-браузеров;
  • поддержка HTML5;
  • расширенная поддержка HTML-форм;
  • изменение внешнего вида документа (стили);
  • открытый исходный код.

Тем самым проект будет представлять из себя связку HTML5 + CSS + jQuery , где в HTML будет описана вся  GUI часть , а в jQuery будет вся логика работы. Из этого следует легкость и быстрота разработки GUI части, а так же ее стабильная работа, на что как раз и тратится основное времея при разработке.

По сути каркас для начала работы следующий :

<!DOCTYPE html>
<html>
        <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                    <h1>Page Title</h1>
            </div><!-- /header -->
            <div data-role="content">  
                    <p>Page content goes here.</p>     
            </div><!-- /content -->
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /header -->
        </div><!-- /page -->
    </body>
</html>

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

К примеру если мы хотим добавить элемент поиска — нам просто нужно прописать в html:

<div data-role="fieldcontain">
    <label for="search">Search Input:</label>
    <input type="search" name="password" id="search" value="" />
</div>

и в итоге мы увидим:

После чего на элемент вешаются слушатели.

Все позиционирование и стили отрисовки описываются в CSS , а логика обработки результата в JS.

Пример интерфейса, разработанного на JQuery Mobile:

Так же присутствует интеграция с библиотекой PhoneGap позволяющей нам работать с API нашего устройства — т.е. обращаться к камере , gps, акселерометру , списку контактов , отправке смс , звонкам и еще много к чему, а так же собирать наше приложение для всех платформ.

Основные минусы:

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

Продолжение:
Обзор мультиплатформенных фреймворков — MGWT + PHONEGAP (2/6)
Обзор мультиплатформенных фреймворков — Sencha Touch (3/6)
Обзор мультиплатформенных фреймворков — Appcelerator Titanium Mobile (4/6)
Обзор мультиплатформенных фреймворков — Vaadin TouchKit (5/6)
Обзор мультиплатформенных фреймворков — IBM WorkLight (6/6)

Добавить комментарий