43
[email protected] Денис Бугарчев ШРИ 2013 Архитектура веб-приложений

2013 09 17 архитектура веб-приложений

  • Upload
    yandex

  • View
    3.471

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 2013 09 17 архитектура веб-приложений

[email protected]

Денис Бугарчев

ШРИ 2013 Архитектура веб-приложений

Page 2: 2013 09 17 архитектура веб-приложений

Архитектура веб-приложений

Что такое архитектура?

Что такое приложение?

Что такое веб-приложение?

Page 3: 2013 09 17 архитектура веб-приложений

Архитектура

Как процесс

создание, проектирование и планирование

Как предмет

проект = архитектура + код

Page 4: 2013 09 17 архитектура веб-приложений

Приложение

Решаем некоторую (произвольную) задачу. Какую?

Page 5: 2013 09 17 архитектура веб-приложений

Приложение

Page 6: 2013 09 17 архитектура веб-приложений

Приложение

Page 7: 2013 09 17 архитектура веб-приложений

Приложение

Решаем некоторую задачу

+

Некий исполняемый код

Page 8: 2013 09 17 архитектура веб-приложений

Структура приложений

Отображение

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

Данные (доступ)

Page 9: 2013 09 17 архитектура веб-приложений

Веб

Какие особенности?

Много клиентов

HTTP

Page 10: 2013 09 17 архитектура веб-приложений

Веб-приложение

Суммируем:

Решаем задачу исполняемым кодом с определенной структурой для множества клиентов.

Page 11: 2013 09 17 архитектура веб-приложений

Структура веб-приложений

Отображение

Бизнес-логика

Данные

Какая простейшая структура веб-приложения?

Page 12: 2013 09 17 архитектура веб-приложений

Структура веб-приложений

Клиент (ы) <======> Сервер

Двухзвенная архитектура

В простейшем случае – сервер один

Page 13: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

Клиент:

Отображение

Сервер:

Данные

Куда бизнес-логику?

Page 14: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

Клиент:

Отображение

Бизнес-логика

Сервер:

Данные

Page 15: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

Клиент:

Отображение

Сервер:

Данные

Бизнес-логика

Page 16: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

Клиент:

Отображение

Бизнес-логика

Сервер:

Данные

Минусы?

Page 17: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

"Толстый" клиент

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

работа в разных окружениях

высокие требования к серверу (если он один), как следствие плохая масштабируемость

Page 18: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

Клиент:

Отображение

Сервер:

Данные

Бизнес-логика

Минусы?

Page 19: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

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

еще выше требования к серверу

нагрузка на канал связи

масштабируемость остается общей проблемой

Page 20: 2013 09 17 архитектура веб-приложений

Двухзвенная архитектура

Исторически двухзвенная возникла первой

По мере роста требований понадобилось придумывать другую архитектуру

Page 21: 2013 09 17 архитектура веб-приложений

Требования

Возникла большая нагрузка, понадобилось делать кеширование

Возникла сложная логика урлов, утяжеляющая БД

Понадобилось заменить клиент или добавить другой с отличающимся функционалом (к сайту добавить мобильное приложение)

Page 22: 2013 09 17 архитектура веб-приложений

Трехзвенная архитектура

Тонкий(?) клиент (браузер):

Отображение

Сервер приложений (frontend):

Бизнес-логика

Сервер (backend):

Данные

Page 23: 2013 09 17 архитектура веб-приложений

Разделение на звенья

Основной принцип - каждое отдельное звено можно заменить не меняя другие

Например:

замена или добавление клиента

замена БД

изменение фронтенда (например замена шаблонизатора)

Page 24: 2013 09 17 архитектура веб-приложений

Трехзвенная архитектура

Клиент (стрелочка вниз)

Frontend (стрелочка вниз)

Backend

Подробнее про стрелочки

Page 25: 2013 09 17 архитектура веб-приложений

Трехзвенная архитектура

Клиент<=>Frontend

В качестве транспорта – http (в т.ч. ajax)

Что передаем, что получаем?

Формат запросов

Page 26: 2013 09 17 архитектура веб-приложений

Клиент<=>Frontend

Формат запросов

Две важные парадигмы

• REST

• RPC

Page 27: 2013 09 17 архитектура веб-приложений

REST

Representational state transfer

У ресурсов есть уникальный идентификатор (в нашем случае URL)

/book/173

/books-by-author/pushkin?type=poem

Page 28: 2013 09 17 архитектура веб-приложений

REST

Универсальный интерфейс доступа к ресурсам и их изменения. В случае веба HTTP методы запроса указывают на тип взаимодействия.

GET /book/117 – получение ресурса

POST /create/book?title=...&... – создание ресурса

DELETE /book/117 – удаление ресурса

UPDATE /book/117?title=... – редактирование ресурса

Page 29: 2013 09 17 архитектура веб-приложений

REST

Важные особенности

• кеширование (на уровне протокола или сервера)

• stateless (нет промежуточной информации на сервере)

• возможность использования между любыми двумя звеньями (клиент-фронтенд-бэкенд)

Page 30: 2013 09 17 архитектура веб-приложений

RPC

Remote Procedure Call

Удаленный вызов процедур

/gate?action=getBooksList

Page 31: 2013 09 17 архитектура веб-приложений

RPC

Отличительные черты

• протокол, включающий унифицированную передачу параметров запроса

• сериализация ответа

• бОльшая провязка между клиентом и сервером

Page 32: 2013 09 17 архитектура веб-приложений

Клиент<=>Frontend

Формат ответов

JSON (на клиенте js)

XML (на клиенте что-то еще или просто-так)

HTML

Различие между 1-2 и 1-3

Page 33: 2013 09 17 архитектура веб-приложений

Frontend<=>Backend

Формат запросов

И REST и RPC (CORBA, SOAP, etc)

Формат ответов

Очень вариативно, как правило data-ориентированный, нет смысла в передаче HTML

Page 34: 2013 09 17 архитектура веб-приложений

Семантика запросов

Существуют разные подходы к предмету запросов

вызов больших методов ("ручек"), которые хорошо знают конечную структуру страниц

вызов более мелких методов API со стороны бэкенда

Page 35: 2013 09 17 архитектура веб-приложений

Большие методы

Знают что надо, например getIndexPage

Плюсы - скорость

В чем выигрыш по скорости?

Page 36: 2013 09 17 архитектура веб-приложений

Большие методы

Знают что надо, например getIndexPage

Плюсы - скорость

экономия на общении фронтенд-бэкенд (по сути это двухзвенная архитектура)

меньше нагрузка на базу данных

Page 37: 2013 09 17 архитектура веб-приложений

Большие методы

Минусы

Теряется гибкость разработки, при любом изменении требуется работа специалиста бэкенд и фронтенд

Упомянутые недостатки двухзвенной архитектуры -

если добавится (изменится клиент) надо делать новые ручки

Page 38: 2013 09 17 архитектура веб-приложений

Backend API

Делаем небольшие ручки на каждый тип ресурсов (REST или RPC)

Теряется скорость, добавляется гибкость.

Page 39: 2013 09 17 архитектура веб-приложений

Итоги: выбор архитектуры

Все исходит из задачи

По сути звеньев можно выделить сильно больше

клиент - http-сервер - фронтенд - управление базой данных - база данных

плюс балансеры для распределения нагрузки

Page 40: 2013 09 17 архитектура веб-приложений

Выбор архитектуры

Важно, что разделение на части позволяет специализировать людей, проводить независимые изменения, масштабировать команду

Page 41: 2013 09 17 архитектура веб-приложений

Выбор архитектуры

Важно, что разделение на части позволяет специализировать людей, проводить независимые изменения, масштабировать команду

Скорость разработки важна, по сути это эффективность нашей работы

Page 42: 2013 09 17 архитектура веб-приложений

Выбор архитектуры

Важно, что разделение на части позволяет специализировать людей, проводить независимые изменения, масштабировать команду

Скорость разработки важна, по сути это эффективность нашей работы

Но иногда задача диктует требования, решение которых приводит к усложнению жизни разработчиков

Page 43: 2013 09 17 архитектура веб-приложений

Вопросы?