Современные технологии разработки веб-приложений

Министерство науки и высшего образования Российской Федерации 

НОВОСИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ 
__________________________________________________________________________ 
 
 
 
 
 
Д.В. ВАГИН, Р.В. ПЕТРОВ 
 
 
 
СОВРЕМЕННЫЕ  
ТЕХНОЛОГИИ РАЗРАБОТКИ  
ВЕБ-ПРИЛОЖЕНИЙ 
 
 
Утверждено Редакционно-издательским советом университета  
в качестве учебного пособия 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
НОВОСИБИРСК 
2019 

УДК 004.738.12(075.8) 
В 124 
 
 
Рецензенты: 
канд. техн. наук, ведущий инженер-программист  
АО «Завод Экран» А.В. Волкова 
д-р техн. наук, профессор М.Э. Рояк 
 
 
 
Работа подготовлена на кафедре прикладной математики НГТУ 
 
 
 
Вагин Д.В. 
В 124  
Современные 
технологии 
разработки 
веб-приложений: 
учебное пособие / Д.В. Вагин., Р.В. Петров. – Новосибирск: 
Изд-во НГТУ, 2019. – 52 с. 

ISBN 978-5-7782-3939-5 

В учебном пособии сначала дается теоретическая часть, а затем 
посредством несложных заданий предлагается изучить основные аспекты создания веб-сайта и применить полученные знания при создании собственной веб-программы, реализовав отсутствующий в CMS 
модуль. Также в учебном пособии даны примеры решения часто 
встречающихся задач. 
 
 
 
 
 
 
 
 
УДК 004.738.12(075.8) 
 
ISBN 978-5-7782-3939-5 
© Вагин Д.В., Петров Р.В., 2019 
 
© Новосибирский государственный 
 
технический университет, 2019 

ВВЕДЕНИЕ 
О ВЕБ-РАЗРАБОТКЕ 
 
Сейчас веб-приложения очень популярны. Такая популярность связана с необходимостью реализации  различных сервисов и программ, 
рассчитанных на широкий круг лиц, которые не будут ставить себе на 
устройство (компьютер, телефон, телевизор и др.) какие-то внешние 
программы, но при этом заинтересованы в использовании вашей программы. Часто используемым вариантом является создание программы 
на базе веб-технологий, которая решает поставленную задачу, а для ее 
запуска достаточно браузера, который установлен у всех.  
Поэтому самый часто встречающийся формат веб-приложения – 
это веб-сайт, или просто сайт. Альтернатива – это API веб-сервиса или 
мобильное приложение, которое также получает данные с сервера по 
веб-протоколам. 
Мы в данном учебном пособии будем преимущественно обсуждать 
тему сайтов, но вы всегда можете обобщить материалы на более широкий спектр веб-приложений. 
 
 
СОВРЕМЕННОЕ СОСТОЯНИЕ  
В ОБЛАСТИ ВЕБ-РАЗРАБОТКИ 
 
В настоящее время при веб-разработке применяются различные 
методики, языки программирования и технологии. В основном разница 
в применяемых технологиях зависит от размера, длительности и предполагаемой посещаемости проекта, а также от того, кто является конкретным заказчиком и исполнителем проекта. 
Можно выделить несколько типов проектов, отличающихся разными подходами. 
1. Небольшие по посещаемости, нагрузке и объему обрабатываемых данных сайты (до 5000 просмотров/день). Для них преимуще

ственно используются готовые системы управления (CMS), готовые 
решения на базе CMS, а также SaaS решения для построения сайта. Во 
многих случаях для таких проектов применяется типовой (шаблонный) 
дизайн, но иногда разрабатывается и индивидуальный дизайн. 
Примеры таких проектов – 90 % всех сайтов в интернете. 
2. Средние сайты. Посещаемость и/или объем обрабатываемых 
данных для такого типа сайтов могут быть уже достаточно велики для 
применения индивидуальных программных модулей или решений. 
Также требования отдела маркетинга могут генерировать необходимость отдельного программирования и доработки стандартной функциональности CMS. Как правило, такие сайты уже имеют посещаемость более 5000 просмотров/день (или более 500 посетителей/день). 
Чаще всего такие сайты разрабатываются на базе коробочных CMS с 
разработкой дополнительных модулей. Для таких проектов чаще всего 
применяется индивидуальный дизайн. Иногда для подобных проектов 
разрабатывается собственная система управления сайтом на базе 
фреймворка.  
Примеры таких проектов – средние интернет-магазины, региональные порталы, региональные СМИ и др. 
3. Большие проекты. Как правило, это либо проекты с большой посещаемостью, либо проекты с большим объемом данных и требованиями к работе 24 × 7 × 365. Для них характерна очень серьезная программная доработка CMS или фреймворка для решения стоящих перед 
проектом задач. Как правило, в таких проектах используется  несколько технологий и несколько языков программирования. 
Примеры таких проектов – крупные интернет-магазины (Эльдорадо, Связной, …), крупные СМИ и др. 
4. Enterprise решения, сервисы, SaaS проекты для построения более 
мелких веб-проектов. Характеризуются высокой нагрузкой, требованиями к работе 24 × 7 × 365, долгим жизненным циклом, итерационной разработкой и большим числом пользователей с обязательным 
разделением по правам доступа. Для них характерна серьезная программная доработка CMS или фреймворка для решения стоящих перед 
проектом задач, объединение различных технологий и языков программирования. 
Примеры таких проектов – банковские сервисы, системы для коллективной работы, CRM системы (Битрикс24, АМО CRM), системы 
для поиска и бронирования авиабилетов, крупные мировые СМИ и 
сервисы (twitter, facebook, ВКонтакте, Одноклассники). 

В настоящее время для большинства существующих и создаваемых 
веб-проектов существенный уклон делается в сторону: 
1) соответствия сайта маркетинговым задачам компании; 
2) соответствия дизайна сайта утвержденному дизайну; 
3) удобства работы пользователя с сайтом; 
4) и только в последнюю очередь – программирования сайта. Однако с развитием проекта и ростом посещаемости этот блок приобретает всё большее значение, поскольку при большой посещаемости или 
больших объемах данных оптимизация и правильно написанный программный код уже являются необходимым условием жизнеспособности проекта. 
 
 
АРХИТЕКТУРА ВЕБ-ПРИЛОЖЕНИЯ 
 
1. Клиентская часть – HTML, CSS и 
Javascript файлы, отображающие содержимое страницы и взаимодействующие с пользователем 
2. Разработанные модули, компоненты и шаблоны дизайна сайта для 
отображения информации в требуемом виде и реализации программных 
возможностей 
3. CMS – система управления контентом: 1С-Битрикс, Umi, NetCat, Joomla, 
Drupal, Wordpress, Typo3, … 
4. Framework (Фрэймворк): среда разработки, на которой реализована CMS 
(1С-Битрикс, Drupal, Zend, Yii, …) 
5. Язык 
программирования: 
PHP, 
.NET, Java, Ruby, Python, Erlang, …  
Взаимодействует с СУБД (MySQL, 
PostgreSQL, Oracle, MSSQL и др.), 
файлами на диске и т. д. 
6. Веб-сервер: Apache, IIS, nginx, … – 
предназначен для выполнения программ сайта, обработки пользовательских запросов и передачи информации пользователю 

Такая архитектура приводит к тому, что создание сайта разбивается на несколько этапов. В том числе программирование сайта разбивается на клиентскую часть (frontend-программы, выполняющиеся в 
браузере клиента) и серверную часть (backend-программы, генерирующие страницы сайта).  
Клиентская часть в настоящее время реализуется на языках JavaScript с использованием CSS3, HTML5. Для упрощения работы чаще 
всего используются уже готовые библиотеки JavaScrpt решений – 
JQuery и аналоги. 
Для серверной части используются CMS (Системы управления 
контентом, content management systems) и CMF (Content management 
framework), а также различные фреймворки для построения CMS и реализации модулей сайта. 
 
 
О СТРУКТУРЕ ПОДАЧИ МАТЕРИАЛА  
В ДАННОМ УЧЕБНОМ ПОСОБИИ 
 
Несмотря на то что веб-приложение может использовать различные 
технологии, его основные составные части придуманы достаточно 
давно и постепенно эволюционируют. 
Поэтому в данном учебном пособии мы постарались не только 
описать, как разрабатывается веб-приложение и из каких частей оно 
состоит, но и описать отличия от классических windows приложений, с 
которыми вам ранее приходилось сталкиваться.  
Составные части веб-приложения 
1. Клиентская часть: 
а) HTML и CSS, которые непосредственно отображают информацию в браузере пользователя; 
б) код на javascript, который может изменять содержимое отображаемого HTML и CSS без перезагрузки страницы. 
2. Серверная часть: 
а) скрипты и программы, которые генерируют контент для клиентской части. Обращение к ним происходит по адресам с передачей необходимых параметров; 
б) база данных; 
в) статические файлы. 
3. Внешние системы и сервисы, с которыми происходит взаимодействие. 

В учебном пособии сначала дается теоретическая часть, а затем посредством несложных заданий предлагается изучить основные аспекты 
создания веб-сайта и применить полученные знания при создании  
собственной веб-программы, реализовав отсутствующий в CMS модуль. Также в учебном пособии даны примеры решения часто встречающихся задач. 
 
 
ЯЗЫКИ РАЗРАБОТКИ ВЕБ-ПРИЛОЖЕНИЙ  
 
Рассмотрим более подробно блоки веб-приложения и используемые языки программирования. 
 

 

Браузер 
 
 
 
 

Веб-сервер 
 
 
 
 

База данных 
 
 
 
 
 

SQL 
Backend 
PHP, Java, 
.NET, 
python, … 

Frontend: 
HTML, 
JavaScript, 
CSS, … 

 
Рис. 1. Основные блоки веб-приложения 

На рис. 1 схематично изображены блоки веб-приложения и их 
названия, а также языки программирования. 

FRONTEND 

Frontend представляет из себя ту часть программы, которая непосредственно взаимодействует с пользователем. Для веб-приложения 
эта часть реализуется на HTML, CSS, JavaScript. Также возможны 
включения других технологий (WebGL и т. д.), но они используются 
намного реже. 
Для Frontend языков средой запуска (неким аналогом операционной системы) является браузер. Поэтому frontend часть вебприложения работает до перезагрузки страницы (или перехода на новую страницу) либо до закрытия вкладки браузера. 
 

При разработке frontend части сайта используются: 
 HTML. Весь код в веб-приложении в итоге порождает HTML. 
Знание HTML обязательно для веб-разработчика; 
 CSS. Сам по себе HTML довольно прост. Он реализует основные 
стили, но для создания хорошего интерфейса разработчики должны 
иметь опыт работы с CSS. Каскадные таблицы стилей предоставляют 
цвета, кнопки, подсветку и многое другое, что можно использовать для 
улучшения веб-страниц. Для облегчения работы с CSS придуманы такие языки, как Sass и LESS, также известные, как прекомпиляторы 
CSS. Они используются для написания более эффективного и управляемого кода CSS; 
 JavaScript. JavaScript выполняется на компьютере пользователя. 
Перетаскивание, бесконечная прокрутка и видео, оживающее на вебстранице, могут быть запрограммированы с помощью JavaScript. Этот 
язык настолько популярен, что целые фреймворки построены исключительно для упрощения создания интерфейсов приложений. Такие 
фреймворки, как Angular, Ember, React и Backbone, используются для 
реализации сложных JavaScript-интерфейсов. 
Изначально JavaScript был исключительно frontend языком, и только недавно появился серверный JavaScript.  

BACKEND 

Backend разработка отвечает за вычисления, бизнес-логику, взаимодействие с базами данных и производительность. Большая часть кода, необходимая для работы приложения, будет выполняться на сервере. Внутренний код запускается на сервере, а клиенту (т. е. браузеру 
или приложению на JavaScript) отправляется HTML, PDF, либо любой 
другой набор данных, сгенерированных серверной программой.  
К backend языкам относятся следующие. 
 PHP. Один из самых популярных языков веб-разработки в мире. 
Благодаря простоте он завоевал множество поклонников, а его постоянное улучшение позволяет использовать его и дальше. Например, 
PHP версии 7 серьезно отличается от предыдущей версии и в плане 
возможностей, и в улучшении производительности. 
 Java и .NET – это платформы для разработки энтерпрайз приложений (банковский сектор и т. д.), когда требуется реализация всех 
компонентов в единой среде. 

 Ruby и Ruby on Rails – объектно-ориентированный язык и 
фреймворк для него. 
 Python – популярный язык для веб-разработки, в том числе для 
работы с большими объемами данных и BigData. 
 NodeJS, Go, Erlang – специализированные языки программирования для проектов с большим числом одновременных подключений. 
Также существуют другие языки веб-разработки. По сути, любой 
язык может использоваться в качестве backend части, однако лучше 
использовать специально предназначенные для веб-языки. 
 
 
 
СПЕЦИФИКА РАБОТЫ ВЕБ-ПРИЛОЖЕНИЙ 

ЗАПУСК И ЖИЗНЕННЫЙ ЦИКЛ  
СЕРВЕРНОЙ ВЕБ-ПРОГРАММЫ 
ХРАНЕНИЕ И ПЕРЕДАЧА ДАННЫХ  
ВО ВРЕМЯ ВИЗИТА ПОЛЬЗОВАТЕЛЯ 

До разработки веб-приложений и веб-сайтов вы, скорее всего, 
имели дело только с классическими однопользовательскими приложениями либо с многопользовательскими клиент-серверными приложениями. 
В случае однопользовательской программы, написанной, например, под Windows, в вашем распоряжении практически неограниченные ресурсы компьютера (оперативная память, процессорная мощность и время выполнения), возможность хранить информацию о пользователе, который работает в программе, и возможность хранить введенные пользователем (либо полученные программой) данные до момента завершения программы. 
В классическом клиент-серверном приложении ситуация очень похожа. В случае «толстого» клиента полученные клиентом данные обрабатываются на клиентской части, а в случае «тонкого» клиента – на 
сервере, при этом в классической схеме клиент-сервера  одна из частей 
системы работает постоянно. 
Стоит отметить, что при классической клиент-серверной архитектуре соединение между клиентом и сервером постоянно: устанавливается при старте программы и «держится», пока работа не завершена. 

Такая архитектура не позволяет обслуживать одновременно большое 
количество клиентов. 
В веб-приложении ситуация отличается. Рассмотрим упрощенную 
схему работы веб-программы. Как правило, веб-приложение с точки 
зрения backend части представляет собой сайт (рис. 2). 
 

 
Рис. 2. Упрощенная схема работы сайта 

1. При открытии страницы сайта браузер пользователя посылает 
запрос на веб-сервер с просьбой предоставить данные по запрошенному адресу. 
2. Веб-сервер определяет, что делать с данным запросом и кто его 
будет исполнять. Наиболее частые варианты: 
а) прямая отдача файла; 
б) редирект на другой адрес; 
в) запуск на выполнение программы на языке программирования и 
отдача клиенту результата выполнения программы. 
3. В случае, если страница требует выполнения, в ней может быть 
ряд взаимодействий – с базой данных, внешними сервисами, файлами 
и т. д. 
Открытие новой страницы в большинстве случаев порождает запуск нового процесса на сервере. После передачи данных процесс завершается, соединение закрывается. Открытие этой же страницы заново (перезагрузка страницы) приводит к запуску нового экземпляра 
программы и установке нового соединения.