6 ms·
Userinterface.js – A small library to build front-end JavaScript applications
- deleted 6y ago[deleted]
- padseeker 6y agoAt first glance it looks a bit like Vue.js - did you create this to scratch an itch or learn something? Was there an objective when you created this library, to solve a problem that the current set of front library tools currently are not addressing? Sell me on why javascript developers should be using your library over the other tools that dominate the front end landscape.
- thoughtsunifica 6y agoTo begin with, by all mean use React, Vue and others. I think they're amazing and got me super excited whenever I deal with them. userinterface.js was made out of the frustration I went through when I was maintaining multiple Browser Extensions. I wanted it to exploit my existing knowledge of DOM API and JavaScript language. Something that would at least try to befriend CSS, HTML and JS to make them work together in a semantic fashion. Giving their own world to each of the parts of the UI was for the most part the core aspect of it. Most of the frameworks you mentionned have their own ecosystem, I find them pretty hard to integrate in contexts such as Browser Extension if you do not wish for a never ending build toolchain. I think a fair comparison for userinterface.js would be the Web Components API. I'm glad you're even asking the question, thanks.
- jaywalk 6y agoAt first glance, this seems like it would be painful to write for. It doesn't seem like it really makes anything easier than HTML and vanilla JavaScript.
- jwilber 6y agoYeah, I’m not so sure about the use case myself... Input: UserInterface.model({ name: "children", method: UserInterface.appendChild, properties: { tagName: "div", className: "model", children: [ { tagName: "div", className: "child", textContent: "My first child" // and so on.. } ] } }); UserInterface.runModel("children", { parentNode: document.body }); Output: <body> <div class="model"> <div class="child">My first child</div> </div> </body>
- zeptonix 6y agoI think I'd have about three "UserInterface"'s in me before going crazy over why they didn't just name it "UI"
- thoughtsunifica 6y agoI think you have a great point, how about code snippets or renaming the global object in your index.html or application entry point? Thanks for looking at it, I appreciate.
- CraftThatBlock 6y agoWithout JSX (or templates), writing HTML as JS is quite painful. Some don't like JSX but it is truly the best way to write HTML in JS.
- holtalanm 6y agoI agree with your first sentence. We can agree to disagree on the second, though, as I thoroughly prefer a template approach.
- kingdomcome50 6y agoCould you elaborate a bit more? I’m honestly curious.
- holtalanm 6y agoJSX vs Templates has almost evolved into a holy war at this point within the js community. There are benefits and drawbacks to both, so you'll find people coming down on either side of the argument. My main reason for preferring templates over jsx is that it allows to separate the functional component code behind the scenes from the actual rendered html in a cleaner fashion, imo, than just embedding the html directly into the JS code. I could also say that, due to my background, I am just more comfortable with it, as well.
- adrianhel 6y agoAnd to elaborate on the other side of the argument: JSX creates plain JavaScript objects instead of exposing an "almost-JS" templating language. Additionally you get an enormous amount of flexibility. For some types of apps that is very important.
- holtalanm 6y ago>> exposing an "almost-JS" templating language I'm not certain I would call Vue.js templates as an 'almost-JS' templating language. It is pure html. A browser could render it without any js backing it up. I can't speak for many other template specs, but I believe Angular.js was just pure html, as well, using custom properties to perform the binding between the html and the backing js, which is very similar to what Vue.js does, in that aspect at least.
- sreekotay 6y agoInteresting - it seems more verbose but fairly expressive. Two thoughts: (1) a (more) declarative model would interesting vs. all the callbacks, and (2) where's your to-do app, lol -- all the frameworks have one? :P
- thoughtsunifica 6y agoYou're right, I will surely make one. I am not sure if you found the few demos I listed in the README? Were they not welcoming enough? Thanks for the feedback.
- ng12 6y agoFeels like a modern take on the Marionette+Backbone stack.
- rpastuszak 6y agoHa, that was my first thought too
- thoughtsunifica 6y agoThanks for the kind words. If I may ask, what made you think they were lookalike?
- wmichelin 6y agoWhy does this exist? Why should I ever use this over react, preact, or Vue?
- hundchenkatze 6y ago> Why does this exist? Because someone wrote it and wanted to share it. That's reason enough.
- dandigangi 6y agoHonestly don't think the author is even trying to sell it over React/Ang/etc. Just something he built to make his life easier and open sourced it.
- thoughtsunifica 6y agoThat's right, I use React when I have to.
- amir734jj 6y agoCongratulations. You just reinvented subset of Backbone.js
- rpastuszak 6y agoSure, but this is still a good exercise. Not every library has to be 100% unique and solve a completely different problem. Kudos to the author for sharing and good luck. edit: what I don't get is how this post ended up at #10 of /news (I'm jealous)
- thoughtsunifica 6y agoI don't get it either and probably never will. Thank you for your kind words!
- thrownaway954 6y agoso much code to do such simple things. honestly i don't see the benefit in this at all.
- zeptonix 6y agoFantastic example of everything not to do. People seem to forget languages are meant for humans to actually write in and be productive in. I think there tends to be this idea that if you make a language constrained/annoying enough to write in then it makes bugs impossible, and that's not true -- it just makes productivity impossible.
- thoughtsunifica 6y agoI mostly agree, however if you go too far on the other edge it does not help either.
- seabass 6y agoThis 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 agoThere's no virtual DOM implied, userinterface.js is operating on the DOM itself. Thanks for even looking at it, I appreciate.
- seabass 6y agoIn 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.
- yurry 6y agoI am glad I am not the only one confused as hell. The API of the library is literally anti-pattern.
- mbzi 6y agoThere are too many non constructive negative comments. Not many web engineers understand how the dom really works, or how to make a library. I applaud this tech demo. Would I use this in production? No. But the author is not asking for that. It takes a lot of guts to create something and show it to this community. I really enjoyed looking at how the code progressed, how the author tackled a difficult subject, and their replies to constructive comments. Keep it up!
- thoughtsunifica 6y agoWith those kinds words I feel like could reach for the farthest unknown places of space. A never ending thank you for those kind words. And a big thanks for even looking at it, it means a lot to me.
- hehewhatever 6y agoSeems overcomplicated to me, but congrats for the effort!
- tomaszs 6y agoI really like the angle of the project. Today it is very hard to talk with people about such approaches. People are so close minded about how to do stuff. I would really love to see a hands on how you use it because it must be brilliant. I would hope more people have this kind of out of the box thinking. It is the innovative spirit that drives world forward.
- thoughtsunifica 6y agoYour comments means a lot to me. And by a lot I mean a number that even a quantum computer would have a hard time dealing with! I will keep on doing what I like to do and keep a very close eye on my enthusiast so that it will never leave my side. We are very much a like in the regard, variety make for a great part of the world in its own. I am not sure if there would be anything for you to gain today but if it's not today I surely will be making something that is at least worth seconds of your time.
- tomaszs 6y agoIs there any way we could stay in touch? I cant see any private way to communicate here
- sosodev 6y agoReminds me a lot of ExtJS which is still pretty widely used by legacy apps so I’m not sure why everyone is hating on it so much.
- devsatish 6y agoreminds me of Jack Slocum's original Ext.JS with Yahoo UI components .. circa 2006/2007.. Appreciate the awesome effort! even though the industry overall moved to templating model (JSX) which makes it easy.