# Is it just me, or is Hyperscript hideous?

**URL:** https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635
**Category:** Development
**Created:** [October 22, 2019, 1:42pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635 "2019-10-22T13:42:36Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 22, 2019, 1:42pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/1 "2019-10-22T13:42:37Z")

</div>

Just venting here, but having used more templating languages than I care to remember (Jinja2, ERB, FTL, XSLT, JSX, Handlebars, etc), I find Hyperscript utterly horrid to work with.

In no particular order, the things it breaks include:

- Code portability (can’t copy/paste html snippets without running them through a converter)
- Syntax highlighting (turns everything into a huge blob) eg  
 ![01](https://global.discourse-cdn.com/meta/original/3X/0/4/0463daa5dc757be07a884c25332affb7c0c3531b.png)vs ![56](https://global.discourse-cdn.com/meta/original/3X/0/f/0f1d3c2a8f93d1d85f40f630569137788de62304.png)
- Code completion is FUBAR, let alone time-savers like [https://emmet.io](https://emmet.io/)

I never thought anything would make me pine for the bad old days of PHP, but Hyperscript’s done it!

Is it just me?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [October 22, 2019, 2:35pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/4 "2019-10-22T14:35:14Z")

</div>

Yeah I agree that it’s not the best to work with, especially compared to handlebars (which we also use) where you can write HTML as you’d expect.

We started using virtual-dom/virtual-hyperscript in places where we needed to improve performance. The topic of our multiple templating systems has been something we started talking about within the team recently; we don’t have any concrete plans yet, but realize it would be a good idea to simplify. Maybe this means we won’t use virtual-hyperscript anymore? Time will tell.

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [October 22, 2019, 2:41pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/5 "2019-10-22T14:41:51Z")

</div>

The syntax is a little weird to get used to. I remember being really tripped out by it when I first started writing Discourse themes, but I eventually figured out how it works. It’s also possible to generate raw HTML via widget as well.

> <https://github.com/discourse/discourse/blob/f0f03acb2ce56e4e153685b1498517736dd0a695/app/assets/javascripts/discourse/widgets/quick-access-item.js.es6#L36-L43>

I’m not the most skilled at being able to say when to use what and where, but it’s an option to consider if you’re doing some custom work, need to write a widget, and are having difficulty using virtual-hyperscript.

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 22, 2019, 3:19pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/6 "2019-10-22T15:19:10Z")

</div>

That’s worth knowing – thanks! I spent an hour or two manually re-writing html fragments, but between this and html2hyperscript, I’ve got a couple of options to play with 🙂

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 22, 2019, 3:30pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/7 "2019-10-22T15:30:54Z")

</div>

Interesting… I thought one of the big benefits of Ember was the speed of the GlimmerVM. Is virtual-dom performance that much of an improvement over Glimmer?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [October 22, 2019, 3:41pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/8 "2019-10-22T15:41:59Z")

</div>

I think we started using virual-dom before glimmer was a possibility? @eviltrout would know way better than I would.

This also reminded me that using handlebars in widgets using glimmer is possible… as of [FEATURE: Use Glimmer compiler for widget templates · discourse/discourse@dffb1fc · GitHub](https://github.com/discourse/discourse/commit/dffb1fc4ee8a4d58f48145decb1590a304e8cf7d)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 22, 2019, 3:48pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/9 "2019-10-22T15:48:41Z")

</div>

Discourse is [from 2013](https://blog.codinghorror.com/civilized-discourse-construction-kit/), we started complaining about [Android performance in 2015](https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889), added [virtual-dom in 2016](https://eviltrout.com/2016/02/25/fixing-android-performance.html), and Glimmer [was announced in 2017](https://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/) and it’s being actively [integrated into Ember](https://www.pzuraq.com/coming-soon-in-ember-octane-part-5-glimmer-components/).

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 22, 2019, 4:23pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/10 "2019-10-22T16:23:20Z")

</div>

I see. That timeline helps – thanks! So, I suppose the easiest course would be to wait until Glimmer performance is equivalent to virtual-dom, then dump it and revert to pure Ember?

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 22, 2019, 4:28pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/11 "2019-10-22T16:28:37Z")

</div>

That feature is cool, but I’m having some trouble getting it to work. I’ve `require`’d `discourse/widgets/hbs-compiler`, but I still get `error: hbs is not a function`

 ![29](https://global.discourse-cdn.com/meta/original/3X/c/b/cba2746432722f489611a810296fd2776af93bf8.png)

Any idea why?

I’m on 2.4.0beta5, and using theme-cli, if that helps.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 22, 2019, 8:59pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/12 "2019-10-22T20:59:14Z")

</div>

I tried using templates within widgets but found it was of limited use without apparent support for helpers?:

> [@Using a hbs file as the template for widget](https://meta.discourse.org/t/using-a-hbs-file-as-the-template-for-widget/121420/4):
>
> Related: Does this support helpers?, e.g.: \<td style={{border-color c.color}}\> Because I can’t get that to work if supplied as part of the template.

that was annoying as you couldn’t then re-use existing standard code elsewhere in the code-base.

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 23, 2019, 10:20am UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/13 "2019-10-23T10:20:04Z")

</div>

Yeah, sadly, I think trying to use handlebars instead of hyperscript is currently more trouble than it’s worth.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [October 23, 2019, 10:25am UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/15 "2019-10-23T10:25:54Z")

</div>

We have some current brainstorming on how to rationalize our templating systems. I will dig into this and make you an answer to your specific issue in the next days.

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 23, 2019, 10:28am UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/16 "2019-10-23T10:28:44Z")

</div>

Cool – thanks 🙂

I’d be happy to be part of that discussion and/or find other ways to pitch in 🙂

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [October 23, 2019, 10:29am UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/17 "2019-10-23T10:29:44Z")

</div>

There s no real discussion of WHAT we want to do, we want full hbs. The question is more:

- is perf good enough now?
- how do we transition existing to this?

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 23, 2019, 10:38am UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/18 "2019-10-23T10:38:31Z")

</div>

Aah.. ok.

Yeah. The transition could be a bit thorny. In principle, we could build the reverse equivalent of html2hyperscript, but in practice, most hyperscript is likely to be so intertwined with the widget’s js, that it could quickly become a nightmare.

I suppose the simplest solution is to retain hyperscript support for a while, and perhaps deprecate it down the line?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 23, 2019, 1:35pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/19 "2019-10-23T13:35:07Z")

</div>

Is it worth waiting for Octane before investing further in this area?

> **[Coming Soon in Ember Octane - Part 5: Glimmer Components](https://blog.emberjs.com/coming-soon-in-ember-octane-part-5/)**
>
> (This post was originally published on www.pzuraq.com) Hello again, and welcome back! This is the fifth and final entry in the multipart Coming Soon in Ember Octane series, where we're...

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [October 23, 2019, 1:44pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/20 "2019-10-23T13:44:35Z")

</div>

I would say quite the opposite in fact, having rationalized our template usage before octane, will help us to migrate to angle bracket syntax more easily when we want to.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [October 24, 2019, 8:49am UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/21 "2019-10-24T08:49:29Z")

</div>

I will give a more detailed example in few days, but I can confirm it works.

```plaintext
import hbs from 'discourse/widgets/hbs-compiler';
import { createWidget } from "discourse/widgets/widget";

export default createWidget("foo", {
  template: hbs`
    <p>MY TEMPLATE</p>
  `
});

```

Used in a post with [wrap] and WidgetGlue:

 ![02](https://global.discourse-cdn.com/meta/original/3X/0/c/0c44e51095fb6f33a8279819d9da7e744429514a.png)

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [October 24, 2019, 10:01am UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/22 "2019-10-24T10:01:27Z")

</div>

@edL I see `withPluginApi` in your backtrace - are you trying to use the `hbs` compiler inside a theme `<script>` tag? Unfortunately the widget handlebars compiler doesn’t work in that scenario.

You need to define the widget in a separate module using the `import` statements which @j.jaffeux included above. You can do that in a theme using the [multi-file javascript support](https://meta.discourse.org/t/splitting-up-theme-javascript-into-multiple-files/119369).

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 24, 2019, 3:37pm UTC](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/23 "2019-10-24T15:37:51Z")

</div>

Oh, I see now – that’s really helpful! Thanks, David 🙂

[Next page](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635.md?page=2)
