Fast UI — Build a To-Do App with VanillaJS and Web Components

Come see what Microsoft’s bet on Web Components looks like

Photo by Jo Coenen — Studio Dries 2.6 on Unsplash

Fast is a component library designed and maintained by Microsoft. In fact, while you can definitely use Fast as a component library, you can do a lot more than that with it.

The way it’s been designed, Fast allows you to build a whole design system with it if that’s what you want. But let’s not get ahead of ourselves, let’s take a more detailed view of the Fast UI library and how you can use it to build your own applications.

What is Fast UI?

Fast UI is a web component-based library. Meaning that everything we’re going to be looking at from now on, it’s going to be based on web components. Microsoft is building Fast with the hope of giving developers the building blocks required to take advantage of the web’s emerging standard: the Web Component standard.

With Fast you have 3 options:

• You can simply take the provided set of components and use them to create your application. This is what we’re going to be doing today BTW.
• You can create your own components extending the ones provided by the library. If the ones provided aren’t enough, then you can customize them however you need.
• And if you’re not happy with the previous two options, you can even go as far as to create your entire design system with Fast and the foundational elements it provides.

The beauty of it is that you don’t really need a framework to use it, in fact, today I’m going to show you how to create the To-Do app with vanilla JS and Fast, with no need for anything else.

That said, they do provide you with instructions on how to use Fast with almost all major frameworks (check out their docs here).

Remember, Fast takes care of providing you with a way to abstract the presentation of your components, other aspects of it, like the business logic are completely up to you. That means Fast UI is not a replacement for React or Vue or even Next, it’s just another tool you can use to render the results on the screen.

Building a To-Do app with VanillaJS

To prove my point, I’m going to show you how you can use Fast with nothing but VanillaJS. You can look at the whole code by cloning this repo.

With that out of the way, here is what we’re going to be building: the Fast To-Do

Here is what we got:

1. An input field to enter the new task
2. Accordion elements that we can expand to finish each task
3. When finished, the task will show how many seconds it took us to close the task.
4. And we can also re-start a task once closed.

I want to focus on the front-end aspect of this app, so the content of the to-do list will not be saved, but I’m sure you can find a way to store itwith an external API once you have the UI ready.

That means we’ll have 3 main components to take care of:

1. The input field
2. The accordion list of to-do items.
3. The timer. This element will only be shown once the to-do is closed.

Let’s take a look at them.

Setting up Fast with VanillaJS

Before moving forward, we need to add Fast into our index.html file, and we can do that easily by importing the CDN version of Fast Component.

Add this into your head element:

That will import the last version of the Fast Component and every single component provided by it is going to be automatically accessible.

Now the body of your page can look like this:

Notice the fast-text-field and fast-button elements. Those are web components provided by Fast. We can simply add them without having to style them or really worry about them. That’s what I call “level 1”, just use what they give you.

Now let’s take a look at the custom todo-list tag.

Creating your own components

The ToDo List component is going to be composed of other fast-based components. The first thing you need to do to create your own component, is to export a class that extends the FastElement class. This class will take care of all the boilerplate needed to set up a web component.

And inside the class, we’ll add the required business logic methods. Check out the class below:

Note that this syntax is required because I’m using VanillaJS, if you’re using TypeScript, you’ll be able to take advantage of notations.

That said, the following parts are the most relevant:

1. The static definition property contains a configuration object that describes the component. The name property will define the tag you’ll use inside your HTML. The template will tell the component where to get the HTML content from, same as the styles property. Finally the attributes array will contain the properties of the element, you can set and get them using the setAttribute and getAttribute methods.
2. The todos array will contain a list of ToDo objects (more on this in a second) and the _taskIds will contain the same list, but with only the ids of the objects. This is not ideal, but as we’re going to see, to keep the template dynamically updating the array of elements needs to have simple elements.
3. On line 38 we need to manually register the component so it can be parsed and used by the browser. If you were using the NPM package of Fast, you wouldn’t need to do this, but since we’re using VanillaJS we have to add this step.

The template of our element looks like this:

As you can see, I’m again using fast-based components ( fast-card , fast-accordion , etc).

I’m iterating over the array of task ids with line 7. The repeat function here is unable to notice when the objects within the array change, which is why I’m iterating over an array of strings. As you can see from the toggleTask method, when the task is marked as “done” I add a “@1” to the string. This triggers the update on the repeat function and the list is automatically updated. I don’t have to worry about manually re-rendering the DOM or anything.

Because of this extra step, whenever I need a piece of information from the actual task, like its description, I have to access the parent element (see line 17 from the above template code).

Whenever I click on the button of the item (which BTW, has a dynamic text inside, depending on the state of that particular ToDo item), I call the endTask function, which looks like this:

It’s easy, I just get the element using the good old document.getElementById method, and then call the toggleTask method. That method will find the right to-do element, call its toggle method and at the same time, update the id inside _taskIds accordingly (either adding or removing the @1 string).

In line 19 of the template code, I’m adding the task timer, so let’s also look at that one.

Creating a conditionally rendered component

The task timer component is only shown when the task is closed, BUT, its timer is working from the moment the element is added to the DOM.

So we need to create a component that keeps an interval running and only renders when something else happens. We can do that with the when directive, like this:

Our counter will keep a reference to its ToDo object. Once its selected property is true then the fast-badge will be rendered, otherwise it’ll be taken out of the DOM.

The class for this component looks like this:

Notice the following:

1. The todoId attribute is set via HTML when we use the element (check out the todo-list’s template code from above).
2. The connectedCallback method is a life cycle method from web components. You can read more about these methods here. In particular, this one gets called once the element is inserted into the DOM. With this code, when the element (the timer) is added to the DOM, we use the todoId property to get the actual ToDo object and set the reference of the timer inside the ToDo by calling the setTimer method. We will use this reference inside the template’s when condition.

This is a very simple component, the most relevant part I would say, is how the conditional rendering is achieved.

There is nothing more to do, if you want to test the app, simply clone the repo, and run it with npx http-server to get it working.

As you can see, Fast UI has some very interesting extensibility properties, it’s very simple to set up and templates are very powerful. While I didn’t get into it, you could potentially create your own versions of these fast-based components and customize them however you need. They simply provide you with an unopinionated version as a basis.

If you’d like to know more about Fast UI, check out their very extensive docs or join their Discord server where you can ask questions to other Fast users.

Have you tried Fast UI before? What are your thoughts on it?

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

→ Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

→ Micro-Frontends

→ Design Systems

→ Code-Sharing and reuse

→ Monorepos

Learn more

How We Build Micro Frontends

How we Build a Component Design System

How to reuse React components across your projects

5 Ways to Build a React Monorepo