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

61–70 of 84 posts

Re: RE:DOM – Tiny DOM library

#61

Post by flukus »

hmottestad wrote: post #59
rocky1138 wrote: post #23

Why are we creating HTML from within Javascript? It would be much better to use HTML for that and simply toggle the display/visibility of DOM elements via CSS or JS.

We are creating HTML from within Javascript because: - We want to generate HTML from our data (eg. database) - We want an interactive experience (eg. with toggling visibility) You could argue that we should generate the HTML on the backend, but then you are still generating HTML, and now you have two systems that interact with the HTML instead of one.

Why not use one of the dozens of templating libraries?

Re: RE:DOM – Tiny DOM library

#62

Post by ghayes »

zachrose wrote: post #18
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.

Why did you wrap that in a closure / immediately invoked function expression?

Re: RE:DOM – Tiny DOM library

#64

Post by emn13 »

mattmurdog wrote: post #28
rocky1138 wrote: post #23

Why are we creating HTML from within Javascript? It would be much better to use HTML for that and simply toggle the display/visibility of DOM elements via CSS or JS.

Wannabe React. Engineers who over engineer.

The alternative being templating which is several orders of magnitude more complex. Fortunately, it saves you a few characters here and there.

Re: RE:DOM – Tiny DOM library

#65

Post by emn13 »

flukus wrote: post #61
hmottestad wrote: post #59

Earlier quoted context omitted.

We are creating HTML from within Javascript because: - We want to generate HTML from our data (eg. database) - We want an interactive experience (eg. with toggling visibility) You could argue that we should generate the HTML on the backend, but then you are still generating HTML, and now you have two systems that interact with the HTML instead of one.

Why not use one of the dozens of templating libraries?

Because templating languages are without exception bug-breeding grounds that no human being can actually use without producing errors, which the browser then sometimes proceeds to auto-correct (html being html), which leads to a kind of "approximate" programming style, aka nirvana for security holes and other bugs. Oh, and composition is terrible pain too, encouraging over-complex UI components that do it all. And learning whatever flavor cleverly-insufficient control-flow and looping constructs this templating library uses is a pointless waste of time (and source of bugs) too.

Why in the heavens would you ever choose to use a templating library and blur the lines between content (user input) and UI structure? Why reinvent the control-flow wheel?

Templating represents programmers realizing that this newfangled browser thing can already parse HTML, and hey, can't we do something clever with that - sure, if we unnecessarily serialize to a string first, yes! No thank you.

Re: RE:DOM – Tiny DOM library

#66

Post by emn13 »

tjallingt wrote: post #10
chrismorgan wrote: post #8

Earlier quoted context omitted.

Here’s what I believe will be an accurate translation of that example to the normal DOM API (without having actually looked at the RE:DOM source code): const login = document.createElement('form'); login.email = document.createElement('input'); login.email.type = 'email'; login.pass = document.createElement('input'); login.pass.type = 'pass'; login.submit = document.createElement('button'); login.submit.textContent =…

That is a great explanation and after looking at the source code and reading the example more closely that is indeed what appears to happen. I do think that, albeit very clever, it's a confusing pattern though...

And too tricky - assigning to arbitrary properties on a DOM object can have arbitrary side effects if ever you happen to overload a predefined property (on any browser).

Re: RE:DOM – Tiny DOM library

#67

Post by exomancer »

ars wrote: post #42
zachrose wrote: post #18

Earlier quoted context omitted.

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.

Why compare it to that? There is no reason to avoid innerHTML anymore - it's not slow at all. There is rarely a reason to build HTML using createElement, it's only sometimes needed. The majority of the time just write HTML - it's much easier. > Or you could use a templating library Or just use the built in tag.

Not slow compared to what? Creating elements with the DOM API is faster than innerHTML roughly by a factor of 4 on Chrome Canary last I benchmarked it, DOM mutations with bindings are even faster. There is a reason why React switched from innerHTML to generating DOM.

Re: RE:DOM – Tiny DOM library

#68

Post by [deleted] »

emn13 wrote: post #65
flukus wrote: post #61

Earlier quoted context omitted.

Why not use one of the dozens of templating libraries?

Because templating languages are without exception bug-breeding grounds that no human being can actually use without producing errors, which the browser then sometimes proceeds to auto-correct (html being html), which leads to a kind of "approximate" programming style, aka nirvana for security holes and other bugs. Oh, and composition is terrible pain too, encouraging over-complex UI components that do it all. And le…

[deleted]

Re: RE:DOM – Tiny DOM library

#69

Post by awalGarg »

There is hyperscript which is a bit more "mature": https://github.com/dominictarr/hyperscript#example

There is virtual-hyperscript which ports the above to virtual-dom: https://github.com/Matt-Esch/virtual-dom/tree/master/virtual...

I made a similar-ish "library" about an year ago: https://gist.github.com/awalGarg/8a0e18c6fe87456d885f

And there are all sorts of similar DSLs you can find on npm/github for JS. In a bit less time, you can write your own. In even lesser time, you can just do what you used to do prior to all this. This does however seem like a pretty popular idea in the JS community which keeps getting "discovered" every now and then.

Re: RE:DOM – Tiny DOM library

#70

Post by localvoid »

exomancer wrote: post #67
ars wrote: post #42

Earlier quoted context omitted.

Why compare it to that? There is no reason to avoid innerHTML anymore - it's not slow at all. There is rarely a reason to build HTML using createElement, it's only sometimes needed. The majority of the time just write HTML - it's much easier. > Or you could use a templating library Or just use the built in tag.

Not slow compared to what? Creating elements with the DOM API is faster than innerHTML roughly by a factor of 4 on Chrome Canary last I benchmarked it, DOM mutations with bindings are even faster. There is a reason why React switched from innerHTML to generating DOM.

>Creating elements with the DOM API is faster than innerHTML roughly by a factor of 4 on Chrome Canary last I benchmarked it

yes, almost by a factor of 4 :D

check out "render" test cases:

https://cdn.rawgit.com/localvoid/dd96890b82f1d1268df34330b14...

Post reply on HN