任何人都可以为大型 Web 应用程序建议一个好的客户端架构和结构吗？ [关闭]

Question

我正在构建一个大型 Web 应用程序。它会在未来增长，所以我的应用程序需要一个好的后端和前端架构。在站点的后面，我使用 Zend Framework，所以架构对我来说还可以。但是在前面，在没有良好架构的情况下使用 javascript 和 ajax 会使以后的更改变得困难和混乱。

目前，我正在使用自己的架构。我有一个用于整个应用程序的大对象，比如 BigObject。当模块添加到站点时，我会扩展它。说我有一个上传模块。我用这个：

BigObject.upload={
    //initialization
    init:function(){
    },
    //I tried to use what I named semi-MVC architecture!!!
    controllers:{
        //index is a controller
        someController:{
            init:function(){
                //initialization
            },
            someAction:function(){
                //Code goes here
                //call a model if necessary
                //call view script
                BigObject.upload.views.someController.someAction();
            }
        }
    },
    models:{
        //models required for this module like loading contents with ajax.
        loadContent:function(part,callback){
        }
    }
    views:{
        init:function(){
            //initialize view
        },
        someController:{
            someAction:function(){
            }
        }
    }
}

你怎么看？这个问题有更好的解决方案吗？有没有人想过 Web 应用程序的前端部分有一个好的结构（比如我们在后端有什么，好的文件结构和面向对象的方法）？

Answer 1

2020 年这个问题的最新答案是使用React + GraphQL + Styled-Components。开始使用 React 的最佳位置是官方的 Create React App 工具。它们是 GraphQL 的几种不同实现；在客户端，明确的领导者是Apollo。在服务器上，您有更多选择，甚至滚动您自己的服务器实现也相当容易，因此请选择最适合您当前后端的方式。 Styled-Components 在 JS 中为您提供 CSS，就像 React 在 JS 中为您提供 HTML 一样。

要获得更完整和更有主见的体验，请查看Gatsby，它将上述所有内容整合到一个框架中。

在过去的几年里，一种更 functional 风格的 JavaScript 编写变得流行起来。如果你不习惯函数式编程，那么一开始学习曲线可能有点陡峭，但首先要学习一个名为 Ramda 的库。

这里有几个链接可以帮助您开始使用函数式 JS

• An introduction to functional programming in JavaScript
• Thinking in Ramda
• Indentation is the enemy: Writing less complex JavaScript
• Mostly Adéquate guide to functional programming

在测试方面，Jest 结合Enzyme 是目前最好的选择。

最后，要获得更深入的答案，请查看程楼在Spectrum of Abstraction 上的演讲。

Answer 2

大多数答案都是提出jQuery、React、Angular、Vue.js...之类的东西，它们既不是框架，也不是架构。所有这些库都是 JavaScript 之上的层。我只是提醒您，JavaScript已经是一种高级语言！

由于问题是关于大型 Web 应用程序的良好客户端架构和结构，我想说前面的答案都没有解决问题，这是有原因的：

目前还没有新兴或普遍接受的前端 JavaScript 源代码组织架构。

我已经阅读了几十篇博客文章、Stackoverflow 问题、Youtube 视频……我从来没有找到一个详细说明通用、通用和可扩展架构的人。主要原因是：

• 前端 JS 代码相对于后端源代码非常少，大多数开发人员不需要可扩展的架构。
• 执行是短暂的，JS 的生命周期与网页的生命周期相同。
• 对于许多开发人员来说，问题更多在于操作 DOM，而不是构建大型 JS 代码。这就是为什么人们的回答是关于库而不是框架。

我真的希望有一天，有人会提出第一个真正的 JS 架构（例如 MVC）。但在我看来，这种架构将更多地是关于事件回调而不是 MVC。在结束之前，我会建议你以下资源：

• Imperative 或 procedural 编程。
• Functionnal programming（可能是模块的最佳领导者）
• Fun Fun Function的精彩视频
• JavaScript modules

最后，我强烈建议考虑那些潜力被低估的 JS 模块。这不完全是一种架构，但是：

• JS 模块组织你的代码
• JS 模块是可扩展的
• 易于维护
• JS 模块可复用

上一个列表不是您需要组织代码的主要原因吗？

智者的话！

Answer 3

对于大型应用程序，很多人都希望使用 Dojo 或 YUI。它们是诚实的框架，你会发现大多数其他东西都是一个库。

就个人而言，我倾向于坚持使用 jQuery。我根据需要创建 jQuery 插件或 jQueryUI 小部件。我已经成功地将 jQueryUI 推得很远。

所有内容都属于$.fn.myPlugin 或$.ui.myWidget。对我来说，这有一个额外的好处，那就是推动您保持代码非常模块化和可移植（假设您遵守 jQuery/jQueryUI 约定）。

$(element).myWidget({
    color:'eggplant',
    someValue:42
});

$.upload(args);

Answer 4

实际上，我曾经为同一个问题苦苦挣扎。在完成了几个大型项目之后，我想将我的学习成果作为参考架构分享，以防其他人发现它有用。

看看http://boilerplatejs.org。它不是一个库，而是一个框架，将一些行业领先的库与大规模 javascript 开发的架构模式集成在一起。

Answer 5

根据我对前端的理解，我会要求您使用仅使用 HTML、CSS 和 JS 的 Web 组件。 无需花太多时间了解其他语言。如果您采用最新的 UI 框架或库，例如 Angular、React，它们是基于 Web 组件构建的。

您可以自定义要在项目中使用的自己的组件和用例。当您使用框架时，需要一些时间来加载和跟进正在使用的几个库。

JS 你可以随心所欲地使用它。创建后，您可以在任意数量的项目中重复使用这些组件。

只要看看 webcomponents https://www.webcomponents.org/introduction 你就会明白。我希望这会有所帮助。

Answer 6

凭借在我的应用程序中为数百万观众扩展我的一些内容的经验。但后来我不得不关闭应用程序以获得更少的利润和更大的管理压力（虽然不是成本，但利润不足以保持动力）

我的架构是：

1. Mithril.js.org 库 - Checkout mithril here 用于前端
2. Twitter 引导前端框架
3. 带有“Laravel 并开始将一些繁重的写入数据迁移到 nodejs”的后端
4. Redis 作为内存存储。
5. 在我关闭应用程序之前，我几乎需要将存储空间转移到 s3。

没有 jQuery - 我让我的应用程序不使用 jQuery（我在某处听到并阅读过大型应用程序避免使用 jQuery，所以我自己没有进一步调查，我计划也保持不使用 jQuery，尽管我有没有可靠或防弹的理由来避免使用 jquery）

我发现 mithril 比 react 或 angular 更有趣，它很容易上手，而且我在学习的同时也在构建，这非常简单，他们声称，它们在大小和方面比 react、vue 和 angular 更好性能。

Answer 7

我的回答是问你为什么需要这个？我从事过大量使用 javascript 的应用程序，但我学到的一件事是，最好的做法是将 javascript 尤其是面向对象的 javascript 最小化到绝对最低限度。带有大而复杂的 javascript 的网页往往速度慢、内存占用大，并且在使用所有浏览器变体时调试起来很痛苦。