Документ охватывает основы веб-разработки на стороне клиента и сервера, включая использование языков программирования JavaScript, PHP и Perl, а также описывает различные фреймворки и библиотеки. Рассматриваются методы взаимодействия между клиентом и сервером через REST и RPC, а также форматы обмена данными, такие как JSON и XML. Особое внимание уделяется инструментам и технологиям для создания интерактивных веб-приложений и динамических веб-страниц.

1. Лекция 5

2. Сценарии на стороне клиента
 Базы данных
 Поисковой системы
 Социальной сети
 Мультимедиа-
ресурса
 …
2
Пользователь
?
data
Клиентская сторона
Серверная
сторона
back-end
front-end
(сервер приложений)
Кэш-сервер
Мобильный
(m.Web UI)
Десктопный
(UI)
Браузер
(Web UI)
Программа-
клиент
Толстый
Тонкий
API over HTTP(s)
ASP
php
node.js
HTML/CSS
JavaScript
WWW
СУБД
FCGI
Perl
Python
API-сервис
Widgets
DOM
RPC
JSON
XML
SOAP
REST
Web-сервер
AJAX
Binary
API over TCP Web-сервис

3. Сценарии на стороне клиента
 В Web-разработке, в качестве front-end выступают HTML-вёрстка,
стили CSS и JavaScript.
 JavaScript является объектно-ориентированным языком.
Разработан для поддержки дополнительных функциональных
возможностей статических Web-страниц.
 Реализуются такие эффекты, как, вывод окон с сообщениями,
отображение анимации. JavaScript-сценарии часто используются
для определения типа браузера и платформы. Применяется для
проверки корректности данных, введенных пользователем.
 Отличия от языка Си :
 функции как объекты первого класса;
 автоматическое приведение типов;
 автоматическая сборка мусора;
 анонимные функции.
 реализует объектно-ориентированный подход
основанный не на классах, на прототипах;
 Для добавления JavaScript-кода использовать теги
<script></script>.
3

4. JavaScript. Фреймворки
 Для обеспечения высокого уровня абстракции и
достижения приемлемой степени кросс-браузерности при
разработке веб-приложений используются библиотеки
JavaScript (фреймворки).
 Предоставляет разработчикам каркас будущего приложения
и решение задач, встречающихся в большинстве проектов.
 Фреймворк позволяют создавать одностраничные веб-
приложения (Single Page Application).
 Web-сайты, внешне напоминающие полноценные
приложения для операционной системы
 Фреймворки активно используются front-end
разработчиками:
 jQuery
 AngularJS
 Backbone.js
 Ember.js
 React JS
4

5. JavaScript. Библиотека jQuery
 jQuery — библиотека, ориентированная на
взаимодействие JavaScript и HTML
 Помогает легко получать доступ к любому элементу
DOM, обращаться к атрибутам и содержимому
элементов DOM и управлять ими.
 Предоставляет удобный API для работы с AJAX.
 Вся работа с jQuery ведётся с помощью функции $
$('div.msg').width(300);
$('blockquote').each(function() { alert(jQuery(this).text()) });
 jQuery используется в:
 социальной сети Pinterest,
 Amazon Kindle.
5

6. JavaScript. Фреймворк AngularJS
 Фреймворк от Google. Активно набирает популярность.
 Реализует концепцию MVC (Model-View-Controller)
 Позволяет расширить синтаксис HTML. В результате
код получается выразительным, читаемым и гибким.
 Позволяет реализовывать динамическое связывание
данных — обновления вида при изменении модели, а
также обновление модели при изменении вида
(реализация MVC).
<h1>Hello {{myName}}!</h1>
 AngularJS используется в:
 Google.Mail, Docs;
 YouTube для PS3;
 PayPal;
 Weather.com.
6

7. JavaScript. Фреймворк Backbone.js
 Реализует концепцию MVP (Model-View-Presenter)
производную от MVC, которая используется в
основном для построения пользовательского
интерфейса.
 Предназначена для разработки RESTful web-
приложений.
 Обмен данными обеспечивается посредством
технологии JSON.
 Backbone.js используется в:
 digg.com
 Foursquare
 Groupon
7

8. Парадигма RPC
 RPC – (Remote Procedure Call) удалённый вызов
процедур.
 Технология, позволяющая скриптам, приложениям
и другому ПО вызывать методы или процедуры в
другом адресном пространстве удалённого
устройства.
 Состоит из двух компонентов:
 протокол клиент-серверного взаимодействия, т.н.
«транспорт» (HTTP, SOAP, TCP, UDP),
 язык сериализации структур или объектов (XML, JSON и
другие).
 Сериализация - процесс перевода какой-либо
структуры данных, объекта в специальную форму,
поддерживающую обратный процесс десериализации.
Например, для сохранения и передачи по каналу связи.8

9. RPC на базе HTTP
 Крайне распространенная технология, несмотря на
явные нарушения архитектуры ISO/OSI.
 Виды технологии:
 XML RPC (текстовый протокол на базе HTTP) RFC-3529
 SOAP (текстовый протокол на базе HTTP) RFC-4227
 JSON RPC (текстовый протокол на базе HTTP и TCP) RFC-
4627
 .NET Remoting (бинарный протокол на базе TCP, UDP,
HTTP в составе .NET Framework)
 Существует множество реализаций: phpRPC, XML-RPC
for Python, phpxmlrpc, Django JSON-RPC, Phobos, JSON
Service, json-rpc-perl6, Zend, PEAR::SOAP, NuSOAP, eZ
SOAP, SOAP::Lite, Crypt::SSLeay, SOAPClient, suds и др.
9

10. SOAP
 SOAP (Simple Object Access Protocol) — простой
протокол доступа к объектам, расположенным на
удаленном ресурсе (web-сервисе).
 Произошел от XML-RPC и является следующей ступенью
его развития, получил статус стандарта W3C.
 Использует XML-нотацию для клиент-серверного
обмена SOAP-конвертами.
10
 Основной раздел – Envelope,
включает
 Header, опциональный.
Служебные данные,
авторизация.
 Body, обязательный. Содержит
данные.
 Fault (в случае ошибки).

11. SOAP/WSDL
 WSDL (Web Service Definition Language) — язык
описания web-сервиса.
 WSDL предназначен для интероперабельности
ресурса.
 Обеспечивает возможность любому web-клиенту
реализовать интерактивный диалог с сервисом
посредством SOAP.
 В XML-файле с расширением «*.wsdl» описывается
следующая информация:
 Пространства имен,
 Схемы данных,
 Поддерживаемые типы сообщений,
 Поддерживаемые процедуры,
 Порядок вызова процедур,
 URL для клиентских обращений.
 https://api.direct.yandex.ru/v4/wsdl/ 11

12. XML
 XML, eXtensible Markup Language — расширяемый язык
разметки.
 XML разрабатывался как язык с простым формальным
синтаксисом, удобный для создания и обработки
документов программами.
 Язык не определяет разметку, используемую в документах:
разработчик может создать теги в соответствии с
потребностями к конкретной области, будучи
ограниченным лишь синтаксическими правилами языка.
<person>
<name>Дмитрий</name>
<address>
<city>Москва</city>
<postal>111000</postal>
</address>
<email>w@memfis.su</email>
<email>ib@memfis.su</email>
</person> 12

13. JSON
 JSON, JavaScript Object Notation — текстовый формат
обмена данными, основанный на JavaScript и обычно
используемый именно с этим языком.
 Используется для сериализации сложных структур.
 Более лаконичен чем XML.
 JSON-текст представляет собой одну из двух структур:
 Набор пар ключ:значение (объект, запись, структура,
словарь, хэш-таблица, список с ключом). Ключом может
быть только строка, значением — любая форма.
 Упорядоченный набор значений. Во многих языках это
реализовано как массив, вектор, список или
последовательность.
{ "name": "Дмитрий",
"address":
{ "city": "Москва", "postal": 111000},
"emails":
[ "w@memfis.su", "ib@memfis.su" ] } 13

14. <!-- Структура HTTP-сообщения -->
 Каждое HTTP-сообщение состоит из трёх частей,
которые передаются в указанном порядке
14
Стартовая строка Starting line
определяет тип сообщения
Заголовки Headers
характеризуют тело сообщения, параметры
передачи и прочие сведения;
Тело сообщения Message Body
данные сообщения
<пустая строка>

15. Пример удаленного вызова на JSON-RPC
POST /myservice HTTP/1.1
Host: rpc.memfis.su
Content-Type: application/json
Content-Length: 100
Accept: application/json
{
"jsonrpc": "2.0",
"method": "concat",
"params": ["abc", "def"],
"id": 123
}
15
HTTP/1.1 200 OK
Connection: close
Content-Type: application/json
Content-Length: 50
Date: Sat, 08 Jul 2014 12:04:08
{
"jsonrpc": "2.0",
"result": "abcdef",
"error": null
"id": 123
}
Запрос Ответ

16. Пример удаленного вызова на SOAP
POST /mysoap HTTP/1.1
Content-Length: 400
Content-Type: text/xml; charset=utf-8
SOAPAction: "API#CONCAT"
Host: rpc.memfis.su
<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:ns0="API"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/">
<SOAP-ENV:Header>
<locale>ru</locale>
</SOAP-ENV:Header>
<SOAP-ENV:Body>
<ns0:CONCAT SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
<params soapenc:arrayType="xsd:string[]">
<xsd:string>abc</xsd:string>
<xsd:string>def</xsd:string>
</params>
</ns0:CONCAT >
</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
16

17. Парадигма REST (альтернатива RPC)
 Подход RPC позволяет реализовать большое количество
методов и сложный протокол и всегда через один URI
сервиса.
 REST (Representational State Transfer ) передача
репрезентативного состояния — концепция
взаимодействия компонентов клиент-серверного
приложения.
 В парадигме REST количество методов и сложность
протокола строго ограничены, из-за чего количество
отдельных сервисов (URI) может быть большим.
 Все RESTful приложения основаны на технологии
манипуляции объектами CRUD (Create, Read, Update,
Delete), что в протоколе HTTP будет выражено
методами POST, GET, PUT, DELETE. 17

18. Парадигма REST. Примеры
 GET - получает ресурсы. Никогда не изменяет объект
 GET /lib/books
 GET /lib/books?author=Tolstoi
 GET /lib/author/Tolstoi/books
 PUT - создает ресурс.
 PUT /lib/books {"author": "Chehov"}
 POST – обновляет ресурс.
 POST /lib/books {"author": "A.P. Chekhov"}
 DELETE – удаляет ресурс
 DELETE /lib/books {"author": "A.P. Chehov"}
 В REST-сервисах акцент сделан на доступ к ресурсам, а
не на исполнение удаленных методов, в этом
заключается главное отличие от RPC-сервисов. 18

19. AJAX
 AJAX (Asynchronous JavaScript and XML) асинхронный
JavaScript и XML - подход к построению интерактивных
пользовательских интерфейсов веб-приложений,
позволяющих выполнять асинхронные динамические
запросы к серверу без видимой перезагрузки веб-страницы
 сокращение трафика при работе с web-сайтом,
 уменьшение нагрузки на web-сервер в разы,
 ускорение реакции web-страницы без обновления,
 интерактивная обработка данных на web-сайте.
 В качестве формата контейнеров передачи данных могут
использоваться фрагменты простого текста, HTML-кода,
JSON или XML. 19

20. Web-сервис
Сценарии на стороне сервера
 Базы данных
 Поисковой системы
 Социальной сети
 Мультимедиа-
ресурса
 …
20
Пользователь
?
data
Клиентская сторона
Серверная
сторона
back-end
front-end
(сервер приложений)
Кэш-сервер
Мобильный
(m.Web UI)
Десктопный
(UI)
Браузер
(Web UI)
Программа-
клиент
Толстый
Тонкий
API over HTTP(s)
ASP
php
node.js
HTML/CSS
JavaScript
WWW
СУБД
FCGI
Perl
Python
API-сервис
Widgets
DOM
RPC
JSON
XML
SOAP
REST
Web-сервер
AJAX
Binary
API over TCP
SaaS

21. Сценарии на стороне сервера
 Web-сервер поддерживает выполнение скриптов,
которые отвечают за организацию запросов к
сетевым службам, базам данных, доступу к файлам,
пересылке электронной почты и другим
приложениям клиент-серверного взаимодействия.
 Для реализации back-end используют:
 PHP,
 Node.js,
 Perl,
 Ruby,
 Python,
 CGI, FCGI,
 Активные страницы ASP, JSP. 21

22. Сценарии на стороне сервера
 Все сценарии имеют идентичный принцип работы:
 Браузер получил от веб сервера HTML-код в котором есть
URI скрипта.
 Браузер посылает серверу запрос на выполнение файла,
содержащий код скрипта.
 Сервер осуществляет поиск соответствующего
интерпретатора.
 Отдает скрипт на исполнение соответствующему
интерпретатору с переданными параметрами.
 Интерпретатор генерирует HTML-код, отдает серверу.
 Web-сервер посылает HTML-код браузеру.
 Результатом работы скрипта в большинстве случаев
является обычный текст либо сериализованные данные.
 Код скрипта в браузер не передается, только ссылка или
результат его работы.
22

23. PHP
 PHP, Hypertext Preprocessor
 Применяется для создания динамических веб-сайтов.
 Популярность в области построения веб-сайтов
определяется наличием большого набора встроенных
средств для разработки веб-приложений:
 автоматическое извлечение POST и GET-параметров;
 взаимодействие с большим количеством различных
систем управления базами данных (MySQL, Oracle,
PostgreSQL и др.)
 автоматизированная отправка HTTP-заголовков;
 работа с HTTP-авторизацией;
 работа с cookies и сессиями;
 работа с локальными и удалёнными файлами, сокетами;
 обработка файлов, загружаемых на сервер.
23

24. Perl
 Perl, Practical Extraction and Report Language -
практический язык для извлечения данных и
составления отчётов.
 Первоначально создан для манипуляций с текстом.
 В настоящее время высокоуровневый
интерпретируемый язык программирования общего
назначения.
 Поддерживает автоматическую типизацию данных и
автоматический контроль использования памяти.
 Используется для выполнения широкого спектра задач,
включая системное администрирование, веб-
разработку, сетевое программирование автоматизацию
различных процессов (в т.ч. посредством CGI).
 Основная особенность языка богатые возможности для
работы с текстом, в том числе работа с регулярными
выражениями, встроенная в синтаксис.
 Используется в DuckDuckGo, Vodafone и др. 24

25. ASP
 ASP (Active Server Pages) - активные серверные страницы,
технология создания Web-приложений Microsoft . Основана
на внедрении в статичные web-страницы специальных
элементов, допускающих программное управление.
 Это технология динамического создания страниц на
стороне сервера, приблизившая проектирование и
реализацию Web-приложений к той модели, по которой
проектируются и реализуются обычные приложения.
 Для реализации приложений ASP используются языки
семейства .NET Framework (C#, Visual Basic.NET, JScript.NET)
 Технология ASP получила своё развитие в виде ASP.NET,
технологии создания web-приложений, основанной на
платформе .NET.
 ASP.NET имеет компилируемый код, что является
преимуществом по сравнению со скриптовыми
технологиями
 Актуальная версия: ASP.NET 5
25

26. CGI, FastCGI
 CGI (Common Gateway Interface) – общий интерфейс
шлюза, стандарт (RFC 3875) интерфейса, используемого
для связи внешней программы с веб-сервером.
 CGI-программы называют шлюзами. Особенность в
том, что шлюзы будут запущены с заданным
окружением (описывается переменными).
 При обращении к скрипту из браузера скрипты
выполняются с окружением процесса httpd, что может
быть небезопасно.
 Программа-шлюз может быть реализована на любом
языке: C++, C#, PHP, Perl, Python и других.
 Все скрипты, как правило, помещают в каталог cgi (или
cgi-bin) web-сервера.
 Безопасность - настройки доступа для приложений.
 Унификация - стандартный способ для программы на
любом языке, чтобы связаться с web-сервером.
26

27. CGI, FastCGI
 CGI mysite.com/script.php выполнится с
окружением процесса httpd
 CGI mysite.com/script.php web-сервер вызовет
/usr/bin/php-cgi/script и скрипт выполняется уже в
окружении php-cgi
 Переменные окружения CGI для
GET http://yandex.ru/search?q=mirea&id=123 HTTP/1.1
 REQUEST_METHOD=GET Описывает каким именно
методом получены данные
 QUERY_STRING=q=mirea&id=123 Строка запроса, если
использовался метод GET
 CONTENT_LENGTH=31 Длина в байтах тела запроса
 REMOTE_ADDR=80.20.20.30 IP-Адрес удаленного хоста27

28. Сценарии работы web-сервера
 Данные, передаваемые от сервера, могут
генерироваться несколькими способами:
 Статический режим обработки;
 Динамический режим обработки;
 Путем внедрения кода в HTML.
28

29. Обработка статических данных
 Статические данные – данные, которые
передаются клиенту в неизменном виде
(исходные html-файлы, таблицы стилей, скрипты
изображения, прочие ресурсы, находящиеся на
жестких дисках web-сервера).
29

30. Обработка динамических данных
 GET /cgi-bin/a.cgi HTTP/1.1
30
#! - hashbang

31. Обработка кода, внедренного в HTML
 GET /a.html HTTP/1.1
31
<script lang=perl>
<?php>

32. WAF
 Базы данных
 Поисковой системы
 Социальной сети
 Мультимедиа-
ресурса
 …
32
Пользователь
?
data
Клиентская сторона
Серверная
сторона
back-end
front-end
(сервер приложений)
Кэш-сервер
Мобильный
(m.Web UI)
Десктопный
(UI)
Браузер
(Web UI)
Программа-
клиент
Толстый
Тонкий
API over HTTP(s)
ASP
php
node.js
HTML/CSS
JavaScript
WWW
СУБД
FCGI
Perl
Python
API-сервис
Widgets
DOM
RPC
JSON
XML
SOAP
REST
Web-сервер
AJAX
Binary
API over TCP Web-сервис

33. WAF
 WAF (Web Application Development Frameworks) —
класс программных продуктов в виде framework,
предназначенный для создания динамических web-
сайтов, сетевых приложений, сервисов или
информационных ресурсов.
 Упрощает разработку.
 Автоматизирует написание программного кода.
 Облегчает развёртывание web-сайтов и сервисов.
 Содержит API доступа к СУБД, диспетчер URL, системы
аутентификации, системы обработки запросов,
системы кеширования, интернационализации и
локализации приложений, компоненты для разработки
интерфейса и другое.
 Примеры:
 Django (Instagram, Pinterest, Disqus)
 Ruby on Rails (Twitter, GitHub, Groupon)
 Google Web Toolkit 33