Понятие жизненного цикла разработки ПО известно многим. Он состоит из 6 этапов:
1. Исследование и анализ.
2. Планирование.
3. Проектирование.
4. Реализация.
5. Тестирование и интеграция.
6. Развертывание и обслуживание.
В статье мы рассмотрим, каким образом каждый из этих 6 этапов связан с веб-разработкой. Изучив материал, вы получите более полное представление о разных процессах, участвующих в создании сайта.
Исследование и анализ
Веб-разработка всегда начинается с исследования. Какие практики являются наилучшими для типа создаваемого сайта? Есть ли конкуренты и кто они? Какие современные тенденции можно применить в разработке?
На этом этапе мы собираем дополнительную информацию, которая пригодится при планировании. Отметим, что исследование и анализ не прекращаются на протяжении всего жизненного цикла разработки. При этом качество проведенных исследований перед написанием кода значительно влияет на долгосрочный успех проекта.
В число первоклассных инструментов для исследования и анализа входят:
— r/WebDev.
Кроме того, на этом этапе не обойтись без качественного документирования полученных результатов. Для этой цели подойдет Google Docs. Данный сервис позволяет нескольким людям одновременно работать с одним документом, что особенно актуально при совместном исследовании.
Планирование
На втором этапе процесса разработки мы начинаем планировать все составляющие проекта: тип сайта и его характеристики, количество обслуживаемых пользователей, целевая аудитория, наличие статического или динамического контента, используемые технологии.
Чем быстрее мы определимся по каждому пункту, тем раньше составим четкий стратегический план действий для разработчиков. Чем больше времени мы потратим на тщательное планирование проекта, тем меньше его уйдет на разработку.
При этом важно не просто мысленно сформулировать решения. Необходимо задокументировать всю информацию, придав ей структурированный вид, и обеспечить к ней доступ всем участникам проекта. Справиться с этой задачей помогают различные инструменты, например Trello.
С помощью Trello вы быстро и легко создаете доску управления проектом. Она предоставляет широкие возможности настройки в соответствии с поставленными целями. По сути, Trello не что иное, как простая канбан-доска.
Проектирование
На этом этапе уже известно, что именно вы создаете, кто ваша целевая аудитория и каков план действий по разработке самого сайта. А если вы отлично поработали на двух предыдущих этапах, то у вас уже есть четкое представление о цветовой гамме и макете будущего сайта.
Настало время свести воедино все знания и визуально представить конечный продукт. В целом, процесс проектирования состоит из 5 шагов.
1. Почувствуй покупателя: поставить себя на место покупателей, чтобы лучше понять их желания и ожидания.
2. Улови суть: определить, что именно они ищут.
3. Поймай идею: провести мозговой штурм идей по дизайну с учетом данных, полученных в процессе шага 1.
4. Создай прототип: реализовать ряд предложенных идей.
5. Протестируй: провести соответствующее тестирование и убедиться, что дизайн отвечает требованиям. После этого вернуться к шагу 1.
Честно говоря, я не силен в веб-дизайне и предпочитаю командную работу со специалистами в этой области. Тем не менее, исходя из личного опыта проектирования сайтов, могу порекомендовать такие инструменты, как Adobe XD и Figma, а для создания цветовой гаммы — Coolors.
Реализация
На предыдущем этапе мы определились, как должен выглядеть сайт, и теперь самое время заняться кодом. В зависимости от размера сайта именно здесь могут начаться сложности. Не убирайте далеко доску Trellо, так как она нам понадобится.
Реализация дизайна сайта начинается с создания репозитория для отслеживания изменений в коде. Если вы работаете над небольшим одностраничным проектом и четко знаете, что нужно делать, то вполне можно обойтись без контроля версий. Но если дело касается более крупных и постоянно изменяющихся проектов, то он просто необходим.
Создав репозиторий, приступаем к написанию кода, но сначала обратимся к доске проекта. Для управления разработкой я обычно размещаю карточки с заданиями по трем вкладкам: “Выполнить”, “В работе” и “Завершено”. Их можно дополнить еще двумя: “Ревью кода” и “Тестирование”.
Организовав доску, заполняем ее задачами. Далее выбираем одну из них и прикрепляем во вкладку “В работе”, после чего пишем код.
Эти предварительные этапы разработки играют очень важную роль в создании больших проектов. Вы должны быть уверены, что реализация осуществляется в соответствии с установленным порядком. Иначе велика вероятность застрять в тоннах запутанного и нефункционального кода.
Рекомендую начать не с контента, а со стилей. Создайте правила стилизации для заголовка, футера (нижней части сайта), боковой панели (если нужно), основного и дополнительных цветов, элементов CTA и т. д. Если вы хорошо усвоите эти правила до наполнения сайта контентом, то сможете создать для него более эффективный и менее избыточный код.
Занимаясь разработкой, следите за тем, что вы правильно используете Git и ветви для отдельных функциональностей; регулярно вносите изменения, не накапливая их в один большой коммит; закрываете ветки, в которых уже нет необходимости. При этом не забывайте обновлять Trello. Застряли на каком-то задании и хотите вернуться к нему позже, зафиксируйте это на доске. Не допускайте попадания сообщений TODO в продакшн.
Процесс разработки сайта запущен. Система контроля версий Git сохраняет код, а вы тем временем отмечаете результаты работы на доске управления проектом.
Помимо уже рекомендованных инструментов хочется отметить важность еще одного из них. Залогом эффективной разработки является хороший редактор кода. Хотя при создании сайта нет особой необходимости в полноценной IDE, вы наверняка захотите познакомиться с инструментом, повышающем продуктивность работы. Для редактирования кода лично я использую Atom. Он известен как легко перепрограммируемый текстовый редактор, поскольку предоставляет широкие возможности настройки.
Тестирование и интеграция
Данный этап имеет важное значение для успешной разработки сайта или приложения. Вся проделанная до этого момента работа теряет смысл, если продукт функционирует не так, как задумывалось в интересах пользователей. Этап включает ряд аспектов фазы разработки, которые рассматриваются более целенаправленно. Придав форму глине, необходимо сгладить несовершенства.
Выделяют 4 ключевых вида тестирования приложения:
1. Функциональное тестирование.
2. Регрессионное тестирование.
3. Тестирование производительности.
4. Кросс-браузерное тестирование.
Каждый из них может быть автоматизирован. В конце раздела я назову программу для выполнения таких задач. Однако веб-разработчик должен уметь вручную проводить эти 4 вида тестов, поэтому остановимся более подробно на каждом из них.
Функциональное тестирование
Цель данного вида тестирования — убедиться, что различные функциональности сайта работают, как ожидалось, и никакие ошибки не помешают пользовательскому взаимодействию с ним.
Регрессионное тестирование
По сути, регрессионное тестирование повторяет функциональное. Его задача состоит в проверке адекватной работы определенных функциональностей сайта после обновления базы кода.
Тестирование производительности
Тесты производительности подтверждают, что сайт продолжает работу даже в периоды повышенного трафика. Стресс-тестирование определяет верхние пределы возможности сервера сайта по обработке трафика. Нагрузочное тестирование позволяет разработчику понять, как сайт реагирует на ожидаемую нагрузку.
Кросс-браузерное тестирование
Кросс-браузерное тестирование гарантирует, что сайт выглядит и работает одинаково во всех браузерах и на разноразмерных экранах. Если в Firefox с внешним видом сайта все в порядке, а в Chrome — нет, то вы автоматически лишаете себя большого количества потенциальных посетителей.
Помимо тестирования самого веб-приложения данный этап предусматривает “тестирование” веб-сервера. Если приложение на нем не запускается из-за конфликта с какой-либо системой, то все усилия были потрачены зря. Процесс интеграции как раз и обеспечивает совместную работу различных приложений.
Для тестирования веб-приложений в различных условиях рекомендую Selenium, который предоставляет набор соответствующих инструментов.
Развертывание и обслуживание
Быстро обобщим вышесказанное. Перед началом проекта по разработке сайта мы проводим исследование/анализ, выявляем лучшие практики и узнаем конкурентов.
Далее планируем дизайн и разработку сайта: определяем его целевую аудиторию, тип и применяемые технологии.
По мере готовности плана и результатов исследования/анализа приступаем к проектированию сайта на основе полученной информации. Определив ожидания потенциальных покупателей и набросав идеи, утверждаем дизайн в соответствии с замыслом.
После этого открываем редактор кода и приступаем к работе. Действуем методично, добиваясь создания эффективного кода без излишек.
Закончив разработку сайта, открываем Selenium и проводим тесты: функциональные, регрессионные, кросс-браузерные и на производительность. Затем возвращаемся к фазе разработки и подчищаем обнаруженные недочеты. Придав коду привлекательный вид, выполняем интеграционное тестирование. Оно позволяет убедиться, что веб-приложение работает на сервере без каких-либо конфликтов.
Итак, у нас есть работающее приложение, спроектированное и разработанное в соответствии с замыслом. Далее мы должны сделать его доступным для пользователей, иначе в нем нет никакого смыла. Для этого приступаем к развертыванию приложения. Данная тема выходит за рамки статьи, но сам процесс довольно простой. Кратко перечислим его этапы: получаем домен и хостинг, отправляем код на живой сервер и готово!
После этого остается еще один финальный и важный этап. Было бы здорово, если бы однажды разработав и развернув приложение, мы бы о нем и не вспоминали. К сожалению, это не так. Со временем все меняется: появляются новые функциональности, обновляются языки программирования и совершенствуются браузеры. Чтобы убедиться, что веб-приложение по-прежнему доступно, необходимо его обслуживать.
Как правило, обслуживание включает аспекты этапов разработки и тестирования жизненного цикла. При разработке новых функциональностей проводятся регрессионные тесты для обеспечения совместимости.
Заключение
Теперь вы знаете основные этапы жизненного цикла разработки, а также необходимые инструменты для этой цели. По каждому этапу можно сказать очень много, поэтому я рекомендую дополнительно о них почитать.
К счастью, большую часть цикла можно автоматизировать.
Читайте также:
- Как работает архитектурный паттерн «модель-вид-контроллер»
- Как повысить SEO-рейтинг сайта с помощью Next.JS
- Создание правильного чек-листа для инспекции кода
Читайте нас в Telegram, VK и Дзен
Перевод статьи Paul Burkart: The Web Development Life Cycle
