SlideShare a Scribd company logo

живые сайты

•
•
Z
zexzex

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

1 of 29
Живые сайты Рябко Дмитрий
Что есть интерактивность?
Use case • Сайт похож на Desktop приложение • Реагирует на события мгновенно (до 200мс) • Стандартное поведение браузера не нарушено
Целевая аудитория • Интернет магазины • Соц сети • Сайты знакомств • Корпоративные сайты • Браузерные игры
Плюсы интерактивности • Сериализированные данные имеют меньший объем • Постоянное соединение, не делаем лишние запросы • Некоторые изменения HTML можно распараллелить • Заранее загрузить следующие шаги • Снизить время реакции до 200мс
Интернет сервис
Use case для клиента • Правильные ссылки в адресной строке • Внутренним ссылки работают • Отправка формы • Кнопка "Назад" работает • Курсор загрузки страницы • Синхронизация • Хранение состояния
Архитектура сервера • Отдельные сервисы для бизнес логики • Протокол общения между компонентами • Кроссплатформенный формат HTML шаблонов • JSON интерфейс может быть адаптирован под API • Брокер сообщений для уведомления пользователей
Клиет - Сборка • Ant, Maven, Make • >> или copy • Минифицирование – Google Closure – YUI Compressor – UglifyJS – Webassets
jQuery код?
Клиент – код на CoffeScript Coffescript JavaScript
Клиент - абстракции • Модель • Контроллер-Представление • Маршрутизатор • Коллекция
Клиент - библиотеки • Blackbone.js • Spine.js • ember.js
Клиент – обработчики событий • Представления – Пользовательское – Логическое – Навигации – Интерактивность
Клиент – общее представление • Переопределяем внутренний href • Отправка формы – Автосохранение – Запрос • Отмена стандартной реакции браузера
Клиент – адресная строка • HTML5 History API (pushState) • Изменения якоря ссылки после # • Трюки с iframe и setInterval Backbone.history.start () Подкласс Backbone.Router • Ссылка внутренняя? • return false; • router.navigate(href.substring(1), {trigger: true, replace: true})
Клиент – адресная строка, что еще? Обработка Shift, Ctrl + click jQuery (button, shiftkey, metakey) window.open() Курсор ожидания CSS cursor: style="cursor: wait;" Анимированный favicon.ico
Клиент – синхронизация состояния Model.fetch() через setInterval()
Постоянное соединение - Транспорт • WebSocket • HTTP Streaming • HTTP Polling • Adobe Flash
Транспорт – Абстракции • Метод для отправки сообщений • Обработчик получения сообщений • Обработчик установления и разрыва соединения • Натройки для клиента при инициации соединения
Транспорт - Библиотеки • socket.io • SockJS • Коммерческие библиотеки в облаках Сервер • Netty, Jetty for Java • Tornado for Python
Socket.IO Клиент Сервер - Tornado Отправить сообщение
Использование шаблонов
Рендеринг - 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.
Сервер – REST API • Java – Restlet, Apache Wink, Jersey • Python - web.py, Flask and Bottle
Сервер – брокер сообщений • Протокол AMQP (Advanced Message Queueing Protocol) • Реализация RabbitMQ Попроще? Тогда Redis
RabbitMQ – точка обмена • Отправка всем (fanout) - (publish-subscribe) • Прямая (direct) - (message queue) • Тематическая (topic) – (pattern)
RabbitMQ - сценарии • Выполнение длительных операций • События в реальном времени – Постоянное соединение – Точка обмена – отправить всем
Спасибо за внимание! Вопросы?

More Related Content

живые сайты

  • 3. Use case • Сайт похож на Desktop приложение • Реагирует на события мгновенно (до 200мс) • Стандартное поведение браузера не нарушено
  • 4. Целевая аудитория • Интернет магазины • Соц сети • Сайты знакомств • Корпоративные сайты • Браузерные игры
  • 5. Плюсы интерактивности • Сериализированные данные имеют меньший объем • Постоянное соединение, не делаем лишние запросы • Некоторые изменения HTML можно распараллелить • Заранее загрузить следующие шаги • Снизить время реакции до 200мс
  • 7. Use case для клиента • Правильные ссылки в адресной строке • Внутренним ссылки работают • Отправка формы • Кнопка "Назад" работает • Курсор загрузки страницы • Синхронизация • Хранение состояния
  • 8. Архитектура сервера • Отдельные сервисы для бизнес логики • Протокол общения между компонентами • Кроссплатформенный формат HTML шаблонов • JSON интерфейс может быть адаптирован под API • Брокер сообщений для уведомления пользователей
  • 9. Клиет - Сборка • Ant, Maven, Make • >> или copy • Минифицирование – Google Closure – YUI Compressor – UglifyJS – Webassets
  • 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 Отправить сообщение
  • 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 - сценарии • Выполнение длительных операций • События в реальном времени – Постоянное соединение – Точка обмена – отправить всем