Still i don't understand why people writing simple HTML in complex way!
RE:DOM – Tiny DOM library
41–50 of 84 posts
Re: RE:DOM – Tiny DOM library
#42Honest 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 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.
Re: RE:DOM – Tiny DOM library
#43Why 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.
HTML is dead. Long live HTML!
Re: RE:DOM – Tiny DOM library
#44Re: RE:DOM – Tiny DOM library
#45Honest question, how is: el.email = input(props({ type: 'email' })) better or easier than: I think the example needs to be more compelling.
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.
Re: RE:DOM – Tiny DOM library
#46Earlier 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.
Template libraries are fine, but there are cases where you hope you could just write JavaScript..
Re: RE:DOM – Tiny DOM library
#47RiotJS lets you keep the "normal" HTML and just add easily-called functions. Looks much more simple and "normal" to me than all this react stuff and HTML generation from javascript.
Riot is great, I'm one of the contributors also. Just like to experiment with things and created FRZR, RZR and now this. The main issue with Riot is, that it's still rather slow. And complex, if you want to understand 100% how it works under the hood.
Re: RE:DOM – Tiny DOM library
#48I'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…
I explain a similar case in my presentation about my another library FRZR: https://youtu.be/0nh2EK1xveg
Re: RE:DOM – Tiny DOM library
#49I'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…
Yeah, I'm using similar technique with FRZR as well (https://frzr.js.org), but with RE:DOM I wanted to experiment with ES2015 and also break the API to smaller parts, which you can replace with your own if you like..
Re: RE:DOM – Tiny DOM library
#50Earlier quoted context omitted.
children(function(el) { var a, b, c; a = input(props({ type: 'email' })); el.email = a; // etc return [a, b, c]; }) Entirely guesswork but: El is the form element you're defining children on. You need to provide references to the elements you're creating so that you can use them later (el.email and friends) but you also need to return them to the children function in an ordered manner so that it can actually attach t…
Aah of course; By reading the source code of the children function I figured the array of elements returned was appended to the parent element. The strange thing was that it was also adding them to `el` object but indeed it appears this is done to maintain a reference to the children so they can be modified later (which I would have seen had i read the example a bit more carefully :S ) I'm still not sure how I feel a…
Yeah, check out my another library FRZR too: https://frzr.js.org
Point is to be able to design: 1) how you create component 2) how you update it Both 1) and 2) are just simple functions.