
Show HN: Moon – 3kb JavaScript UI compiler - kbr
https://kbrsh.github.io/moon
======
sbjs
This 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.

~~~
badestrand
> I prefer React.js style, which lets you use languages you already know (HTML
> and JavaScript)

No, you also have to relearn, just not as much. The React docs rightly state
"JSX is not HTML" because you cannot use comments, doctype and it's a shame
that JSX deviates from HTML in attribute names. Having to use className
instead of class annoys me to no end and is why I prefer preact (they use
class). Also autoComplete and spellCheck - just why? Converting this-that to
thisThat makes sense but renaming attributes without necessity was a stupid
decision.

~~~
sbjs
With a good IDE that suggests these as you type, it shouldn't matter. I
recommend VS Code, it does this out of the box. I like how it even suggests
the right thing if I get the letters a little mixed up, like typing "speclh"
suggests spellCheck={...} for me. It's great!

~~~
dosy
is it weird that i prefer vim rather than fancy IDE for almost everything?

------
skrebbel
How 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)

~~~
boobsbr
What do you mean by "compiles itself away"?

~~~
jazoom
No runtime gets included in the build.

------
dvh
How 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
Your 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.

------
ramses0
I 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.

------
evmar
I 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
To 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).

------
alliecat
Maybe 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
That’s a ToDo app example

------
jmiserez
Previous (2017, 192 comments):
[https://news.ycombinator.com/item?id=15105726](https://news.ycombinator.com/item?id=15105726)

~~~
kbr
It's been rewritten completely and hit 1.0 beta a week ago :)

------
ukulele
Looks 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
Thanks! 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
Is 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
For 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 :)

------
vijaybritto
Very 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
It’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.

------
dandigangi
I 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
Glad 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
I do like that you have presentation vs data separated by default. Something I
wish React had. ;)

------
zubairq
Congratulations on the release. I know we talked about using Moon for
AppShare, and I'll keep watching the progress. Thanks

------
childintime
Love the design of the site (or lack of it). Apparently similar to marko.js,
but no bootstrap header, etc.

~~~
jahewson
Looks to be the Wing css framework, by the same author:

[https://kbrsh.github.io/wing/](https://kbrsh.github.io/wing/)

------
hoppelhase
Are you still claiming to be 14 years old?

~~~
tomcam
This is what you do with your precious time on this planet?

~~~
always_good
10 months ago they apparently registered their account to cast doubt that OP
was 13 years old.

A weird fixation.

~~~
hoppelhase
OP was the one trying to convice everyone.
[https://news.ycombinator.com/item?id=15156363](https://news.ycombinator.com/item?id=15156363)

