API плюс толстый клиент – новая парадигма...
Transcript of API плюс толстый клиент – новая парадигма...
Толстый клиент + API – удобно, эффективно, выгодно!
• Быстрый интерфейс удобен пользователю• Эффективные преимущества MVC на клиенте для
разработчиков• Запуск проекта с большей для бизнеса выгодой
Удобный пользовательский интерфейс
• Скорость отклика пользовательского интерфейса • Минимизация траффика между сервером и клиентом• Доступ к данным с различных устройств
Эффективные преимущества для разработчиков
• Архитектура Model – View на клиенте. Разделение бизнес-логики и визуализации
• Модульное тестирование всех компонентов системы• Четкие зоны ответственности – гарантия качества кода
Запуск проекта с большей для бизнеса выгодой.
• Параллельная разработка с API • Удобный доступ для партнеров и сторонних
разработчиков• Поисковая оптимизация страниц с выгодой для себя
Трехзвенная архитектура, бизнес-логика на сервере
БД
Сервер приложений
(бизнес - логика)
Тонкий клиент
Веб-сервер как сервер приложений Model-View-Controller
DB
WEB ServerBR
OW
SER
CON
TRO
LVI
EW
MO
DEL
HTTP
HTML
HTTP
IMAGES, CSS, JS
Проблемы современных веб-приложений
• Рендеринг страницы на сервере на каждый запрос пользователя
• Рендеринг страницы браузером при каждой загрузке
Rest API
Серверное API и одностраничное веб-приложение
BROWSER
DB
CON
TVI
EW
MO
DEL
CSS
Javascript
WEB SERVER
HTML
CSS
JS
IMAGES
HTTP
HTML
HTTP
JSON, XML, …
Websockets
REST API. Универсальный интерфейс работы с данным.
• Scalability of component interactions• Generality of interfaces• Independent deployment of components• Intermediary components to reduce latency, enforce
security and encapsulate legacy systems
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
REST API. Ответы от сервера
• HTTP Заголовки имеют значение!• Формат тела ответа от сервера JSON, XML,
HTML, текст и т.д.
«Пугающие» особенности одностраничных веб-приложение
• Сломанная кнопка «Назад»• Проблема поисковой оптимизации страницы• Отсутствие статистики о просмотренных страницах• Ошибки на клиенте никто не мониторит
Сломанная кнопка «Назад»
$(window).bind(‘hashchange’, function(event) {if(event.target.location.hash == ‘#!category’) {
// show category}
});
Проблема поисковой оптимизации страницы
www.example.com!#key=value
www.example.com?_escaped_fragment_=key=value
Кросс-доменные запросы и политика одного домена.
Server response head:
Access-Control-Allow-Origin: http://example.comИлиAccess-Control-Allow-Origin: *