
Ijk – Transforms arrays into virtual DOM trees - lukejacksonn
https://github.com/lukejacksonn/ijk
======
always_good
What makes Hiccup so nice in the Clojure world is that Paredit can be used
here which is the tool you're already using to manipulate data structures.

For example, with Paredit, you can create an element and then move it
prev/next/up/down a tree with muscle memory you're already using for the rest
of your code.

When I re-entered the Javascript world, I tried arrays-for-html but realized
it's unbearable without manipulation tooling. I think something like JSX makes
more sense at that point since I find you're more likely to already be using
an HTML manipulation tool like Emmet which is more pleasant than hand-editing
array structures.

~~~
emidln
evil-lisp-state (used by default in Spacemacs) is a paredit-like thing that
seems to work with parens, braces, and brackets in any language I happen to be
using. I've used it with Python and Javascript without really thinking about
it.

I've never used paredit in emacs, but I suspect that it might be amiable to
working on Javascript as well.

More annoying to me would be all of the extra quotes and commas I need
compared to Hiccup implementations in Clojure.

------
wrren
I like the syntax, but I have to say that I prefer JSX. The real advantage of
JSX is that it's very similar to HTML and developers have been reading,
mentally modeling and reasoning about HTML -> DOM translation for decades.

~~~
couchand
The real problem with JSX is that it's _almost_ HTML, but not quite, so you
constantly have to fight against your assumptions about how it should work.

At least JS is really just JS, and developers have been reading, mentally
modeling and reasoning about JS -> execution translation for decades.

~~~
spankalee
For an alternative to JSX that's actually real HTML, but also real JS and
requires no compiler, checkout lit-html: [https://github.com/Polymer/lit-
html](https://github.com/Polymer/lit-html)

It lets you write HTML templates as JS template literals:

    
    
        let post = (title, body) => html`
          <h1>${title}</h1>
          <div>${body></div>`;
    

But unlike using innerHTML, it stamps DOM from <template> elements, and only
updates parts that change, actually doing less work than VDOMs.

Lots of editors have automatic support for inline HTML tagged with a tag named
"html", so you'll get syntax highlighting in say, Atom. And VS Code has a
plugin that adds intellisense.

------
aaron-lebo
Reminiscent of Breve.

[https://github.com/cwells/breve](https://github.com/cwells/breve)

I don't see a huge advantage over hyperscript (hyperapp and mithril both use
it), but that _is_ a ridiculously small codebase.

The JS hate is kind of funny around here, because when you dig into stuff like
this, you realize that JS is very lispy in ways (it's easy to build up trees
of HTML dynamically). In the mid aughts on r/programming people would rant and
rave about the kind of stuff Smalltalk's Seaside could do. Now that's
possible, most of the disadvantages have been worked out, and people hate it.

Can't win, can you?

~~~
masklinn
It's basically hiccup
([https://github.com/weavejester/hiccup](https://github.com/weavejester/hiccup)).

------
adius
This synatx is called JsonML and I'm maintaining a stable and highly usable
implementation:
[http://adriansieber.com/shaven](http://adriansieber.com/shaven)

~~~
lukejacksonn
Cool implementation. What is JSON about it though? What made you decide to
pass children before props?

~~~
lucideer
> _What is JSON about it though?_

"JSON" originally stood for "JavaScript Object Notation" \- the restrictions
on double-quotes and unquoted keys are arbitrary extras on top of that
concept, but otherwise JSONML is, technically, another JavaScript Object
Notatation for Javascript that is also a Markup Language.

Admittedly, the use of the term JSON these days implies that your syntax will
be parsable by a JSON parser, which JSONML might not be.

------
chadhietala1
The Glimmer VM uses an IR that looks very similar to this and based on the
same premise, code as data.
[https://engineering.linkedin.com/blog/2017/03/glimmer--
blazi...](https://engineering.linkedin.com/blog/2017/03/glimmer--blazing-fast-
rendering-for-ember-js--part-1).

------
athenot
I guess it would be useful for programmatically building the DOM tree. But for
writing DOM fragments, pug[1] is also an option. I happen to like the clean-
looking syntax. Transposing their example:

    
    
        body
          h1 Hello World
          input(type='range')
          input(onclick='console.log') Log event
          ul
            li 1
            li 2
            li 3
          unless false
            span Hidden
    
    

[1] [https://pugjs.org/api/getting-
started.html](https://pugjs.org/api/getting-started.html)

~~~
natbobc
Looks a lot like slim [1] or even it's grand-daddy HAML [2]

[1] [http://slim-lang.com/](http://slim-lang.com/) [2]
[http://haml.info/](http://haml.info/)

~~~
ricardobeat
PUG used to be called 'Jade', and was basically HAML-for-nodejs.

------
sendben2
Terse is definitely the right word.

------
undecisive
Interesting approach. I did something similar a while back, took a more
function-based approach:
[https://github.com/undecided/tg](https://github.com/undecided/tg)

At that point, I hadn't really done much react-style apps - will have to see
how well that works with React!

~~~
lukejacksonn
I got it working with preact.. didn't try with react!

------
k__
Also [https://github.com/Jador/react-hyperscript-
helpers/blob/mast...](https://github.com/Jador/react-hyperscript-
helpers/blob/master/README.md)

which is even more terse

~~~
lukejacksonn
We have something like this for hyperapp
([https://github.com/hyperapp/html](https://github.com/hyperapp/html)). The
aim of this variant was to experiment to see wether it is feasible to rid of
view dependencies (either `h` or precompiled tags like `h1` etc.)

------
lewis500
Looks awesome. Makes me wish I still used LiveScript because of the \string
syntax and other features that would go great with ijk.

You refer to h but what is it? I searched around but obviously something
called h is hard to find.

~~~
k__
[https://github.com/ohanhi/hyperscript-
helpers](https://github.com/ohanhi/hyperscript-helpers)

------
ricardobeat
2010 strongly echoes in my head:
[https://github.com/jed/fab](https://github.com/jed/fab)

------
gliechtenstein
You guys should check out [https://www.celljs.org](https://www.celljs.org) if
you like this type of approach

------
baq
nevow.stan did that back in 2004 :)

[https://github.com/twisted/nevow/blob/master/nevow/stan.py](https://github.com/twisted/nevow/blob/master/nevow/stan.py)

~~~
emidln
nevow.stan uses objects to represent its ast. This isn't the same because it
misses the point: objects aren't data in python (or most places, since objects
are rarely printable/readable).

Practical Common Lisp demonstrates a spiritual predecessor that works on data
from 2003[0]. I'm sure there are much older implementations floating around
for CL and Scheme but I don't care to look for them. This is a common idiom in
lisps.

[0] [http://www.gigamonkeys.com/book/practical-an-html-
generation...](http://www.gigamonkeys.com/book/practical-an-html-generation-
library-the-interpreter.html)

------
ivanceras
Improve it a little bit more by by removing the single quote by turning the
html tags into functions that accepts 2 arrays: the attributes and the child
elements, by this time you will come across with elm in which expressing the
html document tree fits perfectly in the language syntax and semantics.

~~~
lukejacksonn
We already have something similar to this at hyperapp.. it is
[https://github.com/hyperapp/html](https://github.com/hyperapp/html). But yes,
as mentioned by @masklinn, the drawback is you then have to define every
element and then import all those definitions. With ijk you can write
dependency free views (no import of h or h1, h2, etc.)

~~~
gberger
Not necessarily, you could have `h.h1` and `h.span` and `h.myCustomElement`
just by using Proxies from Ecmascript 6

[https://makandracards.com/makandra/44070-javascript-hash-
obj...](https://makandracards.com/makandra/44070-javascript-hash-object-with-
default-value)

------
xori
Love it, I see this replacing my express templates. Well done.

