在开发现代Web应用程序时，将GUI设计与服务器端开发分离的最佳实践是什么？

Question

我们目前正在开发一些Web应用程序，并让我们的设计人员将已签名的纸质原型转换为静态网页。除了在页面之间具有超链接之外，设计者还开始通过从静态json文件中获取数据来添加jquery调用以更新页面上的元素。一旦设计师完成并切换完成的网页，CSS和JavaScript文件;然后，服务器端开发人员编辑页面并使用对返回相同json数据结构的live json url的引用替换对本地静态json文档的引用。

我的问题： 什么是将GUI设计与serveride dev分离并减少集成时间和精力的有效方法？一些例子：

• 您是否让开发人员手动更改设计人员原型网页中的每个json引用？
• 您是否在某处添加了一个全局变量，以便在使用静态和动态数据之间轻松地来回切换设计人员的页面？
• 当网页从网络服务器运行或只是从某个文件夹提供时，您是否会让网页自我意识到？

Answer 1

这取决于您的应用程序需要管理多少状态信息。您提供的示例仅提及服务器的读取操作。有写作吗？读取和写入操作都可能失败。您的设计人员是否会处理这些情况，或者服务器端团队会在以后跳入并修补GUI？

我认为最好为设计人员提供服务的模拟服务器端实现。服务器模拟可以模拟真实生活行为，如抛出错误和超出快乐路径的异常。现在安装一个简单的Web服务器和一个充当模拟服务的脚本，而不是试图为以后的集成创建流程，这真的不那么麻烦了。

Answer 2

我看到的其中一个相当成功的工作是整个“url / path”问题（dev vs test vs production等）是为你的“proto”项目创建一个子域名（所以proto.mycoolapp.company .int）并且这是应用中任何地方使用的所有网址的基础。

除此之外，使用您正在使用的任何框架设置全局页面处理程序来识别所有数据文件的部分/页面/功能+ [url数据]（即json调用等）。

这允许您将应用程序分成几个部分并随时构建功能，并允许UI团队和开发团队处理其他团队的提示。

例如说我有一个有三个部分的应用程序（登录，帐户管理，预览）我会在proto.mycoolapp.company.int/frontend/login/securelogin上有一个登录URL服务（数据，文件，等等）？用户= GrayWizardX。 UI团队可以在识别数据需求时添加这些内容，您的应用开发团队可以查看所请求的功能（通过服务器日志等），并确保所有内容都匹配。

好的一面是，当你转向生产时，唯一的变化是找到“proto”并替换它。如果那是在你的全局变量中，那么它是一个快速而简单的变化。

Answer 3

目前还不清楚你的环境究竟是什么（仅限普通的HTML？还是像php这样的东西？），所以这在黑暗中有点像......

如果它是普通的旧HTML + javascript，您可以在每个页面上使用javascript include来获取正确的地址集。当具有所有此特定于环境的信息（即使用本地或使用服务器）的包含文件保留在相同的相对位置时，您无需担心修改实际页面。只需告诉GUI人员始终使用同一组变量来获取地址信息，并在该包含文件中定义地址信息。变量 names 不会改变您是从本地获取还是从服务器获取，只是存储在变量中的值。

我的维生素咖啡很少，所以希望这很有意义。