More Related Content
What's hot (19)
Viewers also liked (20)
Similar to живые сайты (20)
живые сайты
- 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
- 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;" Анимированный favicon1.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 - сценарии • Выполнение длительных операций • События в реальном времени – Постоянное соединение – Точка обмена – отправить всем
- 29. Спасибо за внимание! Вопросы?