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

André Staltz
InstructorAndré Staltz
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 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.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today