Основы веб-технологий

2014 © EPAM Systems, RD Dep.
Содержание
Обобщённая схема веб-технологий
Многоуровневая архитектура приложений
Принципы работы веб-приложений
Архитектура веб-приложений
Java
ASP
PHP, Perl, Python, Ruby
Сравнение архитектур
Процесс разработки веб-приложений
Рекомендуемые источники информации

ОБОБЩЁННАЯ СХЕМА ВЕБ-ТЕХНОЛОГИЙ
2014 © EPAM Systems, RD Dep.

Обобщённая схема веб-технологий
2014 © EPAM Systems, RD Dep.
Веб-серверы и серверы приложений
Сетевые технологии
Базы данных
Языки программирования
Языки разметки и оформления
Языки и форматы обмена данными
Веб-приложения
Веб-сервисы

Обобщённая схема веб-технологий
2014 © EPAM Systems, RD Dep.
Базы данных
Языки программирования
Языки разметки и оформления
Языки и форматы обмена данными
Веб-приложения
Веб-сервисы
Веб-серверы и серверы приложений
Сетевые технологии

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Веб-сервер (web server) – специальное ПО, принимающее запросы (request) (как правило – HTTP) от веб-клиентов (web client), и генерирующее соответствующий ответ (response).
Веб-клиент
Веб-сервер
Магия ☺
Запрос
Ответ
Взаимодействие
Об этом – чуть позже

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Для отображения одной страницы может выполняться много запросов: браузеру необходимо получить множество различных элементов – css-файлы, js-файлы, картинки и т.д.

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Основные функции веб-сервера…
КАКИЕ?

Веб-серверы и серверы приложений: функции веб-сервера
2014 © EPAM Systems, RD Dep.
Обработка запросов и генерация ответов.
Обеспечение опосредованного доступа к ФС.
Обеспечение интерфейса к серверу приложений.
Контроль прав доступа.
Шифрование трафика.
Балансировка нагрузки.
Маршрутизация запросов (по виртуальным хостам).
Обработка ошибочных ситуаций.
Протоколирование.

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Наиболее распространённые веб-серверы:
По данным http://w3techs.com/technologies/overview/web_server/all.
Данные на 01.02.2018

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
А ещё?
Что ещё нам надо знать о работе веб-сервера?
Что может негативно сказаться на работоспособности сервера?

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Веб-сервер в ответ на запрос отдаёт «некий контент»:
Контент
Статический
(Static)
Динамический
(Dynamic)
Всё то, что «уже готово» к передаче клиенту.
Всё то, что «создаётся на лету» по факту поступления запроса.
Может быть закэширован.

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Веб-сервер также может выполнять «преобразование URL».
Преобразование URL (URL rewriting) – способ представить динамические URL в максимально удобной для восприятия человеком форме.
www.site.com/catalog/notebooks/hp/new/
www.site.com/index.php?page=catalog&category=notebooks&vendor=hp&mode=new
VS
См. подробности здесь: http://httpd.apache.org/docs/current/mod/mod_rewrite.html.

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Один из способов реализации преобразования URL – использование модуля mod_rewrite веб-сервера Apache.
См. подробности здесь: http://httpd.apache.org/docs/current/mod/mod_rewrite.html.
Не самый корректный, но самый простой пример. В файле .htaccess прописывается:
RewriteEngine On
RewriteBase /
RewriteRule .* index.php?url=$0 [QSA,L]
Теперь запрос к любому объекту будет переадресован на index.php.

Веб-серверы и серверы приложений
2014 © EPAM Systems, RD Dep.
Сервер приложений (application server) – специальное ПО, выполняющее для взаимодействующих с ним приложений ряд специфических функций, таких как управление производительностью, безопасностью, взаимодействие с операционной системой и т.п.
Частным случаем серверов приложений можно считать т.н. «среды исполнения» (.NET Framework, Java Runtime Environment, PHP и т.п.)
Сервер приложений
Приложение
Приложение
Приложение
Приложение
Приложение
Приложение

Веб-серверы и серверы приложений: функции сервера приложений
2014 © EPAM Systems, RD Dep.
Изолирование приложения от ОС и «железа».
Предоставление API для типичных действий.
Управление ресурсами.
Протоколирование.
Оптимизация выполнения операций.
Балансировка нагрузки (в некоторых случаях).
Обработка ошибочных ситуаций.

Сетевые технологии
2014 © EPAM Systems, RD Dep.
Какие сетевые технологии задействованы в работе веб-технологий?
Сетевые технологии (network technologies) – совокупность технологий, обеспечивающих функционирование компьютерных сетей и аппаратных и программных средств, использующих в своей работе компьютерные сети.

Сетевые технологии: что задействовано?
2014 © EPAM Systems, RD Dep.
Для полноценного понимания сетевых технологий, задействованных в работе веб-приложений, рекомендуется ознакомиться с семиуровневой моделью ISO/OSI (особое внимание стоит уделить уровням 6-7).
См.: http://en.wikipedia.org/wiki/OSI_model
Если вкратце, то…

Сетевые технологии: OSI-модель, уровни
2014 © EPAM Systems, RD Dep.

Сетевые технологии: OSI-модель, протоколы
2014 © EPAM Systems, RD Dep.
HTTPS — расширение протокола HTTP, поддерживающее шифрование. Данные, передаваемые по протоколу HTTPS, «упаковываются» в криптографический протокол SSL или TLS.
Метод HTTP — последовательность из любых символов, кроме управляющих и разделителей, указывающая на основную операцию над ресурсом.
GET
POST
OPTIONS
HEAD
PUT
PATCH
DELETE
TRACE
CONNECT

2014 © EPAM Systems, RD Dep.

Сетевые технологии: HTTP коды
2014 © EPAM Systems, RD Dep.
Код состояния HTTP — часть первой строки ответа сервера при запросах по протоколу HTTP.
1xx Informational
2xx Success
3xx Redirection
4xx Client Error
5xx Server Error

Базы данных
2014 © EPAM Systems, RD Dep.
Веб-клиент
Веб-сервер
Запрос
Ответ
Базы данных (databases) под управлением СУБД (DBMS, database management systems, системы управления базами данных) являются универсальным хранилищем информации для веб-приложений.
Сервер приложений
СУБД

Базы данных
2014 © EPAM Systems, RD Dep.
Веб-сервер
В каких случаях происходят эти варианты взаимодействий?
Сервер приложений
СУБД
1
2
3
Например, протоколирование или авторизация.

Базы данных
2014 © EPAM Systems, RD Dep.
А бывают ли ситуации, когда с СУБД взаимодействует веб-клиент?
Веб-клиент
СУБД
?
Как правило, в случае «встроенных» «СУБД».

Базы данных
2014 © EPAM Systems, RD Dep.
Что хранится и НЕ хранится в БД:

«Что где хранится» (расширенная версия)
2014 © EPAM Systems, RD Dep.
Хранится в БД
Хранится в файловой системе
Генерируется динамически
Структура приложения (сайта)
Текстовое наполнение страниц
Некоторые настройки
Скрипты
Мультимедийная информация
Некоторые настройки
Кэш готовых страниц
Кэш готовых страниц
Готовые страницы
Текстовая информация
Мультимедийная информация

Языки и форматы и обмена данными
2014 © EPAM Systems, RD Dep.
Загляните на http://w3schools.com
XML
DTD
WSDL
SOAP
JSON
RSS
и т.д.

Языки и форматы и обмена данными
2014 © EPAM Systems, RD Dep.
XML (eXtensible Markup Language) – формат хранения и обмена структурированными данными.
DTD –
WSDL –
SOAP –
JSON –
RSS –
?
Может быть, мы ещё что-то забыли?

Языки программирования
2014 © EPAM Systems, RD Dep.
Java
ASP
PHP
Perl
Python
Ruby
JavaScript
ActionScript
Работают на стороне сервера
Работают на стороне клиента
Может быть, мы ещё что-то забыли?

Языки разметки и оформления
2014 © EPAM Systems, RD Dep.
HTML
HTML5
CSS
CSS3
Загляните на http://w3schools.com

Языки разметки и оформления
2014 © EPAM Systems, RD Dep.
HTML (Hypertext Markup Language, язык гипертекстовой разметки) – специальный язык РАЗМЕТКИ, используемый для описания структуры документа.
XHTML (Extensible Hypertext Markup Language, расширяемый язык гипертекстовой разметки) – более строгий «вариант» HTML, базирующийся на спецификациях XML.
HTML5 – «улучшенная» версия HTML, добавляющая широкий спектр новых возможностей. Полный список нововведений в HTML5 можно увидеть здесь:
http://www.w3.org/TR/html5-diff/

Языки разметки и оформления
2014 © EPAM Systems, RD Dep.
CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык описания внешнего вида документа (написанного с использованием HTML).
CSS3 (CSS4) – новые версии CSS, следующие той же логике развития, что и HTML5 по отношению к «классическому» HTML (XHTML).

Веб-приложения
2014 © EPAM Systems, RD Dep.
Веб-приложение (web application) – приложение, использующее для своей работы Интернет или интранет (локальную сеть). Как правило, работает по архитектуре: «веб-клиент + веб-сервер + сервер приложений + СУБД».
Часто веб-приложения строятся так, что для их работы необходим браузер, но это – не обязательное условие.
Давайте назовём несколько примеров веб-приложений разных видов.

Веб-сервисы
2014 © EPAM Systems, RD Dep.
Веб-сервис (web service) – ПО, предоставляющее возможность обмена данными по сети между приложениями, устройствами и другими веб-сервисами.
Клиент
Веб-сервис
Запрос
Ответ
Давайте приведём примеры веб-сервисов.

МНОГОУРОВНЕВАЯ АРХИТЕКТУРА ПРИЛОЖЕНИЙ
2014 © EPAM Systems, RD Dep.

Многоуровневая архитектура приложений
2014 © EPAM Systems, RD Dep.
Уровень 1
Интерфейс 1
Уровень 2
Уровень N
.
.
.
Уровень
данных
Уровень
бизнес-логики
Уровень
представления
Интерфейс 2

Многоуровневая архитектура приложений
2014 © EPAM Systems, RD Dep.
Уровень
данных
Уровень
бизнес-логики
Уровень
представления
Отвечает за ввод-вывод данных, их форматирование и отображение.
Выполняет непосредственно возложенные на приложение задачи.
Обеспечивает операции по сохранению, извлечению и некоторой обработке данных.

Многоуровневая архитектура приложений
2014 © EPAM Systems, RD Dep.
Уровень
данных
Уровень
бизнес-логики
Уровень
представления
Браузер
СУБД
Веб-сервер и сервер приложений

Многоуровневая архитектура приложений
2014 © EPAM Systems, RD Dep.
Уровень
данных
Уровень
бизнес-логики
Уровень
представления
Браузер
СУБД
Веб-сервер и сервер приложений
Всегда ли схема именно такая? Или есть другие варианты?

Многоуровневая архитектура приложений
2014 © EPAM Systems, RD Dep.
Каковы преимущества и недостатки многоуровневой архитектуры?

ПРИНЦИПЫ РАБОТЫ ВЕБ-ПРИЛОЖЕНИЙ
2014 © EPAM Systems, RD Dep.

Рассмотрим на большой картинке
2014 © EPAM Systems, RD Dep.
Веб-приложения работают просто. Очень просто.
А сложность ситуации заключается в том, что в работе задействовано очень много компонентов, которые выполняют очень много действий.

АРХИТЕКТУРА ВЕБ-ПРИЛОЖЕНИЙ
2014 © EPAM Systems, RD Dep.

JAVA
2014 © EPAM Systems, RD Dep.

Tomcat
Java (один из возможных вариантов архитектуры)
2014 © EPAM Systems, RD Dep.
Клиент
Java приложение (applet)
JSP
Web сервисы
EJB
СУБД
БД
Всё верно? Ничего не забыли?

ASP.NET
2014 © EPAM Systems, RD Dep.

.NET Framework
ASP.NET (классический вариант архитектуры)
2014 © EPAM Systems, RD Dep.
IIS
Клиент
СУБД
БД
Всё верно? Ничего не забыли?
Приложение

PHP, PERL, PYTHON, RUBY
И Т.Д. И Т.П.
2014 © EPAM Systems, RD Dep.

PHP, Perl, Python, Ruby и т.д. (универсальная архитектура)
2014 © EPAM Systems, RD Dep.
Среда исполнения
Apache
Клиент
СУБД
БД
Всё верно? Ничего не забыли?
Приложение

СРАВНЕНИЕ АРХИТЕКТУР
2014 © EPAM Systems, RD Dep.

Сравнение архитектур
2014 © EPAM Systems, RD Dep.
Java
ASP.NET
PHP, Perl, etc…
Что здесь выглядит похоже? А в чём отличия?

ПРОЦЕСС РАЗРАБОТКИ ВЕБ-ПРИЛОЖЕНИЙ
2014 © EPAM Systems, RD Dep.

Процесс разработки веб-приложений
2014 © EPAM Systems, RD Dep.
Разработка общей концепции приложения, создание структуры и т.д.
Создание графической концепции и графических макетов основных страниц приложения.
Вёрстка графического макета. Создание шаблонов основных страниц.
Разработка нового (или адаптация существующего) движка.
Разработка новой (или адаптация существующей) базы данных.
Финальное тестирование и размещение приложения на хостинге.
1
2
3
4
5
6

WEB-BROWSER
2014 © EPAM Systems, RD Dep.

Браузеры, хранение данных
2014 © EPAM Systems, RD Dep.
Бра́узер или веб-обозрева́тель — прикладное программное обеспечение для просмотра веб-страниц; содержания веб- документов, компьютерных файлов и их каталогов; управления веб-приложениями; а также для решения других задач.
Cookie
Local Storage
Session Storage

Браузеры, хранение данных
2014 © EPAM Systems, RD Dep.
Cookie - небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя.
Веб-клиент (обычно веб-браузер) всякий раз при попытке открыть страницу соответствующего сайта пересылает этот фрагмент данных веб-серверу в составе HTTP-запроса.
Аутентификация пользователя
Хранение настроек и предпочтений
Отслеживание состояния сеанса доступа пользователя
Ведение статистики о пользователях
Куки легко перехватить и подменить

Браузеры, хранение данных
2014 © EPAM Systems, RD Dep.
Интернет-хранилище или DOM-хранилище — это программные методы и протоколы веб-приложения, используемые для хранения данных в веб-браузере. Интернет-хранилище представляет собой постоянное хранилище данных, похожее на куки, но со значительно расширенной ёмкостью и без хранения информации в заголовке запроса HTTP.
локальное хранилище (localStorage)
сессионное хранилище (sessionStorage)

ХОСТИНГ
2014 © EPAM Systems, RD Dep.

Хостинг
2014 © EPAM Systems, RD Dep.
Хо́стинг — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно находящемся в сети (обычно Интернет).
- ОС
- поддержка CGI: Perl, PHP, Python, ASP, Ruby, JSP, Java
- поддержка .htaccess/.htpasswd (для Apache)
поддержка баз данных
Hosting provider
Amazon AWS and Heroku, Docker, Microsoft Azure
Собственный сервер

РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ ИНФОРМАЦИИ
2014 © EPAM Systems, RD Dep.

Рекомендуемые источники информации
2014 © EPAM Systems, RD Dep.
http://google.com
http://w3schools.com
http://habrahabr.ru