Толстый клиент + API – новая

парадигма веб-разработки?

Андрей Лебедев

Толстый клиент + API – удобно, эффективно, выгодно!

• Быстрый интерфейс удобен пользователю• Эффективные преимущества MVC на клиенте для

разработчиков• Запуск проекта с большей для бизнеса выгодой

Удобный пользовательский интерфейс

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

Эффективные преимущества для разработчиков

• Архитектура Model – View на клиенте. Разделение бизнес-логики и визуализации

• Модульное тестирование всех компонентов системы• Четкие зоны ответственности – гарантия качества кода

Запуск проекта с большей для бизнеса выгодой.

• Параллельная разработка с API • Удобный доступ для партнеров и сторонних

разработчиков• Поисковая оптимизация страниц с выгодой для себя

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

Двухзвенная архитектура, бизнес-логика на клиенте

Сервер(БД)

Толстый клиент(бизнес - логика)

Трехзвенная архитектура, бизнес-логика на сервере

БД

Сервер приложений

(бизнес - логика)

Тонкий клиент

Веб-сервер как сервер приложений 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

API как средство интеграции клиентов

API

Web Site Public API

Native App

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. Основные понятия

• Stateless• Cacheable• Uniform interface

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

Отсутствие статистики о просмотренных страницах

_gaq.push(['_trackPageview', "/#{url}"])

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

Ajax

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

Современная архитектура web-приложения

DOM

VIEW

MODEL

TEMPLATE

STORAGE

???

Кросс-доменные запросы и политика одного домена.

Server response head:

Access-Control-Allow-Origin: http://example.comИлиAccess-Control-Allow-Origin: *

Запросы с авторизацией без использования cookies.

• Используйте кастомные заголовки в запросе

Выводы

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