Use Hyperscript in Cycle.js as an Alternative to Template Languages

André Staltz
InstructorAndré Staltz

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

[00:00] Now, we're able to write full-blown applications inside the main function, because I can declare what events we're interested in, and how to use those events to create new elements on the DOM. We can still improve this code.

[00:14] One thing that annoys my eyes, at least. Is this object here to describe those elements. This is essentially creating the view. Usually, we use template languages like Handlebars, JSX, or Pug. One simple way we can achieve that is to write a function that returns those objects for us.

[00:33] I'm going to call that function H as a shortcut to HTML. It takes the tag name and the children as arguments. It just returns the object that has those two and children. Then I can replace the usage here instead of creating the object directly.

[00:54] I'm just going to call H with span and that array there like that, as well as for the outer element, I'm going to use H of H1 as the tag name, and then the children array. That simplified our code even more. It looks a bit better, starting to look like something like a template language.

[01:28] We can take this idea even further by writing a function called H1 that now takes only the children. This will just return an object that has tag name, is already H1. We don't need to specify the tag name as an argument. We just pass the children.

[01:46] Then something similar for span, and this will improve our code even further. Can write that and this. This is looking much nicer. You can see the hierarchical structure here, just like you usually have in HTML or Pug.

[02:07] It turns out that we don't need to have our full-blown template language. We can just use JavaScript functions to achieve this.