Hacker News Reader

Comment by ams6110 | Hacker News Reader

Honest question, how is:

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

better or easier than:

  <input type="email">

I think the example needs to be more compelling.

View on HN

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.

$('<input type="email">')

I recently had the pleasure of tracking down the source code for how this works. There are a few methods, but the main one is at least a hundred lines long.

    el.email = document.createElement('input');
    el.email.type = "email";

    el.email = Object.assign(document.createElement('input'),{type:'email'});

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

What supports this feature and how is it implemented?

The ... is the spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

(Too long to edit my other reply)

Also used was object destructuring: http://odetocode.com/blogs/scott/archive/2014/09/11/features...

I know about the spread operator, but I'm pretty sure that's invalid. `var foo = { document.createElement('input') };` doesn't work, spread or no spread after it.

Ow man.. I saw the Object.assign example and thought i don't like it because it requires an extra polyfill. I can just use a spread and let babel handle it.

If anything it should be `var email = {...document.createElement('input'), type: 'email'}`

But that would result in `Object.assign({}, document.createElement('input'), { type: 'email' })`

Got 4 up votes though..

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 <template> tag.

Template libraries are fine, but there are cases where you hope you could just write JavaScript..

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...

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

It's a way of hiding local variables. Old "var" variables are function scoped, so you can't even hide them in if-blocks or for-blocks, which makes scope leakage even worse.

If you're a JS programmer you should definitely read Crockford's famous JS book, it explains a lot of JS patterns and the rationale behind them.

When you build large applications, things are not always that simple.. If you want to be able to init the app and then start to update it with minimal work and maximum performance, HTML itself is not enough.

Using crel as a comparison:

var input = crel('input', {type:'email'});

vs:

var wrapper = document.createElement('div'); wrapper.innerHTML = '<input type="email">'; var input = wrapper.children[0];

angle brackets ,we decided long time ago we hate those :)

No we didn't, considering a lot of us write JSX at our jobs.

Both can be true - they certainly are in my case.

In general case, (for all other props), please don't forget to escape a quote in you prop's values.

Reply on news.ycombinator.com