Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

RE:DOM – Tiny DOM library

redom.js.org

Post reply on HN
Print view View original

11–20 of 84 posts

Re: RE:DOM – Tiny DOM library

#11

Post by TazeTSchnitzel »

I've made a similar sort of DOM DSL: https://github.com/TazeTSchnitzel/jInsert

e.g.

  document.body.appendChild($('form', {action: '/submit', method: 'POST'}, [
      $('input', {type: 'text', name: 'username'}),
      $('br'),
      $('input', {type: 'password', name: 'password'}),
      $('br'),
      $('input', {type: 'submit'})
  ]));
RE:DOM looks cool too.

Since using Haskell's Blaze, I've wanted something close in other languages.

Re: RE:DOM – Tiny DOM library

#12

Post by lexicality »

I'm torn.

On the one hand this seems far too clever for it's own good and in the same vein as coffeescript where it's really easy for you to write efficient & compact code which somehow turns into complete garbage when you try to read it two weeks later.

On the other hand it looks super neat, has 0 dependencies and looks like React but without requiring any kind of build system.

I think I might need to try it in a side project.

Re: RE:DOM – Tiny DOM library

#15

Post by rajangdavis »

Reminds me little bit like Mithril...

Edit: Not sure why I got downvoted, but if you look at the Mithril API (sample code on http://mithril.js.org/), it's very similar to this RE:DOM library with the major difference being that there is a controller function in the Mithril example and that Mithril is more of a functional language.

Re: RE:DOM – Tiny DOM library

#16

Post by emilsedgh »

tjallingt wrote: post #3

I've never seen this before: children(el => [ el.email = input(props({ type: 'email' })), el.pass = input(props({ type: 'pass' })), el.submit = button(text('Sign in')) ]) Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the…

That is an arrow function.

children() is supposed to take a function as argument and that function is supposed to return the list of children.

So basically:

children( function(el) {

  return [

    el.email = input(props({ type: 'email' })),

    el.pass = input(props({ type: 'pass' })),

    el.submit = button(text('Sign in'))

  ]
} )

Also,

[

   el.email = input(props({ type: 'email' }))

   ,

   ...
]

is a neat idea. In one (expressive) line he is assigning the value to the array and also giving the child (in this case, email) a name and reference in its parent, so later he can just call el.email (in the onsubmit function).

Re: RE:DOM – Tiny DOM library

#18

Post by zachrose »

ams6110 wrote: post #13

Honest question, how is: el.email = input(props({ type: 'email' })) better or easier than: I think the example needs to be more compelling.

I assume you mean to compare it to:

    el.email = (function(){
        var input = document.createElement('input');
        input.type = "email";
        return input;
    })();
...or something similar. Your could also use createContextualFragement or a little function that uses innerHTML, both of which parse a string into HTML (which is problematic). Or you could use a templating library, of which there are many and this is one.
Post reply on HN