
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
Текстовое содержимое представления метки было привязано к свойству 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.
