【问题标题】:Architecture of a modern web-app with a lot of pages具有大量页面的现代 Web 应用程序的架构
【发布时间】:2021-11-08 15:21:36
【问题描述】:

我正在尝试为具有大量非静态页面(超过 50 个具有不同内容的页面)的网络应用程序选择架构。 页面的主要部分具有相同的方案(菜单+右侧菜单+内容区+底部)。 内容也可以非常不同(表格、文本、图像或用户交互的内容) 但是有些页面完全不同。

它现在如何运作?我有带有 Perl 的服务器(是的,这是一个非常古老的应用程序),我在其中生成页面(html + js + css),然后将其发送给用户。页面上的数据取决于每个用户。

我对 SPA(React + TypeScript)有一些经验,但我知道 SPA 不适合我的情况。

您能否推荐一些可以阅读的内容,或者告诉我适用于我的案例的现代解决方案的名称?

我还需要技术方面的帮助。对我来说,带有 webpack 和 babel 的 Typescript 最适合客户端,但我不知道它在我的情况下应该如何工作。

【问题讨论】:

    标签: web-applications architecture


    【解决方案1】:

    抱歉 - cmets 作为“答案”。为了正确回答这个问题,我们(好吧,无论如何,我)将需要更多信息:

    • 您的技术限制是什么?你提到 Perl,那是当前的状态吗?你能摆脱它吗?

    就解决方案而言,像这样的数据驱动型网站非常常见。像 ASP.Net 这样的堆栈(我只提到它是因为它是我最熟悉的)将很容易做到这一点 - 还有其他堆栈具有类似的功能:

    也许可以查找“数据驱动的网站”。

    你想要的是(警告 - 随机列表):

    • 以构建数据驱动的网站而闻名的技术堆栈,即可以实现三个基本逻辑层:UI、逻辑、数据访问。
    • 数据访问代码可以访问一些有用的数据库解决方案来存储数据 - 你提到用户看到不同的数据,所以毫无疑问你需要一个数据库 - 再次,选择一个适用于你选择的堆栈的数据库,那就是受欢迎(容易获得帮助)。
    • 堆栈的主要部分是 Web 应用程序和支持它的开发人员工具。这些一起应该可以让你轻松地创建具有结构、可重用组件(例如导航、小部件)、样式、客户端脚本等的“视图”页面。它们还应该让你轻松地编写它们背后逻辑的动态部分,“控制器”。
    • 用于构建页面动态部分的代码/语言/技术也应该允许您构建我上面提到的其他层。面向对象的 OO 语言非常适合这种情况。选择一种强类型,以便您获得良好的设计时、编译时和运行时调试支持。
    • 良好的 Web 应用程序堆栈和 IDE 还将通过创建“模板”页面提供强大的可重用性功能,以便您在需要时获得一致性,并能够创建可重用的控件(具有 UI 和逻辑)。
    • 如果您使用 OO,请阅读一些好的 OO 设计原则(例如 thisthisthis)。确实希望一次学习所有内容,但从长远来看,您可以应用的内容会对您有所帮助。
    • 如今,客户端脚本对很多人来说都很重要 - 有充分的理由,因此在选择工具集和架构时,请考虑您需要/想要执行多少客户端脚本。

    注意:ViewsControllers 来自 MVC,这是 Wep 应用程序构建者经常使用的一种架构类型,但还有其他的。

    • 最后,要为每个用户提供数据,您需要处理用户身份验证和授权;大多数体面的 Web 应用程序堆栈将通过附加组件、库、设计模式、参考架构、实施 OAuth 等标准的指南、与流行的身份提供者集成的提供者的某种组合来提供帮助(这样你就可以进行“社交”登录关闭 Google 等)。

    阅读清单

    如果您完全不熟悉构建网络应用程序,这里有一些阅读材料。我刚刚进行了搜索并选择了一些文章,乍一看,它们可能有用(并且弹出窗口最少)。

    更新 - ASP.Net 作为视图和控制器动态页面的示例

    回应您的评论,尤其是

    如何构建页面,在哪一边

    我对同时使用 Kotlin 和 typescript 一无所知(我可以看看),但如果您认为它可能有用,请尝试做一个概念证明,例如“hello world”简单网站,以证明技术和您的预期的架构。如果您不熟悉它,请查看Steel Thread 的概念。

    就如何构建动态页面而言,在 ASP.Net 等堆栈中,Pages 和 WebControls 有两部分协同工作:一个(视图)看起来像 HTML 页面,但也可以包含标记ASP 引擎识别:

    <%@ Page Title="My Page" Language="C#" 
      MasterPageFile="~/Desktop.Master" 
      CodeBehind="RandomPage.aspx.cs" %>
    
      <h1>Welcome to my page</h1>
    
      <asp:TextBox ID="txtMyText" runat="server"></asp:TextBox>
    
      ...
    

    在这一部分中,您可以混合所有常见的客户端标记、样式和脚本代码。您会看到它有Desktop.Master,这是一个提供一定程度整体一致性的模板。该视图与 ASP.Net 所称的代码隐藏页面(控制器)协同工作,在本例中为 RandomPage.aspx.cs,例如:

    namespace Adrian.RandomWebsites.Alpha
    {
        public partial class RandomPage : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                txtMyText.Text = DateTime.Now.ToString();
            }
        }
    }
    

    您可以在此处进行后端处理、调用数据库并使用数据填充页面/Web 控件。在这里,我将 TextBox 设置为将日期/时间输出到页面。

    RandomPage 是一个类,用 C# 编写,它是一种 OO 语言,因此您可以完全处理继承、多态等问题。

    【讨论】:

    • 感谢您的回答。关于当前堆栈。我正在使用 Perl + vanila JS(正如我所说,这是一个非常古老的项目)。是的,我想改变两者。老实说,我喜欢服务器端的 Kotlin 和客户端的 TypeScript。但也许你知道更好的语言?主要问题之一是如何重写客户端和服务器端。如何构建页面,在哪一侧。例如,现在我有很多结构相同但内容不同的页面。也许我可以在客户端构建这个结构,然后将我从服务器获取的内容放入其中。
    猜你喜欢
    • 2016-02-09
    • 2013-02-20
    • 2013-06-30
    • 2022-01-02
    • 1970-01-01
    • 2010-10-02
    • 2018-02-17
    • 2011-06-10
    • 2015-03-13
    相关资源
    最近更新 更多