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

1. Живые сайты
Рябко Дмитрий

2. Что есть интерактивность?

3. Use case
• Сайт похож на Desktop приложение
• Реагирует на события мгновенно (до 200мс)
• Стандартное поведение браузера не нарушено

4. Целевая аудитория
• Интернет магазины
• Соц сети
• Сайты знакомств
• Корпоративные сайты
• Браузерные игры

5. Плюсы интерактивности
• Сериализированные данные имеют
меньший объем
• Постоянное соединение, не делаем лишние
запросы
• Некоторые изменения HTML можно
распараллелить
• Заранее загрузить следующие шаги
• Снизить время реакции до 200мс

6. Интернет сервис

7. Use case для клиента
• Правильные ссылки в адресной строке
• Внутренним ссылки работают
• Отправка формы
• Кнопка "Назад" работает
• Курсор загрузки страницы
• Синхронизация
• Хранение состояния

8. Архитектура сервера
• Отдельные сервисы для бизнес логики
• Протокол общения между компонентами
• Кроссплатформенный формат HTML
шаблонов
• JSON интерфейс может быть адаптирован
под API
• Брокер сообщений для уведомления
пользователей

9. Клиет - Сборка
• Ant, Maven, Make
• >> или copy
• Минифицирование
– Google Closure
– YUI Compressor
– UglifyJS
– Webassets

10. jQuery код?

11. Клиент – код на CoffeScript
Coffescript JavaScript

12. Клиент - абстракции
• Модель
• Контроллер-Представление
• Маршрутизатор
• Коллекция

13. Клиент - библиотеки
• Blackbone.js
• Spine.js
• ember.js

14. Клиент – обработчики событий
• Представления
– Пользовательское
– Логическое
– Навигации
– Интерактивность

15. Клиент – общее представление
• Переопределяем внутренний href
• Отправка формы
– Автосохранение
– Запрос
• Отмена стандартной реакции браузера

16. Клиент – адресная строка
• HTML5 History API (pushState)
• Изменения якоря ссылки после #
• Трюки с iframe и setInterval
Backbone.history.start ()
Подкласс Backbone.Router
• Ссылка внутренняя?
• return false;
• router.navigate(href.substring(1), {trigger: true, replace: true})

17. Клиент – адресная строка, что еще?
Обработка Shift, Ctrl + click
jQuery (button, shiftkey, metakey)
window.open()
Курсор ожидания
CSS cursor: style="cursor: wait;"
Анимированный favicon.ico

18. Клиент – синхронизация состояния
Model.fetch() через setInterval()

19. Постоянное соединение - Транспорт
• WebSocket
• HTTP Streaming
• HTTP Polling
• Adobe Flash

20. Транспорт – Абстракции
• Метод для отправки сообщений
• Обработчик получения сообщений
• Обработчик установления и разрыва
соединения
• Натройки для клиента при инициации
соединения

21. Транспорт - Библиотеки
• socket.io
• SockJS
• Коммерческие библиотеки в облаках
Сервер
• Netty, Jetty for Java
• Tornado for Python

22. Socket.IO
Клиент Сервер - Tornado
Отправить сообщение

23. Использование шаблонов

24. Рендеринг - MUSTACHE
A typical Mustache template:
Hello {{name}}
You have just won ${{value}}! {{#in_ca}}
Well, ${{taxed_value}}, after taxes. {{/in_ca}}
Given the following hash:
{ "name": "Chris",
"value": 10000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
}
Will produce the following:
Hello Chris You have just won $10000!
Well, $6000.0, after taxes.

25. Сервер – REST API
• Java – Restlet, Apache Wink, Jersey
• Python - web.py, Flask and Bottle

26. Сервер – брокер сообщений
• Протокол AMQP (Advanced Message
Queueing Protocol)
• Реализация RabbitMQ
Попроще?
Тогда Redis

27. RabbitMQ – точка обмена
• Отправка всем (fanout) - (publish-subscribe)
• Прямая (direct) - (message queue)
• Тематическая (topic) – (pattern)

28. RabbitMQ - сценарии
• Выполнение длительных операций
• События в реальном времени
– Постоянное соединение
– Точка обмена – отправить всем

29. Спасибо за внимание!
Вопросы?