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

最新推荐文章于 2024-09-09 09:01:48 发布

dingshi7798

最新推荐文章于 2024-09-09 09:01:48 发布

阅读量159

点赞数

文章标签：前端测试 javascript ViewUI

几周前，我遇到了一个开发人员，在GitHub上分享了他的一个辅助项目：Trello克隆。该项目由React，Redux，Express和MongoDB构建，似乎有足够的空间来处理全栈JS技能。

我问开发人员Moustapha Diouf，是否对自己选择，设计和构建项目的过程感兴趣，他高兴地表示同意。希望您会发现它和我一样有趣，并且可以激发您从事自己的宏伟项目！

Nilson Jacques，编辑

在本文中，我将带您逐步了解所采用的方法，并结合一些用于构建Web应用程序的准则。这些技术的优点在于它们可以应用于任何编程语言。我个人在Java / JavaScript堆栈上使用它们，这使我的工作效率很高。

在继续学习该方法之前，我将花一些时间来讨论如何：

在开始项目之前，我确定了目标。
我决定使用技术堆栈。
我设置了应用程序。

请记住，由于整个项目都在GitHub（ madClones ）上，因此我将专注于设计和体系结构，而不是实际的代码。您可以签出当前代码的实时演示：可以使用凭据Test / Test登录。

全栈Trello克隆的屏幕截图

如果您有兴趣将自己的JavaScript技能提高到一个新的水平，请注册SitePoint Premium，并查看我们的最新书籍《 Modern JavaScript》

定义目标

我每天花几个小时来思考自己的目标以及通过构建应用程序要实现的目标。待办事项清单是不可能的，因为它不够复杂。我想献身于至少4个月的认真工作（现在已经8个月了）。经过一周的思考，我想到了克隆我喜欢每天使用的应用程序的想法。这就是Trello克隆成为副项目的方式。

总而言之，我想：

构建一个全栈JavaScript应用程序。走出我的舒适区，并使用其他服务器技术。
提高了我从头开始设计，设计，开发，部署和维护应用程序的能力。
练习TDD（测试驱动的开发）和BDD（行为驱动的开发）。 TDD是一种软件实践，要求开发人员编写测试，观察它们是否失败，然后编写最少的代码以使测试通过并进行重构（红色，绿色，重构）。另一方面，BDD强调使用功能和场景进行开发。它的主要目标是与企业保持紧密联系，并编写一种易于理解的语言。
了解最新和最热门的框架。在我的工作中，我使用角度1.4和节点0.10.32（我知道这很可悲），因此我需要靠近最热的东西。
编写遵循3R原则的代码：可读性，重构性和可重用性。
玩得开心。这是最重要的。自从我（现在仍然）是负责该项目的人以来，我想获得很多乐趣和尝试。

选择堆栈

我想用Express构建一个Node.js服务器并使用Mongo数据库。每个视图都需要由一个文档表示，以便一个请求可以获取所有必要的数据。主要的战斗是为前端技术选择，因为我在Angular和React之间犹豫了很多。

在选择框架时，我非常挑剔，因为只有可测试性，可调试性和可伸缩性对我而言确实很重要。不幸的是，发现框架是否可扩展只是实践和经验。

我从两个概念验证（POC）开始：一个在Angular 2中，另一个在React中。无论您将一个视为库而将另一个视为框架都没有关系，最终目标是相同的：构建应用程序。这不是他们是什么的问题，而是他们做什么。我非常喜欢React，所以我决定继续前进。

入门

首先，为名为TrelloClone的应用程序创建一个主文件夹。然后，我创建一个服务器文件夹，其中将包含我的Express应用程序。对于React应用程序，我使用Create React App引导它。

我在客户端和服务器上使用以下结构，以免在应用程序之间迷路。具有相同职责的文件夹可以帮助我更快地找到所需的内容：

src ：使应用程序正常运行的代码
src / config ：与配置相关的所有内容（数据库，URL，应用程序）
src / utils ：实用程序模块，可帮助我执行特定任务。例如中间件
测试：我只在测试时需要的配置
src / static ：例如包含图像
index.js ：应用程序的入口点

设置客户端

我使用create-react-app，因为它可以自动进行很多配置。该仓库说：“所有东西都经过预先配置和隐藏，因此您可以专注于代码。”

这是我构建应用程序的方式：

视图/组件由文件夹表示。
用于构建该视图的组件位于组件文件夹中。
路线定义了用户在视图中时拥有的不同路线选项。
模块（鸭子结构）是我的视图和/或组件的功能。

设置服务器

这是我按每个域表示的文件夹构造应用程序的方式：

基于HTTP请求的路由
测试请求参数的验证中间件
接收请求并最终返回结果的控制器

如果我有很多业务逻辑，我将添加一个服务文件。我不会尝试预测任何事情，只是适应应用程序的发展而已。

选择依赖

选择依赖项时，我只担心添加它们会获得什么：如果添加的价值不大，那么我将跳过。从POC开始通常是安全的，因为它可以帮助您“快速失败”。

如果您从事的是敏捷开发，那么您可能知道该过程，也可能不喜欢它。这里的要点是，失败的速度越快，迭代的速度就越快，并且产生的东西就越快地以可预测的方式工作。这是反馈与失败直到成功之间的循环。

客户

这是我始终安装在任何React应用程序上的依赖项列表：

包	描述
还原	可预测的状态容器。
react-redux	将Rreact和Redux绑定在一起。
重击式	允许您编写返回函数的操作的中间件。
redux-logger	Redux的记录器库。
反应路由器	路由库
Lodash	实用程序库
柴（dev）	节点的BDD，TDD断言库。
西农（dev）	独立的测试间谍，存根和模拟。
酶（dev）	React的测试工具。
诺克（dev）	用于Node.js的HTTP模拟和期望库。
redux-mock-store（dev）	模拟商店，用于测试您的Redux异步操作创建者和中间件。

有人可能会告诉您您并不总是需要redux。我认为任何后裔应用程序都是要发展壮大。使用redux所获得的附加工具会改变您的开发经验。

服务器

以下是我始终在任何Express应用程序上安装的依赖项列表：

包	描述
Lodash
i	对象模式描述语言和JavaScript对象的验证器。
表达价值	验证请求的主体，参数，查询，标头和cookie的中间件。
繁荣	HTTP友好的错误对象。
cookie解析器	解析Cookie标头并填充req.cookies。
温斯顿	异步日志记录库。
摩卡（dev）	Node.js和浏览器的测试框架
柴（dev）
chai-http（dev）	HTTP响应断言。
西农（dev）
nodemon（开发）	观看并自动重启应用。
伊斯坦布尔（dev）	代码覆盖率。

构建应用

首先，选择要开发的屏幕并列出用户可以访问的所有功能。我选择一个并开始实施。

开发了屏幕和/或功能后，我需要花一些时间来思考添加的代码，并在需要时进行重构。

示例：主屏幕

让我们用一个例子来说明我上面所说的一切。通过将前端和后端视为两个独立的实体，我开发了所有屏幕和功能。我总是从前端开始，因为它可以帮助我准确地知道需要显示什么。然后很容易前往服务器并实现数据库模型并添加业务逻辑。

首先，我写下一个功能描述并向其中添加一些场景。这是本文的示例：

Feature: In the home view, I should see my name in the header and a list of my boards.

Scenario: I can see my name in the header

Given I am on the home
Then I should see my user name in the header

考虑到这种基本情况，让我们看看如何在主视图上工作。

客户端

将组件驱动开发（CDD）方法与BDD结合使用，有助于将视图拆分为小组件，确保将它们分离并重用。

首先，我用纯文本编写的模拟数据构建了一个静态页面，并使用CSS设置了页面样式。

其次，我测试：

组件正确渲染
道具逻辑处理正确
事件监听器（如果有）被触发并调用适当的方法
组件从商店接收状态

最后，我创建了Header User组件和容器，并重构了先前在Redux模块初始状态下模拟的数据。

由于我使用的是鸭子结构，因此我可以一次只关注一个视图。如果我注意到两个视图共享相同的数据，则可以提升状态并创建一个包含所有数据的高级模块。应用程序的最终Redux状态由我模拟的所有数据组成。

一旦所有方案通过，我就会查看我的组件并对其进行重构，如果我发现它与我已经创建的另一个组件非常相似。我可以从重构旧组件开始，然后再添加新组件，也可以只是添加新组件，这样我就可以快速失败，然后再考虑一种更优雅的解决方案。

我没有浪费时间去猜测或思考用户需要看什么。我可以建立视图，然后决定需要显示哪些数据。在构建时对设计做出反应和思考比在尝试先思考需要显示的内容要容易得多。以我的经验，它有时会增加很多开销和不必要的会议。只要您牢记可重用性，就可以了。

服务器端

我想出的Redux存储模型至关重要，因为我使用它来设计数据库，然后对业务逻辑进行编码。由于在视图上所做的工作，我知道主页需要获取用户的名称和面板。我注意到我有个人委员会和组织委员会，这意味着我可以将这两个实体分开并具有两个不同的模式。主要目标是使用标准化数据并由服务器完成所有繁重的工作，因此我不必考虑这一点。

CRUD（创建，读取，更新，删除）是任何应用程序所需的基本操作集，但我不会盲目地将它们添加到我的所有路由中。现在，我需要做的是获取数据，因此我只实现了读取。然后，我可以编写一个Mongo查询，以便稍后将用户添加到我的数据库中。

结论

我希望您喜欢我构建全栈应用程序的方法。我的主要建议是永远不要害怕做大的重构。我无法计算更改应用程序文件结构的次数，只是因为我知道它是不可扩展的：文件夹名称，文件夹深度，按功能分组的方式等细节总是会有所作为。

我从不害怕犯错，因为它们可以帮助我学习：失败的速度越快，学习的速度就越快，成长就越快。如果我犯了100个错误并从中学习，那么我就会知道100种不同的方式来避免这些错误。

当我发现自己不喜欢的东西时，请立即或在接下来的几天内进行修复。由于我测试了代码，因此可以迅速判断出我是否正在破坏有效的功能。

爱因斯坦说：“一旦停止学习，就会死去”，我相信一旦停止犯错，就会停止学习。失败，学习并继续生活。

我未来的计划是什么？

我一直在从事我的项目，因为它一直在进行中。就像一个真正的应用程序一样，它也在不断变化。我的计划是：

使用基于微服务的服务器将我的Monolith项目移动到Mono Repo。在开发HipChat克隆程序时，我想出了这个决定。我注意到我为相同的身份验证逻辑复制了大量代码：微服务是显而易见的选择。 Ctrl-C，Ctrl-V不是您编程的朋友。
在Kubernetes上部署微服务
将HipChat克隆移动到mono库中，并使用Vue.js构建应用。
开始研究Electron和React Native。
使用Travis添加持续集成（CI）和部署。
学习TypeScript。