Статьи

JQuery становится мобильным

Первая версия библиотеки jQuery Mobile была выпущена чуть более недели назад. Учитывая популярность библиотеки jQuery для традиционной настольной веб-разработки, я ожидаю, что большинство веб-разработчиков будут очень рады этому выпуску. Но что такое jQuery Mobile, и в каких случаях вы бы хотели использовать его?

Что в имени?

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

Хорошо, так что там?

jQuery Mobile — это по сути фреймворк для работы со страницами. Эти «страницы» могут быть целыми файлами HTML, внешними страницами или даже разделами в одном файле HTML. Затем библиотека заботится о связывании их через Ajax, используя некоторые эффекты перехода. На страницах jQuery Mobile предоставляет вам множество последовательно стилизованных компонентов интерфейса: панели инструментов, кнопки, все мыслимые виды списков и элементы управления формой. Посетите страницу « Документы и демонстрации», чтобы ознакомиться со всем, что включено.

Прогрессивное улучшение, детка

jQuery Mobile использует интересный и новый подход к фреймворку: вся работа, которую вам нужно сделать, чтобы использовать его, будет выполняться в вашей разметке. Большинство компонентов интерфейса могут быть активированы и запущены без написания ни одной строки JavaScript. Это стало возможным благодаря атрибутам данных HTML5 . Так, например, чтобы использовать компонент слайдера, все, что вам нужно сделать, это поместить в разметку следующее:

<div data-role="fieldcontain">  <label for="slider">Input slider:</label>  <input type="range" name="slider" id="slider" value="0" min="0" max="100"  /></div>

Эти атрибуты data-

Управление слайдером в jQuery Mobile

JQuery Mobile использует аналогичный прогрессивный подход ко всему, что он делает. Идея заключается в том, что браузеры, которые не распознают тип документа HTML5 или атрибуты data- Во всяком случае, это теория.

Мы говорили, что это был альфа-релиз, верно?

Прямо сейчас фреймворк все еще очень глючит. Мне не удалось заставить простую внешнюю ссылку работать в моем настольном браузере (Firefox 4), и ни одна из ссылок вообще не работала на моем устройстве Android 2.1, если бы я прокручивал страницу, прежде чем нажимать на них. Учитывая, что одной из ключевых задач библиотеки является обеспечение приемлемого, но ухудшенного опыта на любой платформе, которую она не поддерживает в полной мере, такого рода поломки в предположительно браузерах класса А вызывают некоторое беспокойство. Более того, я провел несколько тестов на iPhone коллеги, и производительность была далека от идеальной: прокрутка была намного более грубой, чем на обычной веб-странице, переходы и анимации были немного прерывистыми, а некоторые ссылки не работали надежно.

Собираетесь родные?

Хотя jQuery Mobile, безусловно, является впечатляющим усилием, я не могу не чувствовать, что его применимость будет довольно узкой. Большинство мобильных веб-приложений будут работать лучше без него, полагаясь на браузер для большей части их функциональности, а приложения на iOS будут работать лучше и выглядеть более естественными, если они на самом деле являются родными. Основываясь на дизайнерских решениях, таких как включение кнопки «Назад» в верхней части каждой страницы по умолчанию, я предполагаю, что основной целью проекта является разработка приложений для возможного нативного развертывания. Если бы он был предназначен для веб-приложений, то, конечно, было бы лучше положиться на кнопку «Назад» браузера (или устройства), верно? Если вы хотите разрабатывать приложения для iOS, которые также переносятся на другие платформы, с использованием такой инфраструктуры, как PhoneGap, а затем jQuery Mobile может стать интересным решением после устранения недостатков. Это если вы согласны с тем, что вашим пользователям, не работающим с iOS, предоставляется интерфейс, который по сути создан для имитации поведения iOS по умолчанию. Однако, если вы намереваетесь запустить приложение в браузере, мне кажется, что jQuery Mobile дает вам Множество ненужных эффектов соударения, и может оказать негативное влияние на опыт некоторых ваших пользователей. Нет ничего плохого в ссылке, которая открывает новую страницу при нажатии; это то, чего ожидают ваши пользователи. Добавление скользящей (или всплывающей, или затухающей) нагрузки Ajax — просто ради «ощущения себя родным» — кажется немного неправильным. То же самое касается замены встроенных элементов управления формы браузера пользовательскими версиями JavaScripted; большинству пользователей будет удобнее использовать элементы управления формы, предоставляемые их ОС или браузером. Почему вашему веб-приложению необходим тумблер в стиле iOS, когда вы можете просто использовать флажок и сэкономить на загрузке всего этого JavaScript? (Конечно, я верю, что есть использование пользовательских элементов управления формы, не реализованных в текущих версиях большинства веб-браузеров, как, например, слайдер выше.) Но, возможно, это только я. Если вы уже играли с jQuery Mobile, что вы думаете?

примечание: хотите больше?

Если вы хотите узнать больше от Луи, подпишитесь на нашу еженедельную техническую новостную рассылку Tech Times .