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 835 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Hyperscript as our alternative to template languages

2:53 RxJS lesson by

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

We are starting to be able to write full-blown applications inside the main function because it can declare what events we are interested in, and how to use them to create new elements on the DOM.

But we can improve this code related to the DOM driver even further. One thing that annoys my eyes is this object, here, to describe the elements. Essentially, it's creating a view in a very verbose way, and we usually use template languages like Handlebars or JSX or Jade.

One simple way we can solve this problem is by writing a function that returns those objects for us. I'm calling that function H, as in HTML, just as the H as hyper is a short name, and then we take the tag name as the first argument and children.

It simply returns an object with those tag names and that field of children. Then we can reuse that function here to replace this object. We can call H with a span as a tag name and the children are arrayed with that second elapsed string. It replaces the object because it returns the same object, and it still works.

The reason why we're introducing this function in the first place is that it looks really similar to what exists in cycle-dom, and it's a function called hyperscript. That's where the H comes from. That's our alternative to a template language.

This is a precursor to what we're going to see in cycle-dom. We're going to replace this outermost object, as well, with return H of H1 as a tag name, and the children are this array with the span. Then we can also simplify this error function like that.

Given an I number, we just map that to this piece of view, you could say. We could simplify this even further by taking advantage of the tag name as the function name, so then we don't need to specify the tag name anymore, just the children because we can return an object saying the tag name is now H1, and children are this children.

If you do this also for span, then we can just call these functions here H1 and span, and then it starts looking more like HTML or Jade. Then we don't even need a template language in our app. We can just use JavaScript functions. That's what we're going to see, as well, in cycle-dom.

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