Documentation du flux / itération d'une application Web [fermé]

Question

Quels artefacts / diagrammes utilisent pour documenter le flux d'une application Web en tenant compte des liens entre les pages statiques et de la manière dont les composants de vue dynamique (formulaires HTML, JSP, Ajax, etc.) interagissent avec les composants côté serveur (actions Servlets, Struts) , etc)? Utilisez-vous des diagrammes UML?

Answer 1

Nous avons utilisé des diagrammes de classes UML en utilisant une variante de l'essai de Conallen Modélisation de la conception d'applications Web avec UML . . Vous constaterez que cet essai a évolué pour devenir différentes incarnations sur le réseau . et est même devenu un livre Créer-Web-Applications-UML-2nd .

Mon tour de deux centimes de l'approche que nous avons utilisée:

Suivant l’article de Conallen, nous avons défini de nouvelles entités UML (stéréotypes) pour représenter une page Web ou une partie de page afin de distinguer le code côté serveur (par exemple, le servlet Java ou le JSP) du code HTML côté client. javascript / AJAX généré, par exemple:

• [page Web]
• [barre de navigation]
• [contenu de la page]
• [en-tête]
• [footer]

De nouvelles associations telles que:

• [builds] - associe le code côté serveur à la page Web ou au fragment de page qu'il a généré
• [lien apparent] - utilisé entre les pages client du diagramme de sitemap
• [lien] - lien URL, c'est-à-dire demande GET
• [soumets] - retour de la forme au serveur, c'est-à-dire demande POST
• [client-redirect] - redirection côté client
• [redirection du serveur] - duh

Enfin, de nouveaux diagrammes (principalement des spécialisations de diagrammes de classes) tels que:

• [plan du site] - > comme un diagramme de classes - montre les relations statiques ([liens-apparentés] s) entre les [pages Web] du point de vue de l'utilisateur
• [génération de page] - > comme un diagramme de classes - affiche les classes liées statiquement à l'affichage d'une page Web spécifique: quel code l'a générée, quel code gère la post-soumission
• [page-composition] - comme un diagramme de classes - montre les éléments qui composent une [page Web] donnée
• [diagrammes de séquence] - Le seul autre changement concerne le fait que les diagrammes de séquence peuvent désormais inclure des entités côté client en tant qu'acteurs.

La bonne nouvelle:

• nous avons trouvé les extensions d'icône Rational Rose dont nous avions besoin pour donner aux diagrammes une apparence à moitié décente.

La mauvaise nouvelle:

• Cette approche a demandé beaucoup de travail. Nous avions désormais deux fois plus d’entités à modéliser puisque nous modélisions maintenant les entités côté client en plus des classes côté serveur.

Lisez l’un des papiers de Conallen pour des images de ce dont je parle, mais comme je l’ai dit, ne suivez pas son approche à la lettre - nous avons seulement pris les morceaux dont nous avions besoin. J'espère que cela vous aidera.

Answer 2

Dans le passé, j’avais utilisé des diagrammes d’état UML pour documenter la navigation dans les pages des applications Web.

Answer 3

Je recommande d'utiliser l'approche 37signals pour le développement d'applications.

Chaque page doit avoir un but. Concentrez-vous d'abord sur cet objectif et concevez tout le reste autour.

Processus:

• esquissez les parties principales avec un papier journal et papier
• Élément de liste
• ignorer les détails au tout début (ils ne font que se mettre en travers du chemin)
• créez quelque chose de réel dès que possible (c.-à-d. créez quelques fichiers html avec des liens menant vers d'autres pages pour indiquer le déroulement de l'application
• une fois que le flux du site est défini, ajoutez les composants de conception et démarrez la programmation

Il est beaucoup plus facile d’ajouter de la programmation à quelque chose qui a déjà été conçu et pensé par rapport à la conception d’une application qui s’articule autour de la programmation existante (ce qui nécessite dans la plupart des cas une réécriture du code afin de s’adapter aux problèmes de conception / de flux omis lors de la début).

Answer 4

Certains collègues de la mine utilisent des exemples d'utilisation dans le cadre de diagrammes d'activités, mais cela convient peut-être à une vue d'ensemble statique de la navigation de haut niveau.

Je suis sur le point de développer un DSL personnalisé, qui ressemblera au format de scénario BDD utilisé dans Cucumber with Webrat. De tels scénarios à mon humble avis contiennent suffisamment d'informations pour créer des modèles d'interaction et de page Web.