Dokumentieren Web Application Flow / Iteraction [geschlossen]

Question

Welche Artefakte / Diagramme verwendet den Fluss von einer Web-Anwendung zu dokumentieren, unter Berücksichtigung der Verbindungen zwischen dem statischen Seiten und wie dynamischer Ansicht Komponenten (HTML-Formularen, JSP, Ajax usw.) interagieren mit serverseitigen Komponenten (Servlets, Struts Aktionen , usw)? Verwenden Sie UML-Diagramme?

Answer 1

Wir verwenden UML-Klassendiagramme, die eine Variation von Conallen Essay mit Modellierung Web Application Design mit UML . Sie finden diese Essay finden hat sich zu verschiedenen Inkarnationen um das Netz und hat sogar ein Buch Gebäude-Web-Applications-UML-2. werden.

Meine 2-Cent-Tour durch den Ansatz, den wir verwendet:

Conallen Papier Nach definierten wir eine neue UML Entitäten (Stereotypen), um eine Web-Seite oder einen Abschnitt einer Seite darzustellen, so dass wir konnten den serverseitigen Code (zB Java-Servlet oder JSP] von der Client-Seite HTML unterschieden / JavaScript / AJAX, dass es erzeugt. Zum Beispiel:

• [Webseite]
• [nav bar]
• [page-content]
• [header]
• [Fußzeile]

Es gab neue associationss wie:

• [baut] - bezieht serverseitigen Code auf der Web-Seite oder Seitenfragment es erzeugt
• [scheinbare-link] - zwischen Client Seiten Sitemap Diagramm verwendet
• [link] - URL-Link, das heißt GET Anfrage
• [trägt] - Form Post zurück an den Server, das heißt POST-Anfrage
• [Client-Umleitung] - clientseitige Umleitung
• [Server-Umleitung] - duh

Schließlich sind einige neue Diagramme (meist nur Spezialisierungen von Klassendiagrammen) wie zum Beispiel:

• [Sitemap] -> wie ein Klassendiagramm - zeigt statische Beziehungen ([scheinbare-link] s) zwischen [Webseite] s aus Benutzersicht
• [Seite Generation] -> wie ein Klassendiagramm - die Klassen zeigt statisch auf eine Anzeige einer bestimmten Webseite bezogen werden: Welche Code generiert es, was Code behandelt die Post Vorlage
• [page-Zusammensetzung] - wie ein Klassendiagramm - zeigt die Dinge, die eine bestimmte [web-Seite]
Make-up
• [Sequenzdiagramme] - Die einzige andere Änderung war, dass die Sequenzdiagramme nun clientseitigen Einrichtungen als Akteure könnten
.

Die gute Nachricht:

• fanden wir Rational Rose Symbol Erweiterungen mussten wir die Diagramme sehen halbwegs machen.

Die schlechte Nachricht:

• dieser Ansatz viel Arbeit wurde -. Wir hatten jetzt doppelt so viele Einheiten mit modellieren, da wir jetzt die clientseitigen Einheiten zusätzlich zu den serverseitigen Klassen wurden modelliert

Lesen Sie eines der Conallen Papiere für Bilder von dem, was ich rede, aber wie gesagt, nicht folgen seinen Ansatz streng - wir haben nur die Stücke, die wir brauchten. Hoffe, das hilft.

Answer 2

verwendet I UML-Zustandsdiagramme zur Dokumentation Seitennavigation für Web-Anwendungen in der Vergangenheit.

Answer 3

Ich empfehle den 37signals Ansatz zur Anwendung Entwicklung.

Jede Seite muss Zweck haben. Konzentrieren Sie sich auf diesem Zweck erste und Design alles andere um ihn herum.

Prozess:

• die Hauptteile mit einem Sharpie und Papier
• Liste item
• ignorieren die Details früh (sie in die Quere kommen nur)
• schafft etwas Wirkliches so schnell wie möglich (dh. Ein paar HTML-Dateien mit Links erstellen, die zu anderen Seiten gehen zu zeigen, wie die Anwendung fließt
• , sobald die Strömung des Standortes gesetzt ist, dann die Design-Komponenten hinzufügen, und starten Sie die Programmierung

Es ist viel einfacher Programmierung, um etwas hinzuzufügen, die bereits entwickelt wurde und durchdacht vs eine App Gestaltung vorhandenen Programmierung arbeiten um (was in den meisten Fällen Code zu entwerfen / Flußprobleme anzupassen neu geschrieben werden müssen, die bei der verpassten wurden Anfang).

Answer 4

Anwendungsfälle im Rahmen der Aktivitätsdiagramme von einigen meiner Kollegen verwendet werden, aber das ist gut vielleicht für einige statische hohe Navigationsübersicht.

Ich bin über benutzerdefinierte DSL zu entwickeln, das BDD-Szenario Format in Gurke mit webrat verwendet ähneln wird, IMHO solche Szenarien genügend Informationen erstellen interactionand Webseite Modelle enthalten.