Документирование потока / итерации веб-приложения [закрыто]

Question

Какие артефакты / диаграммы используются для документирования потока работы веб-приложения с учетом связей между статическими страницами и того, как компоненты динамического представления (html-формы, JSP, Ajax и т.д.) Взаимодействуют с серверными компонентами (сервлеты, действия Struts и т.д.)?Используете ли вы UML-диаграммы?

Answer 1

Мы использовали диаграммы классов UML, используя вариацию эссе Коналлена Моделирование дизайна веб-приложений с помощью UML.Вы обнаружите, что это эссе превратилось в различные воплощения по всей сети и даже превратился в книгу Создание-Веб-приложений-UML-2nd.

Моя двухцентовая экскурсия по подходу, который мы использовали:

Следуя статье Коналлена, мы определили новые сущности UML (stereotypes) для представления веб-страницы или части страницы, чтобы мы могли различать код на стороне сервера (напримерJava servlet или JSP] из клиентского HTML / javascript / AJAX, который он сгенерировал.Например:

• [веб-страница]
• [панель навигации]
• [содержание страницы]
• [заголовок]
• [нижний колонтитул]

Появились новые ассоциации, такие как:

• [сборки] - соотносит серверный код с веб-страницей или фрагментом страницы, который он сгенерировал.
• [очевидная ссылка] - используется между клиентскими страницами на диаграмме sitemap
• [ссылка] - URL-ссылка, т.е.ПОЛУЧИТЬ запрос
• [отправляет] - форма отправки сообщения обратно на сервер, т.е.ОТПРАВИТЬ запрос
• [перенаправление клиента] - перенаправление на стороне клиента
• [перенаправление с сервера] - да

Наконец, некоторые новые диаграммы (в основном просто специализации диаграмм классов), такие как:

• [карта сайта] -> как диаграмма классов - показывает статические отношения ([очевидные ссылки]) между [веб-страницами] с точки зрения пользователя
• [генерация страницы] -> как диаграмма классов - показывает классы, статически связанные с отображением определенной веб-страницы:какой код сгенерировал его, какой код обрабатывает отправку post
• [композиция страницы] - подобно диаграмме классов - показывает элементы, составляющие данную [веб-страницу]
• [диаграммы последовательностей] - Единственным другим изменением было то, что диаграммы последовательностей теперь могли включать объекты на стороне клиента в качестве действующих лиц.

Хорошие новости:

• мы нашли расширения значков Rational Rose, необходимые нам для придания диаграммам хотя бы наполовину приличного вида.

Плохие новости:

• этот подход потребовал большой работы - теперь у нас было в два раза больше объектов для моделирования, поскольку теперь мы моделировали объекты на стороне клиента в дополнение к классам на стороне сервера.

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

Answer 2

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

Answer 3

Я рекомендую использовать подход 37signals к разработке приложений.

Каждая страница должна иметь цель.Сосредоточьтесь в первую очередь на этой цели и проектируйте все остальное вокруг нее.

Процесс:

• набросайте основные детали с помощью фломастер и бумага
• Элемент списка
• не обращайте внимания на детали на ранних стадиях (они просто мешают)
• создайте что-то реальное как можно скорее (т.е.создайте несколько html-файлов со ссылками, которые ведут на другие страницы, чтобы показать, как будет работать приложение
• как только поток работы сайта будет настроен, добавьте компоненты дизайна и приступайте к программированию

Гораздо проще добавить программирование к чему-то, что уже было разработано и продумано, чем разрабатывать приложение для работы с существующим программированием (что в большинстве случаев требует переписывания кода для адаптации к проблемам проектирования / потока, которые были пропущены в начале).

Answer 4

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

Я собираюсь разработать собственный DSL, который будет напоминать формат сценария BDD, используемый в Cucumber с Webrat, ИМХО такие сценарии содержат достаточно информации для создания моделей взаимодействия и веб-страниц.