10 ms·
RE:DOM – Tiny DOM library
- deleted 10y ago[deleted]
- tjallingt 10y agoI'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 same time?
- troym 10y agoI'd assume it's argument chaining, e.g.: > find('elements').clear('contents').add('border')
- elcct 10y agosomehow that reminds me of delete('facebook').lawyer('up').hit('thegym') ;)
- lexicality 10y agochildren(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 them into the DOM.
- tjallingt 10y agoAah 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 about that bit of code though but it sure is clever...
- pkstn 10y agoYeah, check out my another library FRZR too: https://frzr.js.org 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.
- chrismorgan 10y agoHere’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 = 'Sign in'; login.appendChild(login.email); login.appendChild(login.pass); login.appendChild(login.submit); login.onsubmit = function(event) { event.preventDefault(); console.log(this.email.value, this.pass.value); }; document.body.appendChild(login); The children call produces an array of objects that are appended to the element, but the callback also takes the wrapping element (in this case `login`), and so to be conveniently able to access it later (`login.email.value`) it also assigns them there. A more conventional JavaScript approach would be to assign email, pass and submit as local variables rather than stuffing them inside the form object. As for the other example: const app = document.createElement('table'); const tbody = document.createElement('tbody'); app.appendChild(tbody); app.update = function(data) { tbody.innerHTML = ''; for (let row in data.tbody) { let tr = document.createElement('tr'); for (let cell in row) { let td = document.createElement('td'); td.textContent = cell; tr.appendChild(td); } tbody.appendChild(tr); } } document.body.appendChild(app); app.update({ tbody: [ [1, 2, 3], ], }); This is rather simpler, frankly. I prefer plain DOM for myself at this level.
- tjallingt 10y agoThat 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...
- emn13 10y agoAnd 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).
- emilsedgh 10y agoThat 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).
- akst 10y agoAt 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.
- pkstn 10y agoYeah, I'm using similar technique with FRZR as well (https://frzr.js.org 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..
- pkstn 10y agoI explain a similar case in my presentation about my another library FRZR: https://youtu.be/0nh2EK1xveg https://youtu.be/0nh2EK1xveg
- chuangbo 10y agoGood try. Although jQuery chaining api seems better for me.
- TazeTSchnitzel 10y agoI've made a similar sort of DOM DSL: https://github.com/TazeTSchnitzel/jInsert 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.
- lexicality 10y agoI'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.
- jonahx 10y agoIf you're looking for a very small (~10K), dependency-free alternative to react, check out http://mithril.js.org/ 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).
- deleted 10y ago[deleted]
- spicyj 10y agoIf you like React but want to avoid a build system, you can always do var form = React.createFactory('form'); form({...}, ...); or var e = React.createElement; e('form', {...}, ...);
- pkstn 10y agoCheck out my other project as well: https://frzr.js.org https://frzr.js.org - it's quite similar but with a bit easier syntax :)
- ams6110 10y agoHonest 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.
- mkawia 10y agoangle brackets ,we decided long time ago we hate those :)
- zachrose 10y agoI 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.
- snehesht 10y agothe website's UI looks great. simple and to the point.
- rajangdavis 10y agoReminds 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/ 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.
- daviddahl 10y agoNice! reminds me of hyperscript-helpers
- syntex 10y agoThere is a trend in javascript community to use es2015 for everything and sometimes developers forget to keep a very fragile balance between expressiveness and simplicity.
- deleted 10y ago[deleted]
- pkstn 10y agoCheck out FRZR: https://frzr.js.org https://frzr.js.org – RE:DOM is all about experimenting with ES2015. And actually the whole core of both projects are ES5 – you don't have to use the new syntax.. ;)
- rocky1138 10y agoWhy 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.
- mattmurdog 10y agoWannabe React. Engineers who over engineer.
- emn13 10y agoThe alternative being templating which is several orders of magnitude more complex. Fortunately, it saves you a few characters here and there.
- BinaryIdiot 10y agoAbsolutely 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.
- deleted 10y ago[deleted]
- nathancahill 10y agoHTML is dead. Long live HTML!
- hmottestad 10y agoWe 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.
- flukus 10y agoWhy not use one of the dozens of templating libraries?
- RubyPinch 10y agois there any compile-to-javascript languages which would be termed as "disgusting" and "impure"? https://github.com/dropbox/pyxl https://github.com/dropbox/pyxl for python comes to mind as something more enjoyable than manually doing tree-shaped OOP login = : //"read variable from indented block" symbol of magicness <form> <input type=email> <input type=pass> <button>{_("Sign in")}<button> //gotta have an excuse to inline code! </form> login.events({ onsubmit (whatever, i dunno) { blap } }); seems a lot more fun!
- korynunn 10y agoShameless plug: https://www.npmjs.com/package/crel https://www.npmjs.com/package/crel
- tasnimreza 10y agoFrom the page >Writing HTML is stupid. It's slow, messy, and should not be done in JavaScript. What a bold statement !
- aurelianito 10y agoWhy is this better than working with d3 selections?
- voiper1 10y agoRiotJS 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.
- pkstn 10y agoRiot 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.
- tribby 10y ago>The main issue with Riot is, that it's still rather slow.. Riot is fantastic, especially in anticipation of web components, but personally I don't see performance as the main issue; I'm willing to trade performance for syntax I like, and the areas where Riot tends to choke are generally on tasks I typically wouldn't ask of client-side JS, no matter how fast it was. It's the lack of certain critical features that kills it for me. The biggest one is that is has no Vue-style transition system for "if" and "show" -- there are plugins that do it strictly for mount and unmount. It's an outstanding question in #1858, though it might be outside the scope of Riot core, TBH. In any case, I moved to Vue for that reason, and like it a lot, though I'd still prefer a Riot-with-easy-transitions :)
- pkstn 10y agoVue is great as well! I like to know how things work also under the hood, so debugging/profiling on every level is much easier.
- codedokode 10y agoUnreadable.
- pkstn 10y agoTry my other project, FRZR: https://frzr.js.org https://frzr.js.org – RE:DOM is more of an experiment in this point..
- tasnimreza 10y agoStill i don't understand why people writing simple HTML in complex way!
- pkstn 10y agoWhen you're writing a large application, things can get quite complicated with just HTML..
- ingenter 10y agoI had a similar attempt. http://m1el.github.io/jsonht.htm http://m1el.github.io/jsonht.htm
- amelius 10y agoWhy the indirection creating types using el()? Why not create the nodes directly with el()?
- pkstn 10y agocheck out frzr.js.org - I'm using that aproach there..
- awalGarg 10y agoThere is hyperscript which is a bit more "mature": https://github.com/dominictarr/hyperscript#example 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-hyperscript 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 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.
- outsidetheparty 10y agoLet's see: website consists in its entirety of two not-very-illuminating code samples. The documentation on github consists of the phrase "Documentation is a bit lacking yet, please check out the source for now." I feel like at this point, when there are so many, so so many, javascript frameworks to choose from, if you're going to build yet another one you need to take the time to explain why it exists. What are the advantages of this approach over the many existing alternatives? What problem does it solve? What does it do that others don't? What motivated its creation? Why should someone use this instead of riot or vue or knockout or transparency or $dom or snack or xui or or domtastic or crel or DOMinate or shaven or scriber or zepto or react or jquery or good old vanilla? Maybe I'm just getting old and cranky (ok definitely I am that) but if someone can't be bothered to document their own code and expects others to dig through the source to figure out what it's for and how to use it, my default assumption is that the code itself is going to be similarly slipshod.
- pkstn 10y agoTo be honest, I just wanted feedback about the experimental approach.. It's only version 0.0.x