Apps vs. Web

Этот материал является переводом статьи «Apps vs. the Web» Крейга Хокенберри на A List Apart.

Возьмите свой iPhone и посмотрите на экран. Скорее всего вы сразу видите логотипы известных в Сети брендов вроде Facebook, Flickr, и Google. Также на основном экране у вас, возможно, размещены значки компаний, которые занимаются онлайн-торговлей (те же Amazon, Target, и Walmart).

Так же как и вы, эти компании знают как создать эффективный веб-сайт, используя самые новые и продвинутые технологии. Браузер Safari для iPhone поддерживает HTML5 разметку, CSS3 и работает на быстром JavaScript-движке. Так вот вопрос: почему мы, вот хотя бы в этом случае, наблюдаем преимущественно веб-приложения, а не обычные веб-страницы, хотя они могут выполнять, в принципе, те же функции?

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

Apple и стандарты

С точки зрения Apple, у iPhone OS и привычных веб-технологий одна общая основа. Если вы были на сайте Apple для разработчиков, то, должно быть, заметили, насколько удобный и наглядный Safari Dev Center, который может предоставить вам просто тонны отлично представленной информации о том, как использовать HTML, CSS и JavaScript в разработках для iPhone.

Если вы оглянетесь на свой первый опыт работы с iPhone, то вы, наверное, вспомните сразу одно приложение, которое находится как бы «сверху» над всеми другими приложениями: веб-браузер Safari. Благодаря ему, вы просто в один момент оказались избавлены от мобильного Интернета с его ужасной поддержкой CSS и этим дурацким WAP. Реальный браузер для iPhone, который лежит в вашем кармане — это то, что коренным образом изменило характер вашего взаимодействия с Сетью.

Apple продолжает вкладывать значительные средства в развитие браузерного движка WebKit, на котором и работает браузер Safari для iPhone, Mac и Windows. В результате мы имеем браузер с отличной поддержкой CSS3 и HTML5. И здесь нужно отметить, что компания придает большое значение поддержке HTML5 и рассматривает ее как важную часть своего маркетингового сообщения и для потребителей и для разработчиков.

Технологии, на которых основан WebKit, активно используются и для других мобильных платформ, поскольку сам движок написан с открытым исходным кодом. Если вы пользуетесь Интернетом при помощи Blackberry, Android или телефона на платформе Symbian, то вы, наверное, заметили, что привычные сайты выглядят также хорошо как и в iPhone. Единственным препятствием для корректного отображения контента может быть платформа Windows mobile от Microsoft, в которой используется браузер, написанный на основе механизмов декстопного браузера Internet Explorer.

Благодаря отличной поддержке HTML, CSS и JavaScript технологий, разработчики создают для iPhone высококлассные вещи. Вот несколько ярких примеров:

Pie Guy от Невена Мргана (Neven Mrgan)

В Pie Guy (mrgan.tumblr.com/post/257187093/pie-guy) используется HTML5 оффлайновый кэш, благодаря которому приложение продолжает корректно работать даже когда у вас отсутствует соединение с Интернетом. Также для различных эффектов в игре были использованы CSS анимация и трансформация. Невен продолжает отслеживать разработки в этой сфере на сайте html5watch.tumblr.com.

Showtime от Найэла Джакомелли и Бенджамина Гордона (Nial Giacomelli and Benjamin Gordon)

showtime-app.com — простое приложение, которое помогает вам отслеживать, когда идут ваши любимые ТВ-шоу и сериалы. Здесь использован jQuery плагин (jqtouch.com) Дэвида Кэнеда (David Kaneda), собственно, который и обеспечивает реализацию многих элементов управления и эффектов в стандартных приложениях iPhone.

Every Time Zone от Эми Хой и Томаса Фукса (Amy Hoy and Thomas Fuchs)

everytimezone.com — очень простое и в тоже время эффективное приложение, показывающее время по всему миру. Ползунок, при помощи которого и выбирается время, очень хорошо работает на сенсорном экране и в целом это приложение отлично выглядит на дисплее iPad.

При наличии такого широкого круга инструментов и при помощи талантливых разработчиков, которые знают как ими пользоваться, iPhone должен просто переполняться веб-приложениями, правильно ведь? На самом деле все наоборот: в iTunes доступно уже более 100 000 наименований и есть лишь горсточка популярных приложений, созданных в соответствии со стандартами.

Apple продвигала App Store и свой веб-браузер как отличный набор средств для разработчиков, с помощью которых они могут донести свои творения до целевой аудитории. Компания даже сделала целый год отсрочки, прежде чем приложения начнут продаваться в магазине. Очевидно, что это еще не все, что привлекает разработчиков к iTunes в противовес Сети.

Переход к нативному

Прежде чем мы станем разбираться с мотивами, способствующими работе с iTunes, нам нужно определить некоторые ключевые моменты. Сегодня разработчики «делятся» согласно двум iPhone-технологиям разработки, известным как «нативная» («native») и «веб». Веб-приложения используют HTML, CSS и JavaScript — технологии, которые поддерживаются браузером Safari. Все приведенные выше примеры — это примеры веб-приложений.

Нативные приложения создаются в среде разработки Xcode на языке Objective-C. Это те же самые инструменты, которые использовались для создания таких собственных встроенных приложений Apple как Mail, iPod и даже Safari.

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

• Как и JavaScript, язык Objective-C является потомком языка C. В добавок к аналогичному синтаксису, оба языка являются объектно-ориентированными. Если вам нравится работать с JavaScript, то и с Objective-C не должно возникнуть разногласий.
• У нативных и веб-приложений есть несколько общих элементов дизайна. В случае веб-приложений вы привыкли к возможному нарушению функциональности веб-страницы, к необходимости использования элементов <div> для организации контента на странице и использованию XMLHttpRequest для обновления этого контента. С Cocoa Touch «view controllers» используются как страницы,«views» обеспечивают стандартные блоки для контента на странице, а объекты NSURLConnection выступают в роли ссылок в Интернете.
• Фреймворки выполняют большую часть тяжелой работы. Так же, как вы полагаетесь на jQuery или Prototype при работе с JavaScript, вы можете аналогично рассчитывать и на Cocoa Touch, когда работаете с Objective-C. У обоих языков есть свои активные сообщества разработчиков, которые с удовольствием делятся различными хаками и исходным кодом.
• Если вы Flash-разработчик и разочарованы, что нет никакой возможности донести ваши разработки до пользователей iPhone, то, возможно, вы порадуетесь, узнав, что у ActionScript также,как и JavaScript, много общего с языком C. Механизмы создания анимации и других визуальных эффектов на iPhone конечно отличаются, но, в целом, концепция та же. Недавно представленный фреймворк Sparrow (www.sparrow-framework.org/info/philosophy) может существенно облегчить вам переход к новым технологиям, особенно если вы используете Flash для разработки игр. И в целом это также хороший пример вклада ваших коллег-разработчиков под iPhone в развитие технологий.

Чтобы дать вам общее представление о подобных вещах, ознакомьтесь с фрагментом Javascript кода, который приведен ниже:

var beAwesome = true;
var myString = "chocklock";
if (beAwesome) {
	myString = myString.toUpperCase();
}

А теперь тоже самое, только на языке Objective-C:

BOOL beAwesome = YES;
NSString *myString = @"chocklock";
if (beAwesome) {
	myString = [myString uppercaseString];
}

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

Мотивация

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

С одной стороны это эгоистичные мотивы: нативные приложения дают разработчику больше контроля над мобильной средой. А с другой стороны — альтруизм: нативные приложения, как правило, легче в использовании для остального сообщества.

Скорость: за последние несколько лет производительность JаvaScript существенно улучшилась, но, все же, он никогда не сможет работать так же быстро, как и скомпилированный код, работающий непосредственно на процессоре. И это особенно важно в мобильной среде, где с целью сокращения потребления энергии, процессор работает медленнее.

Управление данными: в Cocoa Touch есть несколько механизмов, которые облегчают процесс хранения данных приложения. Наличие таких механизмов важно, поскольку то же кэширование полученной из Сети информации может значительно упростить использование мобильного приложения. Постоянное хранение данных в HTML5 обеспечивает простой доступ к парам ключ/значение (cookies) или «сырой» доступ к базам данных при помощи SQL. Core Data на iPhone создают куда более сложную систему, где управление взаимоотношениями между объектами данных происходит автоматически.

Анимация: одним из отличительных моментов как для веб так и для нативных приложений для iPhone является анимация, которая подкрепляет действия пользователя. CSS3 дает возможность анимировать отдельные элементы страницы, но более сложные эффекты можно реализовать, когда у вас есть доступ к основному Core Animation фреймворку с нативным кодом.

Ресурсы: мобильным разработчикам всегда недостаточно скорости соединения, памяти или мощности процессора. Управление этими ограниченными ресурсами еще усложняется, если в процесс вовлекаются JavaScript и браузер. В случае с нативными приложениями, легче справляться с ситуациями, когда возможен «конфликт интересов» между приложением и техническими возможностями.

Юзабилити: пользователи iPhone чувствуют себя наиболее комфортно, когда используют стандартные средства управления, к которым они привыкли во встроенных приложениях от Apple. HTML элементы управления вроде <input> и <textarea> могут работать в различных средах, а JavaScript фреймворки, например jQTouch, отлично работают и позволяют расширить основные механизмы управления, но даже в таком случае средства управления будут заметно отличаться от нативных аналогов, встроенных в iPhone.

Производительность: при помощи Cocoa Touch разработчику, как правило, легче создавать сложные пользовательские интерфейсы, ведь фреймворк выполняет значительную часть работы сам и позволяет вам сосредоточиться на самом вопросе, а не на проблемах его реализации. В условиях сильно ограниченного экранного пространства в мобильном устройстве, простая форма рабочего стола превращается в многократные представления (multiple views) , и ваше приложение должно управлять видом и положением рабочего стола. В Apple разработали Cocoa Touch специально для решения таких задач.

Интеграция: у iPhone есть достаточно разных возможностей, которые невозможно реализовать в обычном веб-браузере, например: контакты пользователя, фото-библиотека, запись голоса и перемещение устройства (device movement). В iPhone сенсорные платформы Cocoa Touch — это единственный способ получить доступ к подобной информации.

В процессе «взросления» Веба приложения вполне естественно разделились на два основных вида: фронт-энд и бэк-энд. Сервисы бэк-энда управляют данными пользователя и, как правило, работают на основе мощных серверов, а фронт-энд приложения получают эту информацию и представляют ее в браузере при помощи HTML, CSS и JavaScript. Часто фронт-энд — это лишь тонкий слой поверх «глыбы» бэк-энда.

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

На практике

Существует, наверное, столько же разных подходов в разработке приложений, сколько и самих приложений в iTunes. Каждый новый продукт, как, впрочем, и его авторы, чем-то отличается от уже существующих аналогов. Эволюция продукта от веб-приложения до iPhone-приложения обычно происходит так:

• Дизайн продукта. Независимо от того, для какой платформы предназначен ваш продукт — будь то Веб или же мобильные платформы — вам в первую очередь нужно сфокусироваться на самой проблеме, решение которой вы хотите предложить. Прежде чем приступать к реализации продукта, вы должны выяснить, что именно нужно пользователям.
• Реализация продукта с использованием веб-стандартов. Используйте для реализации те инструменты, с которыми вы хорошо знакомы и в результате вы получите продукт с обширной аудиторией и доступный на различный платформах, где есть в наличии совместимый с веб-стандартами браузер. Для начала, можете ознакомится с пособиями Put Your Content in my Pocket (www.alistapart.com/articles/putyourcontentinmypocket) и Put Your Content in my Pocket, Part II (www.alistapart.com/articles/putyourcontentinmypocketpart2). В процессе реализации продукта уделяйте пристально внимание тому, как пользовательский интерфейс фронт-энда взаимодействует с сервисами бэк-энда. Постарайтесь использовать REST API в качестве третьей стороны и, конечно, ваши собственный наработанные решения для данной платформы.
• Запуск продукта. Предоставьте плоды своих трудов пользователям как можно скорее и поскольку люди начнут пользоваться вашим продуктом, это запустит процесс обратной связи и необходимых улучшений и исправлений.
• Проблемы. В конечном счете вы столкнетесь с проблемами, которые невозможно будет решить с помощью веб-стандартов. Пользователи могут попросить ввести новые функции, чтобы они могли загрузить фотографии и получить доступ к своему списку контактов. Некоторые пользователи попросят реализовать приложение для iPhone, потому что они привыкли, что у многих их любимых сайтов уже есть подобные решения. Могут поступить также предложения от ваших разработчиков и дизайнеров, которые скажут,что навигация и процесс управления уже не соответствуют расширяющейся сферы применения приложения. Когда у вас появится чувство, что вы повторно изобретаете колесо, попробуйте просто воспользоваться уже созданным колесом от Aplle.
• Преобразование дизайна продукта под iPhone приложение. Вы, скорее всего, сразу увидите, что многие решения в вашем приложении были реализованы универсально для разных платформ и при входе в специфический мир приложений iPhone, вы захотите пересмотреть их реализацию. Разметка и способы взаимодействия с пользователем должны быть пересмотрены для того, чтобы при знакомстве с вашим приложением пользователь чувствовал себя в знакомой среде.
• Запуск продукта на iTunes. Теперь, после завершения разработки вашего приложения для iPhone пора обратится к новому способу привлечения пользователей и мы переходим к следующему разделу…

Позаботься о бизнесе

Другой положительный момент в разработке приложений для iPhone: в iTunes есть более 100 млн. пользователей, которые могут купить ваше приложение одним нажатием кнопки. Они также легко могут и просто заплатить за ваш контент. Если у вас собственный бизнес, то для вас есть явные преимущества в создании приложений для iPhone в дополнение к вашему веб-сайту.

Бренд-маркетинг

Для маркетологов App Store — это еще одно мощное средство, при помощи которого можно представить продукт или услугу миллионам пользователей. Крупные бренды, которые упоминались в этой статье, продолжают укреплять свои позиции в Интернете в том числе и своими iPhone приложениями.

Многие из этих компаний рассматривают приложения для iPhone как дешевый вид рекламы: 30 секунд рекламного времени в прайм-тайм могут стоить больше полумиллиона долларов, а приложение для iPhone стоит намного меньше и когда маркетолог видит значок своей компании в iTunes — для него это круче, чем Рождественское утро.

Разработчики поменьше также могут эффективно использовать App Store для расширения аудитории и улучшения взаимодействия с уже имеющимися пользователями. Учитывая, что вы уже проделали огромный кусок работы над бэк-эндом, когда создавали продукт для Сети, то разработка дополнительного фронт-энда не потребует от вас огромных затрат и усилий.

Медиа-вопрос

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

iTunes предлагает вам простой способ, как организовать оплату контента пользователями. Здесь предлагаются и варианты разовых платежей в виде покупки приложения и постоянные периодические платежи в виде подписки с покупками в самом приложении. В любом случае, пользователю достаточно просто нажать кнопку «Купить» и ввести свой пароль. Apple берет на себя обработку платежей и их учет, а вы просто в конце месяца получаете переводы на банковский счет от пользователей со всех концов мира.

С выпуском iPad и его популярностью все издатели — и крупные и мелкие — считают необходимым адаптировать свой контент под iPhone ОС. Издание Wired Magazine (mediadecoder.blogs.nytimes.com/2010/05/28/wired-magazine-app-gets-a-jolt-at-launch) дебютировало в App Store со своим приложением и в первые 24 часа было осуществлено 24000 продажи по 5 долларов за копию. И здесь не нужно быть финансовым гением, чтобы понять, что существует серьезный потребительский спрос на инновационные сервисы среди пользователей в iTunes.

Задумайтесь об этом и вы поймете, что в любом случае есть смысл приложить дополнительные усилия. Вы привыкли покупать музыку и видео через iTunes, а с iBookstore вам стали доступны основные издания в электронном виде. Добавьте сюда свой собственный продукт, ведь такой шаг имеет свои плюсы и для вас и для ваших клиентов.

Будьте осторожны

Добавление вашего контента в App Store предполагает этап, к которому, вероятно, вы не очень привычны в Сети: анализ продукта третьей стороной. Любой продукт, который вы предлагаете для размещения в iTunes, будет проверен и может быть отклонен, если, на усмотрение Apple, он не соответсвует каким-либо критериям. Каждое приложение, представленное в iTunes прошло через такой же процесс проверки.

Бывает, что проверка в iTunes стремится к излишней осторожности: как-то не были допущены политические карикатуры, потому что они высмеивали известного общественного деятеля. С тех пор Apple несколько ослабила свои ограничения, но, все же, есть достаточно правил (appreview.tumblr.com), которые вы должны соблюдать, если хотите увидеть свой продукт в iTunes.

Если ваш контент содержит изображения обнаженного тела или же информацию из любых других запрещенных областей — вы только время впустую потратили, читая эту статью. Хотя, конечно, все не так плохо, ведь вы можете обойти эти ограничения при помощи Safari.

Итог

Что мы имеем: краткий обзор, что сегодня значат приложения для iPhone для производителей веб-контента. Надеюсь, из этой статьи вы получили достаточно информации, чтобы понять, нужно ли вам мобильное приложение в дополнение к сайту.