Сценарии, выполняемые на стороне клиента
Фреймворки JavaScript
Сценарии, выполняемые на стороне сервера
RPC, SOAP
REST
WSDL
XML, JSON
AJAX
Сценарии работы web-сервера
По материалам книги: Джеймс Ли, Брент Уэр Использование Linux, Apache, MySQL и PHP для разработки Web-приложений, Издательский дом "Вильямс".
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
}
Запрос Ответ
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
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