Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Making our toy DOM Driver more flexible

5:22 RxJS lesson by

Our previous toy DOM Driver is still primitive. We are only able to send strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.

Avatar
Kevin

Related to the characteristics of Observables (also the advice Ben Lesh communicated regarding stream processing advantages of leveraging Observable from typical JS collection objects in a Egghead.io course video), what's your thoughts on leveraging the Observable.fromArray() method for obj.children the moment map, filter, and forEach was needed to be used?

In reply to egghead.io
Avatar
Andre

Well, specially in the case of our toy DOM Driver, it's irrelevant. Also, it's probably irrelevant for small collections. Leveraging Observable operators for typical JS collections probably makes sense when your collection is a least a thousand of items large.

In reply to Kevin

Now that we have Cycle core imported, which is just the run function, this isn't anymore a toy version of Cycle.js, we are actually using Cycle.js, except for the drivers. Cycle without drivers is nothing really, because drivers are plug-ins that allow you to create effects, and without effects, nothing happens. Our drivers are still quite toy version, this is very primitive. We are only able to send strings from the main as the text content of the container element.

We cannot yet create headers, and inputs, and all sorts of fantasy DOM elements from the main function. Let's extend our DOM driver to be more powerful. Instead of strings as the sync, let's return instead an object that will describe what elements should exist.

So this function returns an object, and this object describes the element that we want to create has a tag name of H1, so it's a header, and its children are an array with the string saying seconds elapsed is i, so now that we have this object as the sync return to the DOM driver, the DOM driver will not receive a text stream anymore, it will receive an object stream. This object not the element because it's just an object describing what element should exist, so we need to create that object.

Let's make a function called createElement given a description object. We're going to create that element using the function, and then we are going to append as a child this element that we create. So given an object we will create an element document.createElement with the tag name described and then we will set the innerHTML to be let's say the first child, which is the string that we know in this case the string. Of course we need to return our element.

There we go, except as you noticed we are appending many header elements because of course for every description object we are just appending the container element. Instead what we need to do is reset the container innerHTML every time we receive this description object. Now every second it is clearing the container and it is creating this element from the description object and it's appending that element.

But we still have some hard coded code, this part here which doesn't look good, because what if instead of a string you want to have another element, so we need to return here as the child another object that will describe another element, like let's say a SPAN. The SPAN will have a string as child. Now we need to improve our createElement because this object child, zero is now an object, it's not a string.

What we need to do is for every child in this description object we need to filter and see if the child object is an object, then we know that we need to create yet another element, that's why we will map those objects to createElement, so this is now a recursive function, so it means that when it's processing the children of this header, it will notice this object and then it's going to create an element for this description object. For each of these we are going to append the element.

Then there are the other type if one of these childs are a string, in this case the child is a string, then we need to set the innerHTML of the element to be this string. Now we can remove this part. There it goes. If we inspect this element here with Chrome's tools, we can see that there's an H1 and inside it has a SPAN. That's how we go about improving our DOM driver to be more useful so that we can create full-blown applications by describing our entire DOM, our entire desired DOM here in the main.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?