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

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

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