4 ms·

This API makes little sense to me. If you are going to manually create a vdom, why not just use the native browser APIs to manually create an actual DOM? Most d

This API makes little sense to me. If you are going to manually create a vdom, why not just use the native browser APIs to manually create an actual DOM? Most developers tend to prefer not to manually construct DOM elements, but in this case it looks like vanilla DOM would be both easier and less verbose.

thoughtsunifica 6y ago
There's no virtual DOM implied, userinterface.js is operating on the DOM itself. Thanks for even looking at it, I appreciate.
- seabass 6y ago
  In the example code from the readme: UserInterface.model({ name: "children", method: UserInterface.appendChild, properties: { tagName: "div", className: "model", children: [ { tagName: "div", className: "child", textContent: "My first child" // and so on.. } ] } }); vdom was probably the wrong terminology for me to use. What I'm getting at with that is that your properties are like a virtual dom tree. The majority of what I see being painful to use here is caused by exposing all of that manual boilerplate. You can do something equivalent with a hyperscript-like syntax: h('div.model', [ h('div.child', 'My first child') ]) Or with JSX that compiles down to what you have in your `properties`: <div class="model"> <div class="child">My first child</div> </div> You could even trivially add a helper function with low runtime costs that makes it easier to write out the properties. Just using `h` here since it's like hyperscript, but you could call it something better: function h(tagName, attributes, ...children) { return { tagName, ...attributes, children } } That alone would make it easer to read and write properties. The example would become: UserInterface.model({ name: "children", method: UserInterface.appendChild, properties: ( h('div', { className: 'model' }, [ h('div', { className: 'child', textContent: 'My first child' }) ]) ) }); There are other things that you can't fix with syntax changes, though. For example, each model defining the `method` used to add it to the parent seems backwards to me. Shouldn't a component only care about its own state? Down the road, if you wanted to add one of these `children` things to another element by prepending it rather than appending it, you'd have to have to change the child.
  - thoughtsunifica 6y ago
    The helper function is one hell of a great idea. I like it. I get your point, and it's a fair one. Right now if you want to "prepend" you have to add a container as first child and give it a className to identify it and then use the "runModel" on it. I like the idea of going the opposite way and I also share your thoughts about component only caring for its own state. Thank you (again) very much for your feedback, much appreciated.

thoughtsunifica 6y ago

There's no virtual DOM implied, userinterface.js is operating on the DOM itself. Thanks for even looking at it, I appreciate.

seabass 6y ago
In the example code from the readme: UserInterface.model({ name: "children", method: UserInterface.appendChild, properties: { tagName: "div", className: "model", children: [ { tagName: "div", className: "child", textContent: "My first child" // and so on.. } ] } }); vdom was probably the wrong terminology for me to use. What I'm getting at with that is that your properties are like a virtual dom tree. The majority of what I see being painful to use here is caused by exposing all of that manual boilerplate. You can do something equivalent with a hyperscript-like syntax: h('div.model', [ h('div.child', 'My first child') ]) Or with JSX that compiles down to what you have in your `properties`: <div class="model"> <div class="child">My first child</div> </div> You could even trivially add a helper function with low runtime costs that makes it easier to write out the properties. Just using `h` here since it's like hyperscript, but you could call it something better: function h(tagName, attributes, ...children) { return { tagName, ...attributes, children } } That alone would make it easer to read and write properties. The example would become: UserInterface.model({ name: "children", method: UserInterface.appendChild, properties: ( h('div', { className: 'model' }, [ h('div', { className: 'child', textContent: 'My first child' }) ]) ) }); There are other things that you can't fix with syntax changes, though. For example, each model defining the `method` used to add it to the parent seems backwards to me. Shouldn't a component only care about its own state? Down the road, if you wanted to add one of these `children` things to another element by prepending it rather than appending it, you'd have to have to change the child.
- thoughtsunifica 6y ago
  The helper function is one hell of a great idea. I like it. I get your point, and it's a fair one. Right now if you want to "prepend" you have to add a container as first child and give it a className to identify it and then use the "runModel" on it. I like the idea of going the opposite way and I also share your thoughts about component only caring for its own state. Thank you (again) very much for your feedback, much appreciated.