记录Web应用程序流程/交互

Question

考虑到静态页面之间的链接以及动态视图组件(html表单、JSP、Ajax等)与服务器端组件(Servlet、Struts操作等)的交互方式，使用哪些构件/图表来记录web应用程序的流程？使用UML图了吗？

Answer 1

我们使用了UML类图，使用了Conallen的文章Modeling Web Application Design with UML的一个变体。你会发现这篇文章已经演变成了different incarnations around the net，甚至成了一本书Building-Web-Applications-UML-2nd。

我对我们使用的方法的2美分之旅：

在Conallen的论文之后，我们定义了一个新的UML实体(构造型)来表示web页面或页面的一部分，这样我们就可以将服务器端代码(例如Java servlet或JSP)与它生成的客户端HTML/javascript/AJAX区分开来。例如：

• 网页
• nav web

出现了新的关联，例如：

request

• submits

• builds-将服务器端代码与web页面或页面片段关联起来-在网站地图上的客户端页面之间使用

• 链接- URL链接，即获取表单post返回到服务器，即POST request

• client-redirect - client-side redirect

• server-redirect - duh

最后，一些新的图表(大多数只是类图表的专门化)，例如：

• sitemap ->类似于类图-从用户的view
• page-generation图显示网页之间的静态关系(明显的链接)，类似于类图-显示与显示特定网页静态相关的类:哪些代码生成它，哪些代码处理发布submission
• page-composition -类似于类图-显示组成给定web-page
• sequence图的内容-其他唯一的变化是序列图现在可以包括客户端实体作为参与者。

好消息是：

我们找到了使图看起来像half-decent.所需的Rational Rose图标扩展

坏消息是：

• 这种方法需要大量的工作-我们现在有两倍多的实体要建模，因为我们现在除了对服务器端类进行建模外，还需要对客户端实体进行建模。

阅读Conallen的一篇论文，可以看到我正在谈论的图片，但正如我所说的，并没有严格遵循他的方法-我们只取了我们需要的部分。希望这能有所帮助。

Answer 2

过去，我使用UML状态图来记录web应用程序的页面导航。

Answer 3

我建议采用37signals的方法进行应用程序开发。

每一页都需要有目的。首先专注于这个目的，然后围绕它来设计其他一切。

进程：

• 在早期用sharpie and paper
• List item
• ignore the details勾勒出主要部分(他们只是在路上)
• 尽快创建一些真实的东西(即。创建几个html文件，其中包含指向其他页面的链接，以显示一旦设置了站点流程，应用程序将如何流向
• ，然后添加设计组件并开始编程

将编程添加到已经设计和思考好的东西中要容易得多，而不是设计一个绕过现有编程的应用程序(这在大多数情况下需要重写代码以适应设计/流程问题，这些问题在一开始就被遗漏了)。