8 ms·
Show HN: Moon – 3kb JavaScript UI compiler
- ukulele 8y agoLooks like a neat project. What is the ultimate goal of it? I gather it's to do a subset of what e.g. Vue does, with simplified API and a small footprint. Is that accurate?
- kbr 8y agoThanks! It used to be a smaller version of Vue aiming to be a small subset of it. For the v1 beta (what the current documentation is for) I decided to change up the API to be something more simple that can still scale well for larger projects.
- oiOoOioiOoOio 8y agoIs this still a non-keyed implementation? Will you ever be adding mix-ins? Both of these kept me from using this library prior to the current re-write.
- kbr 8y agoFor now, it is non-keyed. As I mentioned in some other comments I just wanted to get a beta out as I've been rewriting Moon for about a year and it's finally gotten to a semi-usable state. A keyed implementation, single-file components (multi-file components exist with Moon CLI but I've started to like single-file components), custom DOM events, component inserts, and an official router are on my todo list. Hopefully you'll get to use the library this time :)
- deleted 8y ago[deleted]
- evmar 8y agoI believe Angular has a similar mechanism of compiling templates to code that corresponds directly to the template much like this, and they're now backing away from it. The reason is that you end up with a lot of code per template. Some indirection, like stuffing the template parameters via a key-value map, lets you generate more generic code that is overall smaller.
- kbr 8y agoTo prevent large bundles, Moon uses a lightweight runtime that is about the same size as the equivalent compiled virtual DOM render function (using React.createElement for example).
- sbjs 8y agoThis looks like it takes Vue.js's approach of creating a brand new language that you have to learn (in this case MVL which is similar to HTML). It's definitely a preference for a lot of people, but I prefer React.js style, which lets you use languages you already know (HTML and JavaScript) to do literally everything. It may be inconvenient at times, but you don't have to reference a new language's manual every time you want to do a for-loop to figure out whether the @for attribute should go on the li or the ul.
- kbr 8y agoIt's definitely based on preference, but I designed MVL to be as simple and consistent as possible. For example, there are two ways to create a for loop (one on the ul and one on the li). <For={item in items}> <!-- multiple elements --> </For> <p For={item in items}><!-- single element --></p> This syntax works for every component ("For" is just another component).
- sbjs 8y agoThat is awesome that you have <For>! That's one of my biggest pet peeves with Vue.js, where it has to be an attribute on an element, and it's not intuitive whether it goes on the parent or the child. (I think Vue makes it go on the parent but I think it makes more sense for it to go on the child.)
- ppseafield 8y agoIIRC for Vue.js it goes on the child, i.e. <ul> <li v-for="item in items">[...]</li> </ul> It is something you do have to remember. I believe you can use a template tag too if you like.
- sbjs 8y agoAh right, thanks. Yes this always looks backwards to me. The body of a loop should be inside of it. But here it is the body of the loop. That is very strange.
- ramses0 8y agoI continue to advocate MarkoJS as "the best" HTML templating language. https://markojs.com https://markojs.com It is the best mix of expressiveness, ease, and clarity I've found.
- skrebbel 8y agoHow does this compare to Svelte, which also compiles itself away and at first glance, looks quite similar? What was your motivation for making this? (other than making something cool, ofc)
- childintime 8y agoLove the design of the site (or lack of it). Apparently similar to marko.js, but no bootstrap header, etc.
- jahewson 8y agoLooks to be the Wing css framework, by the same author: https://kbrsh.github.io/wing/ https://kbrsh.github.io/wing/
- hoppelhase 8y agoAre you still claiming to be 14 years old?
- tomcam 8y agoThis is what you do with your precious time on this planet?
- always_good 8y ago10 months ago they apparently registered their account to cast doubt that OP was 13 years old. A weird fixation.
- hoppelhase 8y agoOP was the one trying to convice everyone. https://news.ycombinator.com/item?id=15156363 https://news.ycombinator.com/item?id=15156363
- tasqyn 8y agois he not?
- hoppelhase 8y agoHe created a fake account to publish his "look at me, I'm 13" tweets. https://news.ycombinator.com/item?id=15156363 https://news.ycombinator.com/item?id=15156363 If he's 14, then he's pretty much an attention needing dude (as he submitted this moon library at least 5 times and his "I'm 13 yo" tweets at least 3 times). At the same time, he claims that he does not like to mention his age.
- faissaloo 8y agoHe's 14, give him a break, I was like that at one point until I actually figured out what 'not mentioning your age' meant (hint: pretending to be coy was not it).
- jmiserez 8y agoPrevious (2017, 192 comments): https://news.ycombinator.com/item?id=15105726 https://news.ycombinator.com/item?id=15105726
- kbr 8y agoIt's been rewritten completely and hit 1.0 beta a week ago :)
- vijaybritto 8y agoVery simple concepts. So easy to try. Saw the code. There are almost no type checks or null/undefined checks anywhere. Is this library used in any production application?
- kbr 8y agoIt’s currently in beta and although that’s no excuse for the lack of warnings I just wanted to get a beta out as I started v1 almost a year ago.
- dvh 8y agoHow are variables in "<p>{text}</p>" replaced? Is the security of it just an implementation detail left to the programmer who use it? Safe way would be finding the P and then doing p.textContent = data. But how do you find element by value efficiently? Or do you just to text replace?
- kbr 8y agoYour views are compiled down to JavaScript beforehand. Your example would be compiled to something like: m2.textContent = instance.text; Use Moon.compile(template) to get a better idea of outputs.
- dandigangi 8y agoI kind of like that this feels like a vanilla JS, simple version of components. Any reasoning behind by this was created? I read the about but it was limited.
- kbr 8y agoGlad you liked it. If you read some of the original Moon articles (“Introducing Moon”) you’ll find that I was frustrated with other libraries and strived to create a smaller and faster alternative. Now I have worked on designing a new structure for web applications that I’m planning on writing further about. The view API of components in Moon closely models my vision for the future of the web. Moon’s philosophy is to have a consistent API in order to create views to display data.
- dandigangi 8y agoI do like that you have presentation vs data separated by default. Something I wish React had. ;)
- dandigangi 8y agops You should submit Moon to sites like these: http://todomvc.com/ http://todomvc.com/ :)
- alliecat 8y agoMaybe it's just me but if you're submitting something to Show HN then it's helpful if your "Examples" navbar link doesn't send me to a `//TODO`!
- kbr 8y agoThat’s a ToDo app example
- zubairq 8y agoCongratulations on the release. I know we talked about using Moon for AppShare, and I'll keep watching the progress. Thanks