3 ms·

htmx is really cool, but definitely different. Hibiki is a lot heavier and so it is more appropriate for internal tools, prototypes, dashboards, etc. as oppose

by sawka 5y ago

htmx is really cool, but definitely different. Hibiki is a lot heavier and so it is more appropriate for internal tools, prototypes, dashboards, etc. as opposed to fast/quick consumer facing sites. Also Hibiki "renders" data on the frontend, whereas htmx takes pre-rendered html from your backend and splices it into the dom.

lhorie 5y ago
It looks most similar in scope to petite-vue or alpine.js The usage of <template> tags instead of a x-cloak, x-src and similar attributes feels nice and clean to me. I'm curious if you've dogfooded known pitfalls of the dom-first approach. One kind of big one I recall from vue's earlier days had to do w/ perf hits from multiple repaints in recursive components (think HN comment trees). Another is related to dom edge cases when looping over a set of <tr>s (think tables w/ colspan/rowspan)
- sawka 5y ago
  Yup, had to solve a lot of issues around corner cases like these. So Hibiki HTML is built on top of React, so react / virtual DOM handles all of the DOM repaints and synthetic events, etc. For tables and weird HTML syntax, there are two built in escape hatches. You can write any HTML element using the "html" prefix, so a table can look like <html-table><html-tr><html-td>...</html-td></html-tr></html-table>. You can then nest non-table tags inside of there without breaking the natural DOM parsing. You can also reference a component using the "component" attrribute. So <tr component="local-foo"> will render the "foo" component in place of the <tr> tag. There was also a lot of dog-fooding for how to wrap <input> controls and how to make useful <table> abstractions. So there is functionality around merging attributes to children and injecting values into children (Hibiki's answer to "higher order components"). I was really focused on how to make a powerful enough component system to make using the components in HTML feel really natural.

by sawka 5y ago

lhorie 5y ago

It looks most similar in scope to petite-vue or alpine.js The usage of <template> tags instead of a x-cloak, x-src and similar attributes feels nice and clean to me. I'm curious if you've dogfooded known pitfalls of the dom-first approach. One kind of big one I recall from vue's earlier days had to do w/ perf hits from multiple repaints in recursive components (think HN comment trees). Another is related to dom edge cases when looping over a set of <tr>s (think tables w/ colspan/rowspan)

sawka 5y ago
Yup, had to solve a lot of issues around corner cases like these. So Hibiki HTML is built on top of React, so react / virtual DOM handles all of the DOM repaints and synthetic events, etc. For tables and weird HTML syntax, there are two built in escape hatches. You can write any HTML element using the "html" prefix, so a table can look like <html-table><html-tr><html-td>...</html-td></html-tr></html-table>. You can then nest non-table tags inside of there without breaking the natural DOM parsing. You can also reference a component using the "component" attrribute. So <tr component="local-foo"> will render the "foo" component in place of the <tr> tag. There was also a lot of dog-fooding for how to wrap <input> controls and how to make useful <table> abstractions. So there is functionality around merging attributes to children and injecting values into children (Hibiki's answer to "higher order components"). I was really focused on how to make a powerful enough component system to make using the components in HTML feel really natural.