8 ms·

Ijk – Transforms arrays into virtual DOM trees

59 points by lukejacksonn 9y ago

aaron-lebo 9y ago
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?
- zimablue 9y ago
  also hiccup in clojureland, https://github.com/weavejester/hiccup https://github.com/weavejester/hiccup which has an abandoned looking python port: https://github.com/pascience/pyhiccup https://github.com/pascience/pyhiccup Thanks, I hadn't seen Breve! I was looking for exactly this a while ago.
- masklinn 9y ago
  It's basically hiccup (https://github.com/weavejester/hiccup https://github.com/weavejester/hiccup).
- lukejacksonn 9y ago
  Haha! The main advantage I see in a syntax like this (as supposed to h by hyperapp for example) is.. not having to write `h` all the time, that and optional props. I have been thinking of adding shorthand for id/classes in the tag name like hyperscript or JSnoX. That would mean you could write `['input#search.large']`
- egeozcan 9y ago
  IMHO the quirkiness of JS is not the main reason for JS hate, neither is the experiments being done with it. People hate JS because they have to use JS. Clojure, C#, Go or any other language would have the same destiny if they were the only language which worked on browsers.
- kitd 9y ago
  I like JS even though I'm a strong-types-type. I appreciate its flexibility and the way you can do clever things with it (like this project eg). It has been let down though by what was initially a v poor module system. This then led to the myriad toolchains/PMs/bundlers/language processors that added a huge amount of grit to what should have been a blindly simple development process. Some shoddy implementations have been allowed to mature far longer than they should have, and we're still trying to recover. But the base language is fine IMHO.
ivanceras 9y ago
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.
- masklinn 9y ago
  The annoyance with that is you have to pre-define every element. That's high-value in a language like Elm because you can refine element-generating functions (e.g. not allow children elements for empty elements), it's not really useful in a dynamically typed language.
- lukejacksonn 9y ago
  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 9y ago
    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-object-with-default-value https://makandracards.com/makandra/44070-javascript-hash-obj...
  - couchand 9y ago
    > you can write dependency free views Well, explicit-dependency-free, but there's still an implicit dependency on the tag names. Granted, those are just standard HTML, but something is lost by not checking them at compile time. OTOH, you could write a linter for that...
wrren 9y ago
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.
- aaron-lebo 9y ago
  That's the disadvantage, too: you gotta use html! Where are the lispers to talk about how much better sexps are? Even with decades of knowledge, I think you'll find that devs can transition to the non-html model really, really quickly, and then it's nice because everything is a single uniform language.
  - hashkb 9y ago
    > Where are the lispers to talk about how much better sexps are? Well... there is the OP...
- lukejacksonn 9y ago
  I like to write my apps with one language where possible. I find the switch in context to much of an overhead.. but I am aware this is personal preference. Use what makes you happy :) it all gets compiled to vdom trees anyway!
- IgorPartola 9y ago
  To be fair, you could say the same thing about Markdown. And yet here we are.
  - yoz-y 9y ago
    What is the link between the two? Markdown does not really look or works "like" HTML, it just happens to compile to it.
    - IgorPartola 9y ago
      Again just being pedantic here. This thing doesn’t look or work like HTML, but it does happen to compile to it too. I find Markdown way easier to read than HTML, and I read both all day long. Maybe having two decades of experience reading HTML Zoe whatever isn’t enough to offset the superiority of this format? (No idea. I dislike JSX, and I don’t think this is actually more readable beyond cute little examples, but I might be wrong.)
undecisive 9y ago
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 9y ago
  I got it working with preact.. didn't try with react!
  - deleted 9y ago
    [deleted]
sendben2 9y ago
Terse is definitely the right word.
adius 9y ago
This synatx is called JsonML and I'm maintaining a stable and highly usable implementation: http://adriansieber.com/shaven http://adriansieber.com/shaven
- lukejacksonn 9y ago
  Cool implementation. What is JSON about it though? What made you decide to pass children before props?
  - lucideer 9y ago
    > 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.
deleted 9y ago
[deleted]
k__ 9y ago
Also https://github.com/Jador/react-hyperscript-helpers/blob/master/README.md https://github.com/Jador/react-hyperscript-helpers/blob/mast... which is even more terse
- lukejacksonn 9y ago
  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 9y ago
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.
- gwn7 9y ago
  Search for "hyperscript" :)
- Vinnl 9y ago
  See https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript
- k__ 9y ago
  https://github.com/ohanhi/hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers
baq 9y ago
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 9y ago
  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-library-the-interpreter.html http://www.gigamonkeys.com/book/practical-an-html-generation...
always_good 9y ago
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 9y ago
  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.
chadhietala1 9y ago
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--blazing-fast-rendering-for-ember-js--part-1 https://engineering.linkedin.com/blog/2017/03/glimmer--blazi....
gliechtenstein 9y ago
You guys should check out https://www.celljs.org https://www.celljs.org if you like this type of approach
deleted 9y ago
[deleted]
xori 9y ago
Love it, I see this replacing my express templates. Well done.
athenot 9y ago
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 9y ago
  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 9y ago
    PUG used to be called 'Jade', and was basically HAML-for-nodejs.
ricardobeat 9y ago
2010 strongly echoes in my head: https://github.com/jed/fab https://github.com/jed/fab

59 points by lukejacksonn 9y ago

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?

zimablue 9y ago
also hiccup in clojureland, https://github.com/weavejester/hiccup https://github.com/weavejester/hiccup which has an abandoned looking python port: https://github.com/pascience/pyhiccup https://github.com/pascience/pyhiccup Thanks, I hadn't seen Breve! I was looking for exactly this a while ago.
masklinn 9y ago
It's basically hiccup (https://github.com/weavejester/hiccup https://github.com/weavejester/hiccup).
lukejacksonn 9y ago
Haha! The main advantage I see in a syntax like this (as supposed to h by hyperapp for example) is.. not having to write `h` all the time, that and optional props. I have been thinking of adding shorthand for id/classes in the tag name like hyperscript or JSnoX. That would mean you could write `['input#search.large']`
egeozcan 9y ago
IMHO the quirkiness of JS is not the main reason for JS hate, neither is the experiments being done with it. People hate JS because they have to use JS. Clojure, C#, Go or any other language would have the same destiny if they were the only language which worked on browsers.
kitd 9y ago
I like JS even though I'm a strong-types-type. I appreciate its flexibility and the way you can do clever things with it (like this project eg). It has been let down though by what was initially a v poor module system. This then led to the myriad toolchains/PMs/bundlers/language processors that added a huge amount of grit to what should have been a blindly simple development process. Some shoddy implementations have been allowed to mature far longer than they should have, and we're still trying to recover. But the base language is fine IMHO.

ivanceras 9y ago

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.

masklinn 9y ago
The annoyance with that is you have to pre-define every element. That's high-value in a language like Elm because you can refine element-generating functions (e.g. not allow children elements for empty elements), it's not really useful in a dynamically typed language.
lukejacksonn 9y ago
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 9y ago
  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-object-with-default-value https://makandracards.com/makandra/44070-javascript-hash-obj...
- couchand 9y ago
  > you can write dependency free views Well, explicit-dependency-free, but there's still an implicit dependency on the tag names. Granted, those are just standard HTML, but something is lost by not checking them at compile time. OTOH, you could write a linter for that...

wrren 9y ago

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.

aaron-lebo 9y ago
That's the disadvantage, too: you gotta use html! Where are the lispers to talk about how much better sexps are? Even with decades of knowledge, I think you'll find that devs can transition to the non-html model really, really quickly, and then it's nice because everything is a single uniform language.
- hashkb 9y ago
  > Where are the lispers to talk about how much better sexps are? Well... there is the OP...
lukejacksonn 9y ago
I like to write my apps with one language where possible. I find the switch in context to much of an overhead.. but I am aware this is personal preference. Use what makes you happy :) it all gets compiled to vdom trees anyway!
IgorPartola 9y ago
To be fair, you could say the same thing about Markdown. And yet here we are.
- yoz-y 9y ago
  What is the link between the two? Markdown does not really look or works "like" HTML, it just happens to compile to it.
  - IgorPartola 9y ago
    Again just being pedantic here. This thing doesn’t look or work like HTML, but it does happen to compile to it too. I find Markdown way easier to read than HTML, and I read both all day long. Maybe having two decades of experience reading HTML Zoe whatever isn’t enough to offset the superiority of this format? (No idea. I dislike JSX, and I don’t think this is actually more readable beyond cute little examples, but I might be wrong.)

undecisive 9y ago

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 9y ago
I got it working with preact.. didn't try with react!
- deleted 9y ago
  [deleted]

sendben2 9y ago

Terse is definitely the right word.

adius 9y ago

This synatx is called JsonML and I'm maintaining a stable and highly usable implementation: http://adriansieber.com/shaven http://adriansieber.com/shaven

lukejacksonn 9y ago
Cool implementation. What is JSON about it though? What made you decide to pass children before props?
- lucideer 9y ago
  > 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.

deleted 9y ago

[deleted]

k__ 9y ago

Also https://github.com/Jador/react-hyperscript-helpers/blob/master/README.md https://github.com/Jador/react-hyperscript-helpers/blob/mast... which is even more terse

lukejacksonn 9y ago
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 9y ago

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.

gwn7 9y ago
Search for "hyperscript" :)
Vinnl 9y ago
See https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript
k__ 9y ago
https://github.com/ohanhi/hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers

baq 9y ago

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 9y ago
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-library-the-interpreter.html http://www.gigamonkeys.com/book/practical-an-html-generation...

always_good 9y ago

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 9y ago
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.

chadhietala1 9y ago

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--blazing-fast-rendering-for-ember-js--part-1 https://engineering.linkedin.com/blog/2017/03/glimmer--blazi....

gliechtenstein 9y ago

You guys should check out https://www.celljs.org https://www.celljs.org if you like this type of approach

deleted 9y ago

[deleted]

xori 9y ago

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

athenot 9y ago

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 9y ago
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 9y ago
  PUG used to be called 'Jade', and was basically HAML-for-nodejs.

ricardobeat 9y ago

2010 strongly echoes in my head: https://github.com/jed/fab https://github.com/jed/fab