Hoodie 简介:面向前端开发人员的全栈开发

已发表: 2022-03-11

如果你还没有听说过 Hoodie,你应该去看看。

Hoodie 是前端开发人员进行全栈开发的绝佳工具。

Hoodie 是一个面向前端开发人员的渐进式新库,它采用了一些非凡的新理念,这些理念可能会改变应用程序开发和用户体验。 Hoodie 将全栈、前端应用程序开发的控制权完全掌握在前端开发人员和用户体验专家手中,使他们摆脱了后端同行有时难以理解的技术反对意见。 此外,Hoodie 应用程序将用户从不间断连接的束缚中解放出来,让他们可以在旅途中、空中或海底使用您的应用程序,而无需担心。

虽然该平台仍处于起步阶段,但它已经提供了一些强大的新工具,值得任何想要领先于游戏的前端开发人员尝试。 Hoodie 背后的团队拥有久经考验的背景,曾参与过其他非常成功的项目,例如 CouchDB、Async、Mustache.js 等等。

在了解了 Hoodie 全栈开发库的工作内容并对该项目感到非常兴奋之后,我决定亲自尝试一下。 让我告诉你更多关于 Hoodie 的信息,并向你展示它在开发出色应用方面的一些潜力。

什么是连帽衫?

首先,什么是Hoodie? 它有什么了不起的? Hoodie 是一个开源的、完全 JavaScript 的平台和 API,它在一个完整的堆栈开发包中结合了几个强大的新范例,这对构建 Hoodie 应用程序的开发人员和与之交互的最终用户都有好处。 这些概念中最主要的是“noBackend”和“Offline First”运动,以及用于构建 API 的强大的社区驱动流程,称为“Dreamcode”。

noBackend

Hoodie 认为,出色的前端应用程序开发的关键在于用户体验专家和开发人员,他们知道如何使应用程序看起来很棒并且使用起来很愉快,但他们经常受到后端技术的限制他们无法控制。 一直存在的基本服务器交互,例如用户注册/登录、数据存储或电子邮件发送,仍然需要对每个新应用程序进行耗时的自定义实现,从而迫使前端开发人员学习和编写新的后端代码。每次都结束怪癖。

noBackend 意味着您不需要后端开发人员!

Hoodie 通过完全抽象出后端,将控制权交还给前端设计师和开发人员。 使用 Hoodie 前端应用程序开发,您无需担心服务器端,只需担心 Hoodie 内置的简单、易于学习和实施的前端 API。 例如,想注册一个新用户? 这可以在一行代码中完成:

 hoodie.account.signUp(username, password);

这就是 Hoodie 全力支持的 noBackend 计划背后的理念。 noBackend 意味着您不需要后端开发人员! 只需将 Hoodie 后端部署到您的服务器,然后忘记它

Hoodie 完全用 JavaScript 编写。 它的独立后端使用带有 Apache CouchDB 作为其数据库的 Node.JS。 在撰写本文时,Hoodie 已经实现的核心功能包括用户注册和管理、数据加载、存储和电子邮件。 这些核心功能可以通过添加额外的 Node.js 插件轻松扩展。

梦码

Hoodie 首先是一个 API——这就是 noBackend 成为可能的原因。 Hoodie 的实现可能会随着时间的推移而改变和改进,但提供给开发人员的接口将保持不变,因此您永远不必担心它。

连帽衫仍在快速增长,并且一直在添加新功能。 Hoodie 与其他 noBackend 项目一样,使用社区驱动的方法来设计称为 Dreamcode 的 API。 从本质上讲,您构想了您编写的代码,如果它得到社区的足够支持,Hoodie 就会实现。

这种以 API 为先的众包方法来设计 Hoodie API 意味着 Hoodie 代码易于编写和阅读。 这是你梦想的密码!

离线优先

Hoodie 以其 noBackend、Dreamcode 驱动的 API 为前端应用程序开发人员解决了很多问题。 但 Hoodie 的主要目标之一也是为用户解决一个主要问题——他们经常严重依赖连接性。

随着向带有移动应用程序的移动设备的转变,旧的基于桌面的持续连接假设保持不变。 一直以来,人们一直承诺,无论你走到哪里,互联网都会在那里。 直到今天,失去连接仍被视为异常现象,在用户重新上线之前,他们无法完成任何工作。 但众所周知,电信网络未能兑现这一承诺。 在飞机、地铁、乡村道路和无数其他情况下,连接性消失了。 那是在世界发达地区! 在地球上的广大地区,稳定的互联网接入是罕见的例外。

离线优先运动寻求与这个简单的生活事实的优雅协调。 使用 Offline First,非连接只是应用程序的另一种正常状态。 实际上这是默认状态! 连帽衫热情地采用了这一理念。 API 背后是临时本地存储的完整前端实现,以及在连接可用时自动、优雅地同步。

使用 Hoodie 进行前端应用程序开发意味着用户不必依赖连接的离线优先模式。

使用 Hoodie,您可以发表评论、发送电子邮件、编辑帐户以及进行大多数其他日常活动,而无需担心建立连接。 整个存储和同步系统可以随时中断,不用担心丢失数据。

当然,这个模型有自己独特的设计挑战和方法,但 Hoodie 的团队正在开创解决这些挑战的技术。

Offline First 是应用程序开发的一个令人兴奋的新尝试,处于采用的早期阶段。 开发所需的技术还有很多工作要做。 看看这里,看看 Hoodie 是如何做到的。

一个使用 Hoodie 的简单应用程序

为了演示 Hoodie 作为前端开发工具的使用,我决定编写一个简单的应用程序,让我们的社区成员可以创建自己的事件并将其发布给其他工程师浏览并添加到他们的日程中。 请记住,这里的目标是展示 Hoodie,而不是提供可用于生产的应用程序。 你可以在我的 GitHub 页面上找到代码。

在幕后 Hoodie 本质上是 NodeJS 中内置的服务器端和客户端 JavaScript 库的组合。 除了简单的安装和部署过程之外,开发应用程序的开发人员将只处理客户端代码。 内置库可以与服务器端对话,而开发人员不知道它是如何工作的。

如果我们的应用程序要求我们在服务器上做一些自定义的事情怎么办? 我们总是可以创建 Hoodie 插件。 这是有关插件的更多信息。

启动您的连帽衫应用程序

对任何 Hoodie 应用程序进行全栈开发的第一步是使用 Hoodie 命令行工具让我们起步:

 hoodie new toptalCommunity

这将创建一个已初始化的 Hoodie 应用程序,其中已经有一些代码,我们已经可以运行我们的应用程序了! 如果我们输入

cd toptalCommunity hoodie start

浏览器将打开一个来自 Hoodie 团队的示例应用程序:

这是 Hoodie 提供的示例前端应用程序。

在这一点上,我做了一点家务。 Hoodie 应用程序目前带有 Bootstrap 和 Prism,但我删除了提供的版本。 我不需要 Prism,而是想使用我自己的 Bootstrap 版本,这样我就可以使用我想使用的字体和 JS。 在构建应用程序时,我还对 main.css 进行了一些更改,以赋予它自己的风格并允许我使用简单的引导模板。 我只将 jQuery 用于 DOM 操作和事件。 连帽衫负责其他一切。

连帽衫和 Dreamcode

当我致力于创建这个示例应用程序时,我很快意识到使用 Hoodie 的所有好处。 开始项目时需要回答的许多常规问题都不存在。 Hoodie 让我只需编写代码并查看应用程序的运行情况。

我们应该使用什么策略来管理用户帐户? Hoodie 帐户插件就是答案。 我们应该如何将数据存储在后端? Hoodie 死气沉沉的简单存储 API 为我们处理了这些问题,免费为我们提供了离线优先功能! 无需任何努力即可使这款 Hoodie 应用程序离线工作,它就可以正常工作。

让我们更深入地了解一些实现:

用户账户管理

Hoodie 有一个名为hoodie-plugin-users为我们负责帐户管理。 API 再简单不过了。

我们如何添加新用户?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

我们如何登录用户?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

我们有用户登录吗?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

这真的再简单不过了。 哦,等等,我们的 UI 将如何对所有这些做出反应? 连帽衫为您准备了活动

在用户登录时做出反应:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

数据存储

我们的示例应用程序将允许用户创建自己的活动(私人数据)并在需要时发布(公开数据),以便其他用户可以加入活动。

Hoodie 允许我们在不登录的情况下向其本地存储添加数据,那么它如何知道这些数据属于哪个用户呢? 好吧,它保持在本地,并且在该用户登录之前不会同步到服务器。Hoodie 还将确保只有该用户能够访问该数据。

所以这是它的工作原理:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

就是这么简单! 好的,这将有助于我们创建一个事件,我们将如何与其他人分享它? 这是global share plugin将帮助我们的地方。 我们必须安装它,因为它不是默认插件:

 hoodie install global-share

现在我们有了插件,让我们使用它! 我们必须将已经添加到用户存储中的数据发布到全局存储。

 hoodie.store.findAll('event').publish();

这会将为此用户保存的所有事件标记为公共事件,以便当我们查询全局存储时,我们将获得该数据作为结果。

 hoodie.global.findAll('event'); //This is read-only

在我的活动页面上,用户可以创建直接发布到全局商店的活动。

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Hoodie 的前端开发工具可生成干净的“创建事件”配置。

每个人都可以看到已发布的事件,因此现在任何用户都可以看到在“事件”页面上创建的事件。

Hoodie 为 Toptal 活动日历创建了一个干净、高效的全栈开发流程。

那么不应该公开的数据呢? 我们存储用户已申请的事件并将其显示在事件页面上。 当用户单击应用按钮时,执行以下操作:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

下面的两个屏幕截图显示了同时运行的两个浏览器窗口。 在第一个浏览器中,用户以 a@aa用户身份登录,该用户已申请A Event 。 在第二个中,用户b@bb已登录并已申请B Event

这张来自我的 Hoodie 应用程序的屏幕截图显示一个用户已登录。

此屏幕截图显示了另一个示例用户登录到我的示例应用程序。

长轮询

通过订阅 Hoodie 提供的一些事件,我们可以透明地使用长轮询等技术,这为我们的应用程序提供了一个有趣的功能,因为不同的用户正在使用和协作它。

这真的很容易做到。 在我们的示例应用程序中,一行代码就完成了:

 hoodie.global.on('add:event', loadEvent);

这条简单的行将负责长时间轮询服务器以检查可能已由其他用户添加的新事件并将它们添加到“我的事件”页面。

一些担忧

在构建了这个示例应用程序以使用 Hoodie 及其前端应用程序开发功能后,我对它所提供的功能感到非常兴奋。 然而,一些明确的问题对我来说很突出。

Hoodie 使开发人员与服务器通信变得非常容易,任何开发人员都可以通过使用控制台向我们的数据库添加内容,这显然具有重大的安全性和数据完整性影响。

该库还缺少许多您在任何生产应用程序中都需要的基本东西,例如数据验证、可链接 URL、测试框架和数据的私有共享(尽管他们已经在最后一个方面取得了良好的进展)。 现在要在生产中使用 Hoodie,我们必须将其与其他解决方案(如 AngularJS、Ember 或任何其他解决方案)配对,以帮助我们确保我们的前端项目具有正确结构化和可维护的 JavaScript 代码。 由于如今这些框架本身正在接近后端技术的复杂性,因此这种解决方案将在很大程度上违背 Hoodie 的目的。

连帽衫的未来

连帽衫仍在大力发展以解决所有这些问题。 团队正在努力实现新功能并改进现有功能,以使平台为大众消费做好准备,当然,这个过程需要时间。 如果您现在正在计划一个新的全面应用程序,那么您可能希望在这个时候找到一个不同的平台来构建它。

然而,与此同时,开始使用 Hoodie 进行前端应用程序开发当然还为时不早,我希望我刚才已经演示过。 Hoodie 中已经包含了许多强大的新想法,我认为这些想法很可能会变得非常流行。 在这些事情上领先一步可能不是一个坏主意。

如果 Hoodie 的团队继续努力工作,API 应该会立即为黄金时段做好准备。 如果您想跟踪 Hoodie 团队的进度,只需查看他们的里程碑跟踪器即可。

Hoodie 承诺让为推动者和震动者开发出色的应用程序变得轻而易举。 如果 Hoodie 体现的想法流行起来,我们可能会看到每个新项目都需要一个后端开发团队成为过去。 有了这样的项目,很容易想象在不久的将来前端开发人员的黄金时代。 同样,离线优先理念为用户带来的好处是可访问性迈出的一大步,将我们的移动互联生活方式的范围扩展到互联网本身不去的地方。

前往 Hoodie 了解 Hoodie 的进步,并成为它准备迎接的激动人心的新变化的一部分。


特别感谢Hoodie 团队。 Hoodie 徽标经 Hoodie 开源项目许可使用