逐步开发网络应用

作为一个充满激情的开发人员,我不愿花很多精力在边际项目上,也没有支付账单。 今年早些时候,我获得了欧洲歌唱大赛的门票,很激动的是,我决定构建一个现代的Web应用程序,以探索和发现年度演出的历史。 我为自己设定了一些目标:

  • 它应该利用最新和最伟大的网络技术。
  • 它应包含欧洲歌唱大赛的历史成绩,并且该信息应以欧洲最常用的语言提供。
  • 数据必须易于维护(这很棘手!)。

Tldr: 这是我构建的应用程序 ,下面是如何组合在一起以及遇到的挑战的详细信息,底部是视频演示。


渐进的应用程序和渐进的态度

“渐进式Web应用程序”(或“ PWA”)本质上是现代Web技术的光辉典范。 他们觉得自己更像是本机应用程序,而不是原始的网站祖先。 PWA可以脱机工作,可以安装在您的设备上,甚至可以接收推送通知。 我是PWA的拥护者,并且为本地技术社区做了有关该主题的演讲。

在过去的一年中,我日常工作中的很大一部分工作是建立一个大型PWA,以替换一个已建立的复杂网站。 对于我的新Eurovision宠物项目,我想要更精简和简单的东西。 除了将应用程序构建为PWA之外,我还会挑战自己,以现代的进阶态度来处理从UI到后端的所有决策。


渐进的语言和框架

我选择的语言是Dart。 它是强类型的,完全面向对象的,并且是一种使我真正高效的语言。 对于网络,它可以编译为JavaScript。 您甚至可以使用它使用Flutter构建本机移动应用程序,或者使用Dart VM在服务器或开发计算机上运行Dart-这是真正的圣杯!

对于我选择Angular Dart的框架,这是一个很好的框架,它使您能够以结构化和自以为是的方式构建健壮且复杂的Web应用程序。 我利用了“ angular_components”,它们与Google在其自己的产品上使用的经过抗争的材料设计组件相同。 我还使用了“ intl”库,该库允许我将文本提取到字典文件中,然后可以将其翻译成各种语言。


后端即服务

为了遵循先进的理念,我选择Firebase作为后端。 Firebase是用于构建应用程序的完全托管平台,此类平台通常称为“后端即服务”(“ baas”)。 通过这样的解决方案,传统服务器可以完成的工作分解为许多服务,您只需为使用的东西付费。 这是对应用程序基础结构的一种真正轻松,现代且先进的方法,我喜欢它!


维护数据的挑战

我构建此应用程序时面临的最大挑战是如何维护数据。 我确实想要一种简单优雅的解决方案来更新应用程序,但是我选择的数据库技术使这一点变得棘手。 当我使用Firebase后端时,我选择使用它的新式Firestore数据库,但这是一个“ NoSQL”数据存储,它不允许实时复杂的查询或跨关系聚合数据。 我将存储具有很多关系并且需要大量汇总统计信息的数据。 理想情况下,我将为这种数据集使用关系数据库,但是由于我的目标是变得现代,简单和渐进,所以我确实想避免使用传统的数据库+服务器组合。

使用Firestore意味着我需要提前计算数据中的所有关系,并将这些关系和聚合值缓存在数据对象中。 这样做还使更新数据具有挑战性,因为更改一个对象可能会对保存已修改数据缓存的其他对象产生影响。


节俭的解决方案

我想出的维护数据的解决方案是将所有数据导出到Google Spreadsheet( 是的 ……您没有看错),这将成为我的“真理之源”。 然后,使用电子表格可以在需要时重建数据库。 实际上,我将Firestore用作美化的缓存。 感觉像是一个非常规但相当优雅的解决方案。 这是构建过程的分解:

  1. 从Google电子表格下载CSV文件。
  2. 使用CSV文件重建所有对象。
  3. 从“ Firebase Cloud Storage”中下载当前存储在数据库中的所有对象的当前快照。
  4. 将新构建的对象与下载的数据库快照进行比较。
  5. 向用户提示更改摘要,询问他们是否要应用这些更改。
  6. 将diff应用于Firestore数据库。
  7. 将最新生成的对象作为最新的数据库快照上传到“ Firebase Cloud Storage”。 下次运行构建过程时将使用它。

我喜欢此解决方案的原因如下:

  • 我不必编写大量的数据管理代码:逻辑,表单,验证等。我只需在电子表格上设置一些验证规则和条件格式即可。 这使我的代码库很好,干净,简单。
  • 每次无意间从头开始重建都解决了我对NoSQL数据存储的主要困扰:重构数据结构时,由于缺乏集合范围的架构,最终可能导致整个集合的不一致。 通过简单地修补您在整个数据集中所做的任何更改,就可以缓解该问题。
  • 令我惊讶的是,它在客户端浏览器中运行(因为该方程式中没有常规服务器)。 感觉就像是不久前,浏览器将很难做任何复杂的客户端操作,而现在,它们能够从远程CSV集合中编译成千上万个对象,进行扩散,修补和重新上传,甚至不费吹灰之力。 整个过程需要几秒钟的时间来运行,并且可以构建和分发超过3,000个对象。 利用管理员设备和浏览器的处理能力,这也是一种非常简单,高效且节约的解决方案。

完成的应用程序

您可以在这里尝试完成的应用程序。 以渐进的态度和崭新的眼光去从事一个项目真是太有趣了。 我非常喜欢它,我将继续开发该应用程序(并且对此有一些很棒的想法)。 我还计划在未来的12个月内做更多这样的项目,所以请留意这个空间!