Веб-разработка

В крупных организациях и бизнесе команду веб-разработки могут составлять сотни сотрудников (веб-разработчиков), работающих по стандартным методологиям, таким как Agile-методологии^[1]. В небольших компаниях обязанности по разработке могут выполнять один постоянный или контрактный специалист, или совмещённо — например, графический дизайнер или специалист по информационным системам. Веб-разработка часто носит междисциплинарный характер. Существуют три основных специализации: front-end-разработчик (интерфейсы в браузере пользователя), back-end-разработчик (серверная часть), и full-stack-разработчик^[2].^[3] С коммерциализацией веба индустрия веб-разработки активно развивается и является одной из наиболее массовых и востребованных технологических областей.

Среди специалистов по вебу «веб-разработка» обычно означает основные недизайнерские аспекты создания сайтов: написание разметки и кодирование^[4]. Для облегчения управления содержимым веб-разработчики могут использовать системы управления контентом (CMS), что позволяет вносить изменения без глубоких технических знаний.

Основная цель ранней разработки веба заключалась в автоматизации обмена информацией между учёными, связанными с различными институтами и международными организациями. Для этого в 1993 году был создан формат HTML^[5].

Web 1.0 принято считать первым этапом, на котором пользователи могли лишь просматривать материалы и предоставлять ограниченную информацию^[6]. Ключевыми протоколами web 1.0 были HTTP, HTML и URI^[7].

Термин Web 2.0 был популяризирован Дейл Догерти, вице-президентом O’Reilly, в ходе конференции 2004 года. Он обозначил переход к акценту на интерактивность пользовательской среды^[8].^[9]

Web 2.0 характеризуется расширенными возможностями вовлечения, акцентом на коммуникацию и коллаборацию. Эта парадигма превратила статичный, только для чтения Web 1.0 в динамичную сеть для обмена пользовательским контентом — часто её описывают как среду «чтения-записи» онлайн^[6].

В рамках Web 2.0 пользователи получили возможность публиковать музыку, изображения, видео и другие цифровые активы^[10]. В качестве технологической основы такой архитектуры используются стандартизированные теги XML, что обеспечивает интеграцию и обмен данными между разными платформами и онлайн-базами данных^[6].

Web 3.0 — третье и современное поколение сети, появившееся в 2014 году. Ключевые черты: интеграция метаданных, более точная персонализированная информация, улучшенный опыт пользователя с учётом истории, интересов и предпочтений.

Web 3.0 стремится превратить Всемирную паутину в структурированную базу данных, расширить функциональность поиска, сделать навигацию адаптивной, а данные связными и эффективными для пользователя^[6]

Иногда эту концепцию также называют семантической паутиной.^[11].

Первые сайты представляли собой простые HTML-страницы. Позднее были добавлены CSS для оформления и JavaScript для интерактивности: это позволило превратить статические ресурсы в динамические и отзывчивые приложения. В дальнейшем появились сложные веб-приложения с богатыми функциями.

• Статические HTML-страницы (1990-е)
• Введение CSS (конец 1990-х)^[12]
• JavaScript и динамический HTML (1990-е — начало 2000-х)^[13][14]
• AJAX (1998)
• Расцвет CMS (середина 2000-х)
• Мобильная веб-разработка (конец 2000-х — 2010-е)
• Одностраничные приложения и front-end фреймворки (2010-е)
• Серверный JavaScript (2010-е)
• Микросервисы и разработка на основе API (2010-е — наст.время)
• Прогрессивные веб-приложения (2010-е — наст.время)
• Архитектура JAMstack (2010-е — наст.время)
• WebAssembly (2010-е — наст.время)
• Бессерверные вычисления (2010-е — наст.время)
• Интеграция ИИ и машинного обучения (2010-е — наст.время)

Будущее веб-разработки будет определяться развитием браузеров, сетевой инфраструктуры, стандартов Интернет-протоколов, методов инженерии программного обеспечения и актуальными трендами^[7].

Жизненный цикл веб-разработки описывает последовательные этапы создания сайтов и веб-приложений, обеспечивая структурированный и оптимальный процесс.

Типичный процесс веб-разработки делится на 7 этапов.

Дебра Хоумкрафт и Джон Кэрролл предложили методологию, согласно которой процесс делится на чёткие шаги с акцентом на формирование стратегии, уточнение целей и анализ возможностей^[15].

На этом этапе разрабатывается стратегия сайта, формируются задачи и анализируется их реализуемость. Работа включает:

• Разработка веб-стратегии
• Определение целей
• Анализ задач

Детальный анализ разбивается на следующие компоненты:

• Технологический анализ: определение нужных технологий и инструментов.
• Информационный анализ: определение потребностей в статической и динамической информации.
• Анализ навыков: какие компетенции требуются.
• Анализ пользовательской аудитории: описание профильных категорий посетителей.
• Анализ затрат: оценка стоимости разработки либо определение того, что возможно при горизонте бюджета.
• Анализ рисков: определение возможных серьёзных угроз для проекта.

Все уточнённые цели документируются. Недостижимые на текущем этапе задачи заносятся в «лист желаний» для последующих циклов^[15].

На этапе планирования важна вовлечённость разработчиков для выбора оптимальной архитектуры и технологического стека. Также определяется совокупная стоимость поддержки веб-сайта.

Ключевые задачи:

• Создание карты сайта
• Проработка прототипа
• Выбор технологического стека

После анализа формируется структура сайта, архитектура данных и скриптов. Методология подразумевает итерации для учёта роста и изменений. Размеренная проверка макетов и проектной документации проводится с опорой на первоначальные цели: любые несоответствующие задачи переносятся на «лист желаний»^[15].

Ключевые задачи:

• Макеты страниц
• Рецензирование
• Согласование

Здесь происходит подготовка текстов, слоганов, форматирование для читабельности и редактирование — задача этапа заключается в установлении коммуникации с аудиторией и формировании имиджа ресурса. Важно постоянно обновлять и совершенствовать контент в процессе всей разработки.

На ключевой стадии создаётся основной функционал, элементы дизайна интегрируются в полноценный сайт.

Работа начинается с главной страницы, затем строятся внутренние разделы и выстраивается навигация.

Во время разработки внедряются системы управления контентом, формы обратной связи и корзины покупок (для e-commerce).

Код сайта интегрируется на выбранный веб-сервер, налаживаются подключения к базам данных.

Тестирование веб-проектов обычно сложнее, чем для обычных ИС, из-за разнообразных пользовательских и аппаратных сред. Проводятся тесты на разных устройствах и браузерах. После одобрения ресурса дизайнером происходит запуск сайта. Перед публикацией отдел контроля качества тестирует работоспособность, совместимость и производительность.

Детальное тестирование включает интеграционные, нагрузочные, масштабируемости, кроссбраузерную проверку и т. д. Окончательный релиз производится после загрузки на сервер.

Ключевые действия:

• Проверка битых ссылок
• Использование валидаторов
• Оценка в разных браузерах

Жизненный цикл продолжается и после публикации. Сайты требуют регулярного обслуживания, обновления материалов, корректировки внешних и внутренних ссылок, изменений по обратной связи пользователей.

Дебра Хоумкрафт и Джон Кэрролл анализировали ряд классических методов веб-разработки:^[15]

• Последовательная (Waterfall): Последовательная модель подразумевает строгое поэтапное движение с минимальной обратной связью. Недостаток — негибкость по сравнению с многошаговой и динамичной природой web-проектов^[15].
• Метод структурного анализа и проектирования (SSADM): SSADM широко применяется для анализа и проектирования ИС, преимущественно на этапах анализа и проектирования.
• Прототипирование: Прототипирование — ранняя визуализация и тестирование ключевых функций продукта, быстрая обратная связь пользователей и разработчиков.
• Ускоренная разработка приложений (Rapid Application Development): Rapid Application Development, RAD — гибкое, быстрое создание ИС с акцентом на итерационное прототипирование и участие пользователя.
• Инкрементное прототипирование: Комбинирует принципы прототипирования и итерации — продукт развивается поэтапно с доработкой прототипов.

Для понимания процессов необходим базовый уровень знаний о различиях клиентской и серверной частей. Цель клиентской разработки — создание интерфейса и визуальных компонентов, с которыми работает пользователь. Back-end-разработка ответственна за обработку данных, работу серверной логики и бизнес-процессов. Эффективная разработка требует тесной коллаборации между инженерами разных направлений.

Front-end-разработка — проектирование и реализация интерфейса пользователя (UI) и пользовательского опыта (UX) веб-приложений. Используются такие технологии, как:

Три основные технологии клиентской разработки:

• HTML (язык гипертекстовой разметки): HTML определяет структуру и организацию страниц.
• CSS (каскадные таблицы стилей): CSS отвечает за оформление и макет элементов.
• JavaScript: Позволяет реализовать интерактивность. Современные front-end фреймворки (React, Angular, Vue.js и др.) основаны на расширенных возможностях JavaScript.

Проектирование пользовательского опыта направлено на создание интуитивных, доступных и удобных интерфейсов. Включает изучение поведения пользователя, юзабилити-тесты, прототипирование, а также применение базовых принципов дизайна. Популярные инструменты для прототипирования UI:

• Sketch
• Moqups
• Figma
• UXPin
• MockFlow
• Justinmind
• Uizard

Важное направление — веб-доступность (Web Accessibility), то есть создание цифрового контента, удобного для пользователей с различными потребностями в соответствии со стандартами WCAG, описание изображений, гибкую работу с интерфейсом.

Современные сайты разрабатываются с учётом отображения и функционирования на разных устройствах и экранах (responsive design) — через CSS media-запросы и плавающие сетки.

Библиотеки управления состоянием (например, Redux для React, Vuex для Vue.js) обеспечивают согласованность данных в крупных приложениях.

Back-end-разработка включает серверную логику, работу с базами данных, обработку запросов пользователей и прочее.

Серверы и облачные экземпляры — ядро инфраструктуры, предоставляющее виртуализацию, масштабируемость и экономическую эффективность.

Управление базами данных — основы хранения, обработки и структурирования данных. Различают следующие типы:

• Реляционные: используют таблицы. Примеры: MySQL, PostgreSQL
• NoSQL: для неструктурированных/полуструктурированных данных. Включают:

 — документо-ориентированные (MongoDB, CouchDB)

 — ключ-значение (Redis, DynamoDB)

 — столбцовые (Cassandra, HBase)

 — графовые (Neo4j, Amazon Neptune)

• В памяти: in-memory базы для быстрой обработки (Redis, Memcached)
• Временных рядов: InfluxDB, OpenTSDB
• NewSQL: с масштабируемостью NoSQL и поддержкой ACID (Google Spanner, CockroachDB)
• Объектно-ориентированные: (db4o, ObjectDB)

Выбор базы данных зависит от природы задач, требований к производительности и объёма данных.

Интерфейсы программирования приложений обеспечивают обмен данными и взаимодействие между сервисами и программами.

• Наиболее распространены RESTful API, GraphQL и др.

Основные типы API:

• Веб-API: работают по HTTP; например, REST.
• Библиотечные API: предоставляют функции для внутреннего использования в коде.
• API операционных систем: взаимодействие с ОС (файловая система, оборудование и др.).

Языки программирования, выполняемые на сервере, обрабатывают динамику, операции с данными, построение HTML и т. п. Популярные:

1. PHP
2. Python (фреймворки Django, Flask)
3. Ruby (фреймворк Ruby on Rails)
4. Java (фреймворк Spring)
5. Node.js (JavaScript на сервере)
6. C# (среда .NET)
7. ASP.NET
8. Go (Golang)
9. Perl
10. Swift
11. Lua

Важным аспектом является защита от уязвимостей (инъекции SQL, XSS, CSRF), внедрение механизмов аутентификации и авторизации.

Включает фрагментарные и интеграционные тесты, автоматизацию CI/CD, работу по обнаружению и исправлению ошибок.

• Модульное тестирование
• Интеграционное тестирование
• Непрерывная интеграция и доставка (CI/CD)

Full-stack охватывает разработку всего стека приложения (и frontend, и backend, базы, инфраструктура). Разработчик full-stack имеет опыт как в клиентских, так и серверных технологиях.

• Популярные технологии: MEAN (MongoDB, Express.js, Angular, Node.js), MERN (MongoDB, Express.js, React, Node.js).

К эффективным инструментам относят:

1. Интегрированные среды разработки (IDE): Visual Studio Code, Atom, Sublime Text с поддержкой подсветки кода, автодополнения и контроля версий.
2. Система управления версиями: Git
3. Инструменты для совместной работы: Slack, Jira, GitHub и др.

Безопасность необходима для защиты данных и предотвращения кибератак. Ключевые меры:

• Типовые угрозы: инъекции SQL, XSS, CSRF.
• Безопасное программирование: валидация пользовательского ввода, корректная обработка данных, защита конфиденциальности.
• Аутентификация и авторизация: внедрение надёжных механизмов (OAuth, JWT).

Agile — набор принципов, где в приоритете гибкость, коллаборация с заказчиком и быстрое реагирование на изменения. Основные ценности:

• Люди и взаимодействие важнее процессов и инструментов
• Рабочий продукт важнее исчерпывающей документации
• Сотрудничество с клиентом важнее согласования условий контракта
• Открытость к изменениям важнее следования первоначальному плану

1. Инкрементальная разработка с постоянными доработками.
2. Использование фреймворков Scrum и Канбан для управления задачами.
3. Кросс-функциональные команды.
4. Сотрудничество с клиентом на всех стадиях.
5. Гибкость в изменениях и требуемых функциях даже на поздних этапах.
6. Описание требований через пользовательские истории и поддержку бэклога задач.
7. Внедрение систем CI/CD для автоматизации интеграции и доставки обновлений.