логотип PurpleSchool
  • Бесплатно
      Карта развитияОсновы разработкиCSS Flexbox
    • Новостные рассылкиИконка стрелки
    • База знанийИконка стрелки
    • Карьерные пути
      • Frontend React разработчик
      • Frontend Vue разработчик
      • Backend разработчик Node.js
      • Fullstack разработчик React / Node.js
      • Mobile разработчик React Native
      • Backend разработчик Golang
      • Devops инженер
    • О нас
      • Отзывы
      • Реферальная программа
      • О компании
      • Контакты
    • Иконка открытия меню
      • Сообщество
      • PurpleПлюс
      • AI тренажёр
      • Проекты
    логотип PurpleSchool
    ютуб иконка
    Telegram иконка
    VK иконка
    Курсы
    ГлавнаяКаталог курсовFrontendBackendFullstack
    Практика
    КарьераПроектыPurpleПлюс
    Материалы
    БлогБаза знаний
    Документы
    Договор офертаПолитика конфиденциальностиПроверка сертификатаМиграция курсовРеферальная программа
    Реквизиты
    ИП Ларичев Антон АндреевичИНН 773373765379contact@purpleschool.ru

    PurpleSchool © 2020 -2025 Все права защищены

  • Курсы
    Иконка слояПерейти в каталог курсов
    • FrontendИконка стрелки
    • BackendИконка стрелки
    • DevOpsИконка стрелки
    • MobileИконка стрелки
    • ТестированиеИконка стрелки
    • Soft-skillsИконка стрелки
    • ДизайнИконка стрелки
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • HTML и CSS
      • CSS Flexbox
      • Основы JavaScript
      • Продвинутый JavaScript
      • TypeScript с нуля
      • Neovim
    • Картинка группы React

      React


      • React и Redux Toolkit
      • Zustand
      • Next.js - с нуля
      • Feature-Sliced Design
    • Картинка группы Vue.js

      Vue.js


      • Vue 3 и Pinia
      • Nuxt
      • Feature-Sliced Design
    • Картинка группы Angular

      Angular


      • Angular 19 Иконка курсаСкоро!
    • Картинка группы Node.js

      Node.js


      • Основы Git
      • Основы JavaScript
      • Telegraf.js Иконка курсаСкоро!
      • Продвинутый JavaScript
      • TypeScript с нуля
      • Node.js с нуля
      • Nest.js с нуля
    • Картинка группы Golang

      Golang


      • Основы Git
      • Основы Golang
      • Продвинутый Golang
      • Golang - Templ Fiber HTMX
    • Картинка группы C#

      C#


      • Основы C#
    • Картинка группы Python

      Python


      • Основы Python
      • Продвинутый Python
    • Картинка группы PHP

      PHP


      • Основы PHP Иконка курсаСкоро!
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Docker и Ansible
      • Kubernetes и Helm
      • Микросервисы
      • Neovim
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • Основы Linux
      • Bash скрипты
      • Docker и Ansible
      • Kubernetes и Helm
      • Микросервисы
      • Neovim
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • Neovim
    • Картинка группы React Native

      React Native


      • HTML и CSS
      • Основы JavaScript
      • Продвинутый JavaScript
      • TypeScript с нуля
      • React и Redux Toolkit
      • React Native и Expo Router
    • Картинка группы Flutter

      Flutter


      • Основы Flutter Иконка курсаСкоро!
    • Картинка группы Swift

      Swift


      • Основы Swift и iOS
    • Картинка группы Общее

      Общее


      • Продвинутое тестирование Иконка курсаСкоро!
      • Основы тестирования ПО
    • Картинка группы Общее

      Общее


      • Собеседование
      • Современный Agile
    • Картинка группы Figma

      Figma


      • Основы дизайна
  • логотип PurpleSchool
    • Сообщество
    • PurpleПлюс
    • AI тренажёр
    • Проекты
    Главная
    Сообщество
    Правильная постановка задач

    Правильная постановка задач

    Аватар автора Правильная постановка задач

    Антон Ларичев

    Иконка календаря25 марта 2024
    УправлениеjuniorИконка уровня junior
    Картинка поста Правильная постановка задач

    Сегодня хочу раскрыть тему правильной постановки задач, чтобы потом результат работы разработчика был тем, что вы ожидаете. Пост мне навеяло обсуждение в нашем Telegram чате. Начнём.

    Проблема

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

    • Какую библиотеку использовать? В проекте уже есть что-то или надо тащить новую? Или вообще без сторонней библиотеки?
    • Как отображать ошибки? Есть макеты или уже всё зашито в компоненты?
    • Как должна вести себя форма, показывать ошибки после снятия фокуса с поля или после отправки формы?
    • Сделана ли валидация на backend или там тоже надо вносить изменения?
    • Нужно ли проверить форму на главной странице и там тоже добавить валидацию?

    Если вы заранее не проговорите все эти вопросы, то можете получить очень неожиданный результат.

    Хотелось: Использование библиотеки react-hook-form и макетов, которые подготовил дизайнер.

    Результат: Самописный модуль валидации с border: red на каждом компоненте.

    Весь код можно выкидывать, как и время разработчика. Как же быть?

    Решение

    Мы у себя в компании выработали следующий формат задачи, который сразу позволит не забыть описать все вопросы. Этот шаблон автоматически применяется при создании новой задачи и имеет 4 блока. При этом он составляется на планировании со всеми участниками встречи.

    Описание

    Краткое описание задачи на языке бизнеса, которое сделано в виде user story с упоминанием начального и конечного результата.

    Макеты

    Приложены все макеты к задаче и на них сделаны отметки с пояснениями и состояниями.

    Изменение архитектуры

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

    Изменение данных

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

    Пример

    Теперь давайте посмотрим на пример описания задачи выше по данном шаблону:

    1. Описание - На странице /contact необходимо сделать валидацию формы отправки контактных данных, сделав обязательными поля: имя и телефон и проверят формат телефона по шаблону +7 (000) 000-00-00. Ошибки должны отображаться после нажатия кнопки "Отправить" в форме.
    2. Макеты - Ссылка на макеты, где выделены состояния ошибок в форме и маски.
    3. Изменение архитектуры - Необходимо добавить библиотеку react-hook-form для валидацию форм. На странице Контакты, вынести форму в отдельный компонент. Состояния ошибок добавить в компоненты в /shared. На backend вся валидация уже реализована.
    4. Изменение данных - На backend добавилось новое поле - utm_campaign, которое надо передать взяв из query параметром.

    Итог

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

    Иконка глаза1 550

    Комментарии

    0

    Постройте личный план изучения Основы разработки до уровня Middle — бесплатно!

    Основы разработки — часть карты развития Frontend, Backend, Mobile

    • step100+ шагов развития
    • lessons30 бесплатных лекций
    • lessons300 бонусных рублей на счет

    Бесплатные лекции

    Лучшие курсы по теме

    изображение курса

    Основы Git

    Антон Ларичев
    AI-тренажеры
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.9
    3 999 ₽ 6 990 ₽
    Подробнее
    изображение курса

    HTML и CSS

    Антон Ларичев
    AI-тренажеры
    Практика в студии
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.9
    3 999 ₽ 6 990 ₽
    Подробнее
    изображение курса

    CSS Flexbox

    Антон Ларичев
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.9
    бесплатно
    Подробнее
    Иконка чипа+4