Documentazione del flusso / iterazione dell'applicazione Web [chiuso]

Question

Quali artefatti / diagrammi utilizzano per documentare il flusso di un'applicazione Web tenendo conto dei collegamenti tra le pagine statiche e in che modo i componenti di visualizzazione dinamica (moduli html, JSP, Ajax, ecc.) interagiscono con i componenti lato server (Servlet, azioni Struts , eccetera)? Usa i diagrammi UML?

Answer 1

Abbiamo utilizzato diagrammi di classe UML usando una variante del saggio di Conallen Modellazione di applicazioni Web con UML . Scoprirai che questo saggio si è evoluto in diverse incarnazioni intorno alla rete ed è persino diventato un libro Building-Web-Applications-UML-2nd .

Il mio tour di 2 centesimi dell'approccio che abbiamo usato:

Seguendo l'articolo di Conallen, abbiamo definito una nuova entità UML (stereotipi) per rappresentare una pagina Web o parte di una pagina in modo da poter distinguere il codice lato server (ad esempio servlet Java o JSP] dal codice HTML / lato client) javascript / AJAX che ha generato, ad esempio:

• [pagina web]
• [barra di navigazione]
• [page-content]
• [intestazione]
• [piè di pagina]

Ci sono state nuove associazioni come:

• [build] - mette in relazione il codice lato server con la pagina Web o il frammento di pagina generato
• [link apparente] - utilizzato tra le pagine client sul diagramma della Sitemap
• [link]: collegamento URL, ad es. richiesta GET
• [invia] - modulo invia di nuovo al server, ovvero richiesta POST
• [reindirizzamento client] - reindirizzamento lato client
• [reindirizzamento server] - duh

Infine, alcuni nuovi diagrammi (principalmente solo specializzazioni di diagrammi di classe) come:

• [sitemap] - > come un diagramma di classe: mostra le relazioni statiche ([link apparente] tra le [pagine web] dal punto di vista dell'utente
• [generazione di pagine] - > come un diagramma di classe: mostra le classi staticamente correlate alla visualizzazione di una pagina Web specifica: quale codice l'ha generato, quale codice gestisce l'invio della posta
• [composizione della pagina] - come un diagramma di classe - mostra le cose che compongono una determinata [pagina web]
• [diagrammi di sequenza] - L'unica altra modifica è stata che i diagrammi di sequenza ora possono includere entità lato client come attori.

Le buone notizie:

• abbiamo trovato le estensioni delle icone di Rational Rose necessarie per rendere i diagrammi quasi decenti.

Le cattive notizie:

• questo approccio ha funzionato molto: ora avevamo il doppio del numero di entità con cui modellare poiché ora modellavamo le entità sul lato client oltre alle classi sul lato server.

Leggi uno dei documenti di Conallen per le foto di ciò di cui sto parlando, ma come ho detto, non ha seguito il suo approccio rigorosamente - abbiamo preso solo i pezzi di cui avevamo bisogno. Spero che questo aiuti.

Answer 2

Ho usato diagrammi di stato UML per documentare la navigazione della pagina per le app Web in passato.

Answer 3

Consiglio di adottare l'approccio 37signals allo sviluppo di applicazioni.

Ogni pagina deve avere uno scopo. Concentrati prima su quello scopo e progetta tutto il resto.

Processo:

• disegna le parti principali con un sharpie e carta
• Voce di elenco
• ignora i dettagli all'inizio (si limitano a intromettersi)
• crea qualcosa di reale il più presto possibile (es. crea alcuni file html con link che vanno ad altre pagine per mostrare come scorrerà l'applicazione
• una volta impostato il flusso del sito, quindi aggiungere i componenti di progettazione e iniziare la programmazione

È molto più facile aggiungere la programmazione a qualcosa che è già stato progettato e pensato rispetto alla progettazione di un'app per aggirare la programmazione esistente (che nella maggior parte dei casi richiede la riscrittura del codice per adattarsi ai problemi di progettazione / flusso che sono stati persi nel inizio).

Answer 4

I casi d'uso come parte dei diagrammi di attività sono utilizzati da alcuni dei miei colleghi, ma questo è utile forse per una panoramica di navigazione statica di alto livello.

Sto per sviluppare DSL personalizzato, che assomiglierà al formato dello scenario BDD usato in Cucumber con Webrat, IMHO tali scenari contengono informazioni sufficienti per creare modelli di pagine web e di interazione.