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.
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.
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 si…
If you're looking for a very small (~10K), dependency-free alternative to react, check out http://mithril.js.org/, which is far more powerful and from which it seems this project has taken some inspiration (mount, props, and the general syntax are a few of the similarities I see).
login = : //"read variable from indented block" symbol of magicness
{_("Sign in")} //gotta have an excuse to inline code!
login.events({
onsubmit (whatever, i dunno) {
blap
}
});
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 h…
At first I was gonna say, this could be expressed with an object expression, but actually if you think about it object expressions don't grantee ordering of it's elements, that and you could probably don't need a reference to all children of a component.
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.
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 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.
Absolutely this! Instead of awkwardly building DOM in JavaScript just build it in HTML, manipulate in JavaScript and style in CSS. This separation still works amazingly even if popular frameworks like React are blurring the lines.