如何为具有相同布局的多个web应用程序设计UI框架

How to design an UI framework for multiple web applications with the same layout?

本文关键字：web 应用 程序设计 框架 UI 布局      更新时间：2023-09-26

我正在尝试为多个web应用程序设计一个ui框架，但在为我们的情况设计基础设施时遇到了麻烦:

  • 使用asp.net mvc构建7个(或更多)独立的web应用程序
  • 一些web应用程序在内部服务器上，一些托管
  • 所有的基本css/images/javascript(每个应用程序可以使用的共享组件)
  • 每个应用程序都有一些独特的css和javascript
  • 每个应用程序都有自己的TFS分支和解决方案
  • 每个应用程序都有自己的发布管理(每月/每年/等)

我想要达到的目标:

  • 修复一次而不是所有应用程序的UI错误
  • 所有应用程序的一致UI
  • 不要用UI的东西打扰其他开发者

什么是智能基础设施?

根据我的经验，在web项目之间共享未编译代码的困难主要是源代码控制。我们使用内部的NuGet服务器来共享已编译的代码，但这对于未编译的代码并不是很有效。对于这些东西(HTML，脚本，内容)，我发现最简单的方法是将框架的所有公共组件保持在一个单一的层次结构中，可以作为一个独立的项目或子模块存储在您使用的任何源代码控制系统中，例如

/myframework/scripts
/myframework/styles
/myframework/images

如果"myframework"是作为子模块管理的，你应该能够独立于你所包含的项目来维护它。使用git和svn，这很简单。

你的应用程序特定的脚本和内容可以像往常一样保持在任何你喜欢的正常层次结构中，例如

/scripts
/styles
/images

你也可以看看流行的前端框架是如何在它们的默认配置中设置的。例如，Zurb Foundation提供了一组脚本、样式和内容模板。默认情况下，所有内容都存储在文件夹Content和Javascripts下，它们建议您不要更改它们的样式表，而是在单独的样式表中覆盖自定义的样式。这样可以避免对共享框架进行更改。对您自己的内部框架应用类似的策略似乎是明智的。

我们最终使用NuGet将css/js/图像分发到所有不同的项目。全局ui有自己的团队项目，可以自动为内部nuget服务器创建nuget包。

相关文章：