我如何设计和构建全栈 JavaScript Trello 克隆

[account_disabled]

几周前，我遇到一位开发人员在 GitHub 上分享他的一个业余项目：Trello 克隆。该项目使用 React、Redux、Express 和 MongoDB 构建，似乎有足够的空间来发展全栈 JS 技能。 Pause Next Unmute Current Time Duration 2:00 Fullscreen 我问开发者穆斯塔法·迪乌夫（Moustapha Diouf）是否有兴趣写下他选择、设计和构建该项目的过程，他很高兴地同意了。我希望您会像我一样发现它很有趣，并且它会激励您致力于自己雄心勃勃的项目！ 尼尔森·雅克，编辑 在本文中，我将向您介绍我所采用的方法，并结合我用来构建 Web 应用程序的一些指南。这些技术的优点在于它们可以应用于任何编程语言。我个人在 Java/JavaScript 堆栈的工作中使用它们，它使我非常高效。 在继续讨论该方法之前，我将花一些时间讨论如何： 我在开始项目之前定义，因此我将重点关注设计和架构而不是实际代码。您可以查看当前代码的实时演示：您可以使用凭据登录 Test/Test。



全栈 Trello 克隆的屏幕截图 如果您有兴趣将 JavaScript 技能提升到新的水平，请注册 SitePoint Premium 并查看我们的最新书籍《Modern JavaScript》 定义目标 我首先每天花几个小时来思考我的目标以及我想通过构建应用程序来实现什么。待办事项列 WhatsApp 号码数据 表是不可能的，因为它不够复杂。我想全身心投入至少 4 个月的认真工作（现在已经 8 个月了）。经过一周的思考，我想出了克隆我每天喜欢使用的应用程序的想法。这就是 Trello 克隆成为一个副项目的原因。 总之，我想： 构建全栈 JavaScript 应用程序。走出我的舒适区并使用不同的服务器技术。 提高我从头开始构建、设计、开发、部署和维护应用程序的能力。 实践 TDD（测试驱动开发）和 BDD（行为驱动开发）。TDD 是一种软件实践，要求开发人员编写测试，观察它们失败，然后编写最少的代码以使测试通过并重构（红色，绿色，重构）。另一方面，BDD 强调根据特性和场景进行开发。



编写遵循 3R 原则的代码：可读性、可重构性和可重用性。 玩得开心。这是最重要的一点。因为我是（现在仍然是）该项目的负责人，所以我想获得乐趣并进行很多尝试。 选择堆栈 我想用 Express 构建一个 Node.js 服务器并使用 Mongo 数据库。每个视图都需要由一个文档来表示，以便一个请求可以获得所有必要的数据。主要的争论是前端技术的选择，因为我在 Angular 和 React 之间犹豫了很多。 在选择框架时我非常挑剔，因为只有可测试性、可调试性和可扩展性对我来说才真正重要。不幸的是，发现一个框架是否可扩展只能通过实践和经验来实现。 我从两个概念验证 (POC) 开始：一个在 Angular 2 中，另一个在 React 中。无论您将一个视为库还是将另一个视为框架并不重要，最终目标都是相同的：构建一个应用程序。问题不在于他们是什么，而在于他们做了什么。我非常喜欢 React，所以我决定继续使用它。 入门 我首先为名为 TrelloClone 的应用程序创建一个主文件夹。