На данном уровне наших знаний и навыков, добавляя новые функции к нашим приложениям, мы пробуем действовать по следующей схеме:

Продумывание функционала → Эскиз интерфейса, последовательность экранов → Описание функционала в интегральных тестах → Написание представлений → Написание модели и контроллера → Доводка дизайна, рюшечки

1. Продумывание функционала

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

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

2. Эскиз интерфейса, последовательность экранов

Когда мы поняли, что пользователь собирается делать с новым функционалом, рисуем последовательность экранов для каждого действия. Например, добавление заказа — это посещение страницы заказов, нажатие кнопки «Добавить заказ», заполнение полей заказа, нажатие кнопки «Создать заказ» и автоматический переход на страницу просмотра заказа для того, чтобы его можно было распечатать.

Я делаю эскиз каждой страницы маркером на листах А4. Качественный, без деталей. На данном этапе мне не важно, каким шрифтом будет набран заголовок страницы и где что будет расположено. Важно понять, что вообще будет на каждой странице.

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

3. Описание функционала в интегральных тестах

После этого мы описываем весь функционал в тестах для Кукумбера. Каждому действию соответствует сценарий — последовательность шагов, которые совершает пользователь. Что он где жмёт, что где вводит, какой результат видит на экране после всего этого. Сперва эти тесты, само собой, падают, так как никакой реализации пока ещё нет.

4. Написание представлений

Я начинаю написание вьюшек с функциональных тестов. Опять же, никаких деталей на данном этапе. Только то, что я хочу увидеть на странице. Тут мне очень помогают нарисованные эскизы.

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

5. Написание модели и контроллера

Макс тоже сперва пишет функциональные тесты. Он также руководствуется нашими рисунками и тем, что он видит в моих вьюшках.

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

Потом мы вместе добиваем интегральные тесты и, в принципе, приложение готово.

6. Доводка дизайна, рюшечки

Украшательство! Я придумываю формулировки, верстаю страницы приложения, выбираю шрифты и цвета для элементов. Новый CSS-код появляется в этот момент. Замечу, что новые элементы на страницах не появляется — преображаются старые.

Плюсы и минусы

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

Ещё здорово, что после всего этого приложение работает. Сразу! И если что-нибудь случиться, то мы об этом узнаем.

Плох же этот подход тем, что практически до самого конца работы над каким-то функционалом не видно, что вообще в конце концов получится. Разработка ведётся практически вслепую по эскизам на бумаге. Однако на 6-м этапе, когда «туман» рассеевается, будет можно приведено к нормальному виду.

Я занимаюсь 4 и 6-м этапами. Макс — пятым. Первые два продумываем вместе, третий с равной вероятностью делает один из нас. Чем проще функционал, тем проще держать в голове последовательность действий и иногда необходимость в тщательном продумывании и рисовании макетов отпадает. Всю схему целиком мы выполняем только для существенных частей приложения, которые пишем с нуля.