快速用户界面--用VanillaJS和Web组件构建一个待办事项应用程序
来看看微软对Web组件的赌注是什么样子的吧
照片：Jo Coenen - Studio Dries 2.6onUnsplash
Fast是一个由微软设计和维护的组件库。事实上，虽然你肯定可以把Fast作为一个组件库来使用，但你可以用它做的事情远远不止这些。
按照它的设计方式，Fast允许你用它建立一个完整的设计系统，如果这是你想要的。但是，让我们先别着急，让我们更详细地了解一下Fast UI库，以及你如何使用它来建立你自己的应用程序。
什么是Fast UI？
FastUI是一个基于网络组件的库。意思是说，从现在开始我们要看的一切，都将是基于网络组件的。微软建立Fast的目的是希望给开发者提供所需的构件，以利用网络的新兴标准：网络组件标准。
使用Fast，你有3个选择。
- 你可以简单地采用所提供的组件集并使用它们来创建你的应用程序。这就是我们今天要做的事情，BTW。
- 你可以创建你自己的组件，扩展库中提供的组件。如果所提供的组件还不够，那么你可以根据自己的需要对它们进行定制。
- 如果你对前面两个选项不满意，你甚至可以用Fast和它提供的基础元素创建你的整个设计系统。
它的美妙之处在于，你并不真的需要一个框架来使用它，事实上，今天我将向你展示如何用vanilla JS和Fast创建To-Do应用程序，而不需要其他任何东西。
也就是说，他们确实为你提供了如何在几乎所有主要框架中使用Fast的说明（在这里查看他们的文档）。
请记住，Fast为你提供了一种抽象化组件的方法，其他方面，如业务逻辑，完全取决于你。这意味着Fast UI不是React或Vue甚至Next的替代品，它只是你可以用来在屏幕上呈现结果的另一个工具。
用VanillaJS构建一个待办事项应用程序
为了证明我的观点，我将向你展示你如何使用Fast，只用VanillaJS。你可以通过克隆这个 repo 来查看整个代码。
说完了这些，下面是我们要做的：Fast To-Do
这就是我们得到的东西。
- 一个输入字段，用于输入新任务
- 我们可以展开的手风琴元素，以完成每个任务
- 完成后，任务会显示我们关闭任务所花的时间。
- 而且，一旦关闭，我们还可以重新启动一个任务。
我想把重点放在这个应用程序的前端方面，所以待办事项列表的内容不会被保存，但我相信你可以找到一种方法，在你的用户界面准备好后用外部API来存储它。
这意味着我们将有3个主要组件需要处理。
- 输入栏
- 待办事项的风琴式列表。
- 计时器。这个元素只有在待办事项被关闭后才会显示。
让我们来看看它们。
用VanillaJS设置Fast
在前进之前，我们需要将Fast添加到我们的index.html文件中，我们可以通过导入CDN版本的Fast组件轻松做到这一点。
把这个添加到你的head元素中。
这将导入Fast组件的最后一个版本，它所提供的每一个组件都将被自动访问。
现在，你的页面的主体可以看起来像这样。
注意fast-text-field和fast-button元素。这些都是由Fast提供的网络组件。我们可以简单地添加它们，而不需要对它们进行样式设计或真正地担心它们。这就是我所说的 "一级"，只需使用他们给你的东西。
现在让我们看一下自定义的todo-list标签。
创建你自己的组件
ToDo List组件将由其他基于快速的组件组成。要创建自己的组件，你需要做的第一件事是导出一个扩展了FastElement类的类。这个类将负责所有设置网络组件所需的模板。
而在这个类里面，我们将添加所需的业务逻辑方法。请看下面的类。
请注意，这种语法是必须的，因为我使用的是VanillaJS，如果你使用的是TypeScript，你就可以利用符号的优势。
也就是说，下面的部分是最相关的。
- 静态定义属性包含一个描述该组件的配置对象。名称属性将定义你在HTML里面使用的标签。模板将告诉组件从哪里获得HTML内容，与样式属性相同。最后，属性数组将包含该元素的属性，你可以使用setAttribute和getAttribute方法来设置和获取它们。
- todos数组将包含ToDo对象的列表（稍后会详细介绍），_taskIds将包含相同的列表，但只包含对象的id。这并不理想，但正如我们将要看到的，为了保持模板的动态更新，元素数组需要有简单的元素。
- 在第38行，我们需要手动注册该组件，以便它能被浏览器解析和使用。如果你使用的是Fast的NPM包，你就不需要这样做，但由于我们使用的是VanillaJS，所以我们必须增加这个步骤。
我们的元素的模板看起来像这样。
正如你所看到的，我再次使用了基于Fast的组件（fast-card，fast-accordion，等等）。
我在第7行对任务ID的数组进行迭代。这里的重复函数无法注意到数组中的对象发生变化，这就是为什么我在迭代一个字符串数组。正如你在toggleTask方法中看到的，当任务被标记为 "完成 "时，我在字符串中添加了一个"@1"。这就触发了重复函数的更新，列表就会自动更新。我不需要担心手动重新渲染DOM或任何东西。
由于这个额外的步骤，每当我需要一个来自实际任务的信息，如它的描述，我必须访问父元素（见上述模板代码的第17行）。
每当我点击这个项目的按钮（它里面有一个动态的文本，取决于这个特定ToDo项目的状态），我就会调用endTask函数，它看起来像这样。
这很简单，我只是使用古老的document.getElementById方法获得元素，然后调用toggleTask方法。该方法将找到正确的待办事项元素，调用其toggle方法，同时，相应地更新_taskIds中的id（增加或删除@1字符串）。
在模板代码的第19行，我正在添加任务计时器，所以我们也来看看这个。
创建一个有条件渲染的组件
任务定时器组件只在任务关闭时显示，但是，它的定时器从元素被添加到DOM的那一刻起就开始工作了。
所以我们需要创建一个组件，让它保持一个间隔运行，并且只在其他事情发生时才显示出来。我们可以用when指令来做到这一点，像这样。
我们的计数器将保持一个对其ToDo对象的引用。一旦它的selected属性为真，那么fast-badge将被渲染，否则它将被从DOM中取出。
这个组件的类看起来像这样。
注意以下内容。
- 当我们使用该元素时，todoId属性是通过HTML设置的（请看上面todo-list的模板代码）。
- connectedCallback方法是网络组件的一个生命周期方法。你可以在这里阅读更多关于这些方法的信息。特别是，一旦元素被插入到DOM中，这个方法就会被调用。通过这段代码，当元素（计时器）被添加到DOM中时，我们使用todoId属性来获取实际的ToDo对象，并通过调用setTimer方法来设置ToDo中的计时器的引用。我们将在模板的when条件中使用这个引用。
这是一个非常简单的组件，我想说的是，最相关的部分是如何实现条件渲染的。
没有什么可做的了，如果你想测试这个应用，只需克隆这个 repo，然后用npx http-server运行它就可以了。
正如你所看到的，Fast UI有一些非常有趣的可扩展性属性，它的设置非常简单，模板也非常强大。虽然我没有深入研究，但你有可能创建你自己的这些基于快速的组件的版本，并根据你的需要对它们进行定制。他们只是为你提供了一个没有意见的版本作为基础。
如果你想了解更多关于Fast UI的信息，可以查看他们非常广泛的文档，或者加入他们的Discord服务器，你可以向其他Fast用户提问。
你以前尝试过Fast UI吗？你对它有什么看法？
比特：建立更好的UI组件库
向你问好 比特.它是组件驱动的应用开发的第一大工具。
通过Bit，你可以将你的应用程序的任何部分创建为一个可组合和可重用的 "组件"。你和你的团队可以共享一个组件工具箱，以便更快、更一致地共同构建更多的应用程序。
- 创建和组成 "应用程序构件"。UI元素、完整功能、页面、应用程序、无服务器或微服务。使用任何JS堆栈。
- 在团队中轻松分享和重复使用组件。
- 跨项目快速更新 组件。
- 让困难的事情变得简单。单体、设计系统和微前端。
了解更多
Fast UI--用VanillaJS和Web组件构建一个待办事项应用》最初发表于Bits and Pieceson Medium，人们在这里通过强调和回应这个故事来继续对话。