1. Толстый клиент + API –
новая
парадигма веб-разработки?
Андрей Лебедев

2. Толстый клиент + API –
удобно, эффективно, выгодно!
• Быстрый интерфейс удобен пользователю
• Эффективные преимущества MVC на клиенте для
разработчиков
• Запуск проекта с большей для бизнеса выгодой

3. Удобный пользовательский интерфейс
• Скорость отклика пользовательского интерфейса
• Минимизация траффика между сервером и клиентом
• Доступ к данным с различных устройств

4. Эффективные преимущества для разработчиков
• Архитектура Model – View на клиенте. Разделение бизнес-
логики и визуализации
• Модульное тестирование всех компонентов системы
• Четкие зоны ответственности – гарантия качества кода

5. Запуск проекта с большей для бизнеса
выгодой.
• Параллельная разработка с API
• Удобный доступ для партнеров и сторонних
разработчиков
• Поисковая оптимизация страниц с выгодой для себя

6. 20 лет назад: толстый и тонкий.

7. Двухзвенная архитектура,
бизнес-логика на клиенте
Сервер
(БД)
Толстый клиент
(бизнес -
логика)

8. Трехзвенная архитектура,
бизнес-логика на сервере
БД
Сервер
приложений
(бизнес - логика)
Тонкий
клиент

9. Веб-сервер как сервер приложений
Model-View-Controller
DB
WEB Server
BROWSER
CONTROLVIEW
MODEL
HTTP
HTML
HTTP
IMAGES, CSS, JS

10. Проблемы современных веб-приложений
• Рендеринг страницы на сервере на каждый запрос
пользователя
• Рендеринг страницы браузером при каждой загрузке

11. Rest API
Серверное API и одностраничное веб-приложение
BROWSER
DB
CONTVIEW
MODEL
CSS
Javascript
WEB SERVER
HTML
CSS
JS
IMAGES
HTTP
HTML
HTTP
JSON, XML, …
Websockets

12. API как средство интеграции клиентов
API
Web Site Public API
Native App

13. REST API. Универсальный интерфейс работы с
данным.
• Scalability of component interactions
• Generality of interfaces
• Independent deployment of components
• Intermediary components to reduce latency, enforce
security and encapsulate legacy systems

14. REST API. Основные понятия
• Stateless
• Cacheable
• Uniform interface

15. REST API: HTTP запросы к серверу
• GET http://example.com/resources/
• GET http://example.com/resources/item19
• POST http://example.com/resources/
• PUT http://example.com/resources/item19
• DELETE http://example.com/resources/item19

16. REST API. Ответы от сервера
• HTTP Заголовки имеют значение!
• Формат тела ответа от сервера
JSON, XML, HTML, текст и т.д.

17. «Пугающие» особенности одностраничных
веб-приложение
• Сломанная кнопка «Назад»
• Проблема поисковой оптимизации страницы
• Отсутствие статистики о просмотренных страницах
• Ошибки на клиенте никто не мониторит

18. Сломанная кнопка «Назад»
$(window).bind(‘hashchange’, function(event) {
if(event.target.location.hash == ‘#!category’) {
// show category
}
});

19. Проблема поисковой оптимизации страницы
www.example.com!#key=value
www.example.com?_escaped_fragment_=key=value

20. Отсутствие статистики о просмотренных
страницах
_gaq.push(['_trackPageview', "/#{url}"])

21. Ошибки на клиенте никто не мониторит
Ajax

22. Javascript фреймворки и библиотеки

23. Современная архитектура web-приложения
DOM
VIEW
MODEL
TEMPLATE
STORAGE
???

24. Кросс-доменные запросы и политика одного
домена.
Server response head:
Access-Control-Allow-Origin: http://example.com
Или
Access-Control-Allow-Origin: *

25. Запросы с авторизацией без использования
cookies.
• Используйте кастомные заголовки в
запросе

26. Выводы

27. Вопросы и ответы