Pull to refresh

Введение в Sencha Touch 1.0

Reading time 6 min
Views 8.9K

Предисловие



Sencha Touch (ST) – библиотека для разработки веб-сайтов и веб-сервисов, ориентированная на iPhone, iPad и Android. Разработана она компанией Sencha, Inc – известным поставщиком библиотеки ExtJS для рынка высокотехнологичных браузерных интерфейсов.

Основная цель ST – по мере возможности мимикрировать стандартный интерфейс и поведение элементов интерфейса iOS, предоставив программистам гибкое API.

Ядро библиотеки написанно на JavaScript, CSS3 и html5 (в трактовке WebKit-движков). FireFox 4 и IE 9 отсутствуют в списке поддерживаемых браузеров.

Соответственно, ST-приложение – это обычная клиент-серверная разработка, в качестве клиента выступает браузер Safari или Chrome, а в качестве сервера – любой веб-сервис, способный «отвечать» в форматах JSON, XML и еще нескольких других.



Сферы применения



Да, ST, после некоторых извращений, можно заставить работать и на десктоп-системах (помня про ограничение по браузерам), но все же разработчики создавали библиотеку строго под мобильные «тач» устройства.

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

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

Сложную бизнес-логику на ST строить довольно долго, потому их ниша – это всевозможные «клиенты» к Твиттеру, другим текстовым сервисам.

В уме так же следует держать тот факт, что мобильный интернет далеко не всегда дешев, а ST, несмотря на все ухищрения, все равно довольно большой теленочек, под 370 Кб (не считая графики).

Вторым пунктом, о котором не следует забывать – это ресурсоемкость приложения. В процессе работы библиотека активно работает с DOM-деревом объектов браузера, вследствие чего после продолжительной работы браузер может отъедать существенное количество памяти.

Меры предосторожности



Что следует помнить, приступая к разработке:
• Код библиотеки достаточно сырой, несмотря на номер версии и пестрит различного рода ошибками. В качестве примера можно упомянуть прекрасный билд 1.0, в котором не вызывались обработчики submit формы – то есть нельзя было узнать о результатах отправки формы на сервер. На форуме-то патч выложили довольно оперативно, но послевкусие осталось.
• API в минорных версиях может меняться достаточно сильно, вплоть до объявления компонент как deprecated.
• Если Вы занимаетесь написанием собственных компонент – то обновление версии, скорее всего, приведет к необходимости рефакторинга шаблона элемента.
• Документация неаккуратна. Если поведение реальных элементов отличается от того, что написано на официальном сайте, нужно смотреть внутрь библиотеки. Благо, код там хорошо отформатирован и разобраться в нем можно.
• Регулярно читайте форум. Несмотря на наличие всячески продвигаемой платной подписки большинство проблем решается именно силами комьюнити, а не компанией-разработчиком.

На чем разрабатывать и отлаживаться



Так как ST – библиотека браузерная, то для относительно комфортной разработки сойдет и Google Chrome с его инструментами разработчика. Да, это не FireBug, но все же лучше, чем совсем ничего.

Что бы оценить внешний вид на «родном» устройстве можно вполне использовать «Сафари». Разумеется, для некоторых «фишек» типа автоматической смены ориентации экрана (из горизонтальной в вертикальную и наоборот) придется искать или Макинтош с эмулятром айФона (айПада) или же запускать МакОС в виртуализаторе.

Из плюшек – внешний вид в Сафари на разрешении 1024 х 768 окна браузера в 99% случаев не будет ничем отличаться от того же, только на айПаде.

Знакомство с ядром



Перед разработчиками библиотеки стояло несколько задач:
1. Облегчить переход на новое ядро обширному комьюнити ExtJS
2. Максимально облегчить ядро отрисовки компонент и вообще «удельный вес» библиотеки вцелом, так как монструозный размер «прародителя» и его неторопливость давно стали притчей во языцех.
3. Сохранить простоту API
4. Толково документировать.

Видно, что старались очень сильно: многие концептуальные вещи типа шаблонизатора, работы с данными, вопросы наследования элементов были или серьезно переделаны или вообще написаны «с нуля».

Ядро библиотеки предстает перед разработчиком в виде суперглобального объекта Ext с набором методов для первоначальной инициализации приложения.

Каждый из компонентов является порожденным от более базового, что облегчает понимание и, что более важно – взаимозаменяемость компонент, так как интерфейсы доступа, например, к Хранилищам, унифицированы.

Ядро распадается на несколько множеств классов:
• Data — всяческая работа с данными, хранилища, преобразовании данных и работа с массивами данных, фильтрация, проверка и пр. Авторы попробовали ввести понятие модели данных (из MVC) и правил проверки (валидации), включая связи типа «многие к одному». Польза от этого нововведения довольно сомнительна, так как на стороне сервера все равно нужно будет проводить повторную проверку, но все же.
• Form — элементы интерфейса. Текстовое поле, выпадающий список, календарик, обычный список, переключатели и галочки — все это здесь.
• Layout — Часть ядра, отвечающая за рендеринг элементов в окне браузера. В теории, форма может находится одна на странице или быть частью панели вкладок, элементы могут быть прижаты к верху или низу формы.
• Lib — базовые компоненты ядра.
• Util — всевозможные утилиты и классы, которые не должны вызываться напрямую.

Понятие объекта в ST



Любой компонент библиотеки по факту является Javascript-объектом с набором методов и свойств. Деление на скрытые и публичные методы или свойства является весьма условным и только на уровне документации.

Кроме методов и свойств у большинства объектов есть события, на которые можно развешивать обработчики и шаблон вывода для визуальных элементов.

Событий в мире ST очень много: фактически, каждый чих в этом мире является событием: начиная от создания элемента и добавления его на страницу, его отрисовкой и заканчивая уничтожением.

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

События можно придумывать и свои. В частности, авторы библиотеки эмулировали тач-события, используя яваскрипт-события браузера о кликах и перемещении указателя.

В самом общем случае цикл приложения с использованием ST делится на:
• Первоначальную инициализацию (вызов Ext.setup)
• Ожидание данных с сервера
• Взаимодействие с сервером

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

Написание собственных компонент



Самое страшное и увлекательное занятие – это написание собственных компонент, так как «из коробки» библиотека предоставляет довольно ограниченный их набор, причем часть из них работают не совсем так, как в оригинальной iOS.

Осознавая это, разработчики пошли навстречу и встроили в библиотеку шаблонизатор. Теперь каждый из элементов формы внутри себя несет некий html-шаблон, который и диктует отображение элемента в окне браузера.

Шаблон – это фрагмент обычной html-разметки, в котором специальные маркеры заменяются на атрибуты объекта. Следует отметить, что при рендеринге объекта в шаблон передаются не все возможные его атрибуты, а только жестко заданная программистом их часть.

Так же в шаблоне существует рудиментарная возможность условного рендеринга его части (при выставленном значении атрибута А показать строку Б иначе показать строку В). Есть возможность простых арифметических операций в качестве условия отрисовки.

Хорошим тоном для элемента формы является порождение нового элемента или от Ext.form.Field или же от любого из его потомков.

Таким образом новая компонента будет вести себя ну совсем как «родная».

Работа с данными



«Из коробки» библиотека умеет работать с данными в форматах JSON, YQL и XML. Умеет делать AJAX-запросы на сервер и правильно интерпретировать ответ.

В ST введено понятие Хранилища – то есть совокупности данных, формально объединенных некоторым признаком. Например, таблица в базе данных может послужить аналогом Хранилища, а каждая запись таблицы – экземпляром Модели этого Хранилища.

Хранилища умеют осуществлять фильтрацию, при редактировании записей в нем – отмечать их как «отредактированные» и много других полезных вещей.

Списки, в частности, в качестве источника данных используют именно Хранилища.

Резюме



Sencha Touch – это мощная библиотека для разработки браузерных решений в интерфейсе iOS, с хорошей архитектурной концепцией но сырой реализацией.

Стоит ли она запрошенных разработчиками денег? Решать Вам.
В процессе решения можно, впрочем, для некоммерческих вещей пользоваться версией с открытым исходным кодом.

Что читать и где смотреть


Tags:
Hubs:
+4
Comments 1
Comments Comments 1

Articles