Статьи

SproutCore: приложения JavaScript

Apple, недавно представившаяся на WWDC в качестве основы для веб-приложений MobileMe, является новейшим членом братского фреймворка JavaScript: SproutCore . Я почти уверен, что если бы я сказал вам, что SproutCore — это еще одна инфраструктура JavaScript для создания богатых интерфейсов приложений браузера, вы бы предпочли вычистить свои глазные яблоки стальной ватой, чем продолжать читать. Пока не спешите, потому что SproutCore довольно сильно отличается от других фреймворков, и на него стоит взглянуть.

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

Когда я говорю «создание приложений», я имею в виду сложный дизайн приложений на основе Model-View-Controller, вдохновленный Apple Cocoa . На практике создается впечатление, что вы создаете полнофункциональное приложение Ruby on Rails — инструменты сборки написаны на Ruby и используют функции, подобные Rails, например генераторы. Модели и контроллеры написаны на JavaScript, а представления написаны на Erubis , высокоэффективной реализации Embedded Ruby.

Вот очень простая демонстрация того, как это работает. Я рекомендую сделать урок hello world на сайте SproutCore, если вы хотите увидеть больше.

После установки инструментов сборки через систему RubyGems вы начинаете новое приложение, набрав команду: sproutcore hello_goodbyehello_goodbye Это создаст каталог с тем же именем, что и ваше приложение, и в нем будут все необходимые файлы, чтобы приложение работало локально.

Чтобы сделать что-нибудь интересное, вам понадобится контроллер — объект JavaScript, который управляет логикой вашего приложения. Вы можете использовать встроенный генератор, введя следующую команду из корневого каталога вашего проекта:

 sc-gen controller hello_goodbye/app

Это сгенерирует контроллер приложения с именем HelloGoodbye.appController

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

 HelloGoodbye.appController = SC.Object.create(
{
  greeting: "Hello World!"
});

Затем мы добавим несколько помощников вида в файл вида по умолчанию: вид метки и вид кнопки:

 <%= label_view :my_label, 
    :tag => 'h1', 
    :bind => { :value => 'HelloGoodbye.appController.greeting' } %>
<%= button_view :toggle_button, 
    :title => 'Change Greeting', 
    :action => 'HelloGoodbye.appController.toggleGreeting' %>

Запуск включенного веб-сервера Mongrel путем ввода команды sc-serverhttp://localhost:4020/hello_goodbye Вы увидите элемент h1
Скриншот приложения simpleSproutCore

Текстовое содержимое представления метки было привязано к свойству greeting Если вы измените значение greeting

 HelloGoodbye.appController.set('greeting', 'Goodbye World!')

текст внутри заголовка также чудесным образом изменится.

Свойство :action Мы добавим этот метод к нашему контроллеру:

 HelloGoodbye.appController = SC.Object.create(
{
  greeting: "Hello World!",
  toggleGreeting: function() {
    var currentGreeting = this.get('greeting');
    var newGreeting = (currentGreeting === 'Hello World!') ? 'Goodbye World!' : 'Hello World!' ;
    this.set('greeting', newGreeting);
  }
});

Если вы обновите страницу в своем браузере, нажатие кнопки должно переключить текст в элементе h1 Вы можете заметить, что это достигается без необходимости написания кода манипулирования DOM на JavaScript.

Когда вы будете готовы к развертыванию, все, что вам нужно сделать, это запустить следующую команду из корневого каталога вашего проекта: sc-build Это создаст каталог, содержащий статические файлы, которые вы можете переместить на ваш веб-сервер.

Наш приведенный выше тривиальный пример преобразуется в следующий HTML:

 <h1 id="my_label" class="sc-label-view my_label"></h1>
<a title="Change Greeting" id="toggle_button" 
    class="sc-button-view button regular normal toggle_button">
  <span class="button-inner">
    <span class="label">Change Greeting</span>
  </span>
</a>

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

Глядя на сгенерированный источник, становится ясно, что SproutCore — это фреймворк приложения в прямом смысле: игнорируйте сгенерированный HTML, конечный продукт будет выглядеть и ощущаться как настольное приложение. Для таких фанатов веб-стандартов, как я, приложения на основе браузера и приложения для настольных компьютеров всегда являются жестким предложением. Я предпочитаю спокойный, основанный на семантической разметке, ориентированный на документы подход, который позволяет браузерам работать как браузеры. Вы знаете: закладки и история, щелкните правой кнопкой мыши> Открыть в новой вкладке, святость и чистота гиперссылки. Тем не менее, кажется неизбежным, что браузер, как прикладная платформа, будет продвигаться настолько далеко, насколько это возможно. Я не могу удержаться от воспоминаний о том, что Джоэл из софта предсказал что-то подобное.

Как фанат JavaScript я впечатлен; производительность интерфейса отличная. SproutCore поднимает планку того, что JavaScript может делать в браузере. На недавнем Audible Ajax Джолли рассказал о том, что приложение SproutCore имеет только 6 обработчиков событий. SproutCore использует делегирование события, чтобы определить, какой элемент в теле был целью события. Я уверен, что есть много драгоценных камней JavaScript, которые будут добываться из базы кода SproutCore. Блог SproutCore уже содержит несколько отличных постов .

А как насчет доступности? Как вспомогательные технологии будут относиться к HTML, сгенерированному SproutCore? Я сомневаюсь, что программы чтения с экрана, которые совместимы со стандартными формами HTML, но в других случаях предназначены для интерпретации веб-страницы как документа, будут иметь хоть какой-то шанс понять это. Возможно, в будущем на помощь придут такие стандарты, как спецификация WAI Accessible Rich Internet Applications . Мне будет интересно увидеть подход Apple к MobileMe.

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