Show HN: Moon – fast 7k Vue alternative
github.com
github.com
Let the curious create and share their creation with the world.
So new developers get thrown in this crazy world where they have to learn a thing that has no real practical use just because they want a job in the field. IMHO, new tools must make things easier for everyone and specially for newcomers, while React seems to make large-scale problems easier but a LOT harder for beginners.
And finding a new job is a problem that we all have from time to time.
Hell, I generate HTML email with React, now. No reason not to; it's great. Simple, understandable tree of reusable components that have understandable data flows--sign me right up.
The biggest problem with it is the initial activation energy of a new project, which is partially solved through create-react-app and largely solved by doing it once in a replicable way. (I've been creating React projects off of the same base for quite awhile now.)
You're way off if you think React doesn't work for anything other than large apps.
I've been bitten this many times where my "little app" grew, and the non-framework code complexity would grow quadratically where I regretted not just using a framework like React in the first place. So when I hear "React is just for large apps", I can't take it very seriously.
Parent said it is overkill, a different thing from what you're reading. And boy, as somebody who doesn't already know it, is that right.
https://www.bloomberg.com/graphics/2015-paul-ford-what-is-co...
"Technology conferences are where primate dynamics can be fully displayed, where relationships of power and hierarchy can be established. There are keynote speakers—often the people who created the technology at hand or crafted a given language. There are the regular speakers, often paid not at all or in airfare, who present some idea or technique or approach. Then there are the panels, where a group of people are lined up in a row and forced into some semblance of interaction while the audience checks its e-mail."
https://github.com/angular/angular.js/commits/master
Kind of glad about that, as it's what I'm still using. :)
Something like "COBOL for the web" would be ideal. But if I were starting now I wouldn't choose Angular 1.x, would I? Any recommendations.
I used it first in a personal project, then in a job, and have used it after in a personal project. I think that says it's at least not the worst. I've wanted to look into Vue and React for some time but I'm mostly a back end developer. Angular is getting the job done to the point that I haven't been forced to switch.
But for the next stage of the system (rich media streaming), it will require a whole lot more interactivity on the front end and the time has come to decide on something!
I'm leaning towards Vue because it seems easier to grok as a solo developer while still having plenty of power and support... but I'm indecisive!
Vue - It's been described as "Angular 1 without the flaws" before to me. I think it'd probably be the easiest transition. It also seems to have the advantage of being able to be sprinkled in lightly or heavily, dealers choice.
React - As someone who loves functional programming, Redux immediately clicked for me, and I do enjoy that idea of state. However, it seems like a lot more work to learn it coming from Angular 1 for someone who is doing the minimum front-end and when it comes to any serious project will be working with a true front end developer.
I'm just hearing of Moon obviously but I'll be keeping an eye out for the name when I am forced to switch from Angular 1.
If I can extend a little further, React is favoured (outside of the potential as a state machine) as the front-runner in isomorphic front-end apps. Of course there are also some lighter-weight similar frameworks like InfernoJS, and Preact, but React is certainly the one with the largest community and more robust support.
If you're looking for mainly UI event handling, 2 way binding, etc, Vue is extremely capable and will probably keep your fingers (and maybe mind) a little cleaner. It can take a lot of the load and repetitive work out of developing that end.
If you're looking to build out a UI with a large number of repeating elements, again state-handling, then I have to say I love working with React. It even caused me to change my way of thinking toward building out framework-less front end applications.
Another plus with React is the large number of pre-built UI design frameworks and components that you can simply drop in everywhere and modify to the extent you really need to, if at all.
As for media streaming, HLS.js (https://github.com/video-dev/hls.js) is a dream tool! There are some tricky bits to figure out that aren't documented overly well (like where the ID3 data is hiding amongst a single Uint8 array that has to be encoded and spliced), but the demuxer works like a dream without a heavy load increase and the event system is easy enough to work through.
That is if you're building out your own custom player. I work at a media company and had to build out a custom player to diagnose some issues with stream metadata coming from a number of radio stations through a series of nodes (with no streaming media experience at that level previously) and I was able to get it up and running inside of a day or two.
It's actually going to be everything except streaming video; going to send through audio, image links, and some extra data, and mush it all together at the client.
Fortunately I don't have to worry much about adaptive bandwidth, since for the target audience we can just kick them off if they don't have enough bandwidth... if they can't get the 24 kbps for the Opus stream, then too bad!
I'll have a good look at HLS.js. But I'm prototyping out using WebRTC to do it rather than HLS, given that iOS 11 will support it natively. Unless people have a strong argument against doing that way...
So... not for me then! Ha! :)
I've had a few more discussions with a webdev friend and it looks like Vue is the way to go. Thanks all.
Angular 1 or 2 makes some things simple by providing a proper "framework" in the place-logic-here sense. OTOH it can also be constraining because anything not matching that framework will be almost impossible to force in.
And when things gets a little more advanced than the todo-app you suddenly have to learn lots of complex parts of the framework at once.
React falls on the other end. Things stay relatively simple from todo and up, so easy to grow with. But there is no framework and no real consensus, so you need to evaluate a lot of debates and variations on how to approach things to move forward, this can require a lot more experience.
I wouldn't call an app with "minimal interactivity" an app, anymore than I'd call a newspaper interactive reading material.
One of the components is a keypad and display for a judge to enter scores... basically a web-connected traditional calculator in its design. :) So "minimally interactive" is probably a poor description on my part; it's nothing but interactions, just really simple ones.
Back in the day anyone could hack together a bit of JS for their website and get something up and running, even if it was a bit Heath Robinson. You actually still can do this but you wouldn't necessarily come away with that impression from reading about front-end development. Cynically, it sometimes feels like front-end developers are overcompensating for years of JS derision from "real" programmers with the plethora of tools and technologies you "need" to know.
If people want to use this, well, they're welcome. I can even see some benefit to a very lightweight UI/framework, especially if you don't have to worry about any version of Internet Explorer below 11, because the browser APIs these days are pretty comprehensive, and tend to behave reasonably consistently. Likewise CSS. [1]
Still, I can't get in any way excited about yet another library/framework. Go ahead and use it if you like but don't be trying to evangelise me about it.
([1] As an aside: I will say that IE11 is still something of a problem child in terms of not supporting some things I use, or not supporting them well - flexbox is an obvious example. Conversely, "scumbag" Chrome can be a problem child simply because it lets you get away with doing things that you shouldn't be allowed to do at all. E.g., `element.style = 'display: none'` instead of `element.style.display = 'none'`, meaning that when you come to test your code in other browsers... it breaks.)
That's a first. Is that a common saying somewhere? Does it refer to literal oral sex with a goat?
More like compensating for JavaScript's very real shortcomings.
I'm pretty new to it still, and boy do I disagree with this. I hadn't touched web development for about five years, prior experience being largely JavaScript-free after being chased well off by an employer's MooTools monstrosity, and coming to the modern JS world, with React and even Redux (though I think its APIs feel really clunky), was awesome.
These tools are less "Heath Robinson" and more prove that you understand what your stuff is doing, but that's a feature--I'd rather put in the spadework up front and be more assured of it doing expected things when it runs.
The frontend equivalent is dropping a script tag on a page and uploading it by FTP.
But there's a reason backend communities accepted devops long before frontend. Between all of the various BE platforms, all with their own dependency management intricacy, all the various databases, big data stores, queues, streams, object stores, cache systems, containers (docker, VMs, etc), the OS (for FE you can just drop your stuff on S3 and stick a CDN in front and it will scale to near infinity...try to scale your rails app like that for giggles).
BE is 100x worse.
Meanwhile I have 20 year old object pascal code continuing to work and run in production.
Even iOS which is a fast moving target provides fantastic compatibility with older code that I wrote in 2009
There are several libraries/frameworks that enable us to write Web Components now, even though browser support for the spec isn't fully there. E.g. [Aurelia](http://aurelia.io/) and [Polymer](https://www.polymer-project.org/) have great features, component APIs, and cross-browser support.
...
> There are several libraries/frameworks > browser support for the spec isn't fully there.
The irony is lost on frontend developers
No.
I came to frontend development on the peak of web 2.0 craze, when 10mb of jQuery "bells and whistles" on a corporate front page was considered hip and progressive. No matter how awful these 10mb of animation scripts were, they ran faster than 1mb of "highly optimised" react spa today.
Additionally, this 'fatigue' with front-end is getting a bit over told, I suspect it might be more alienation from developers who hacked jquery scripts together and feel they need to transition to app frameworks (I see so many simple websites and landing pages as react etc now).. where as those sites should just transition to vanilla js + dom..
The thing about inspired frameworks and 'churn' isn't a javascript/front-end thing, it happens everywhere, constantly... how many IOC, DI, ORM frameworks did Java and .NET have..
A lot of people got a lot of productive work done 'hacking' together jquery and jquery-ui scripts. The result wasn't pretty and was a bit of a maintenance nightmare.
They are not only a bit of alienated by having to work with frameworks, but they're expected to be as productive with these frameworks as they were hacking together jquery scripts and snippets, but are still the 1-man or 2-man developers within a wider business.
These frameworks are great in a business built around the web such as a SAAS business, but a lot of people are in businesses where their saas part is secondary, or are trying to maintain sites which just aren't the main product of the business.
They're pressured by well meaning but often misguided higher-ups to use the latest and greatest and feel the pressure of churn.
So so so true... but I can give a correction to the size of the team. I personally witnessed 10 to 45 man teams doing things as simple as a web app with a sole function being "login, enter account number to send money to, enter amount of money to send, and press the button"
While 45 is a bit of exaggeration on my side, as it counts team's own accountants, HRs, and 20 something PMs, "change manager" types, and other obscure managers of managers
Cyclomatic complexity went up many times. Going over a simple for loop in under 100 kilocycles for client side page generation was considered ok back 10 years ago. Even then, browsers had no problem with that.
Compare that with 20 plus layers of deep merges, with closure tricks, with prototype swapping on the fly in a transpiled observer pattern style input event handler - things like that you have in relatively simple SPAs today
Here's how I describe it: https://medium.com/front-end-hacking/how-it-feels-to-learn-j...
I just submitted it: https://news.ycombinator.com/item?id=15108546
- In Vue, you can call a method or access a variable directly using this.var or this.fn, did you deliberately choose to do it in a different way or are you planning to implement this using defineProperty?
- Are you planning to implement filters and refs?
- Are you planning to make it compatible with Vue to make it a drop-in replacement?
If it's gonna be a drop-in replacement and existing code can be reused, I can imagine testing it for some projects (framework7 based).
Edit: Another idea would be to integrate all the performance improvements in Vue, Evan You is a great developer who single-handedly built this great framework and I think it's a good idea to make your ideas available for the whole Vue ecosystem. Are you having plans to do that?
1. I'm not planning for this, as it has a runtime cost, but it can easily be done with a plugin[1].
2. I'm not planning to implement filters, as you can use methods instead. Refs might be coming if there is enough demand.
3. Moon is actually going in a different direction from Vue now. The core API will be very similar, but it might not be a drop in replacement for some of the advanced features of Vue. Most directives work, components are similar, but it won't be fully compatible.
[1] https://jsfiddle.net/btoegknn/
EDIT: To answer your edited question: I agree, Evan is a super smart developer, kudos to him for building Vue!
Applying some of the performance improvements might be a little complex for Vue, because Moon's compiler is fundamentally different in a couple ways. It generates code for a stricter HyperScript-like syntax (called "HyperMoon"), while Vue aims to be compatible with JSX as well.
Differences like these, while might seem small, are actually pretty complex when implemented in code.
That's a tough path you took and I wish you'll reach your goals. There are currently many frameworks who want to get the mind share. Would you mind to share your mindset behind the decision to split and build a new framework? Is there something in Vue you oppose or new concepts you would like to introduce? Would be very interested to hear your thoughts, I'm always on the lookout.
If you take out the compiler (similar to Vue's runtime version), Moon is only 3kb minified and gzipped!
Check out the Medium Article[1] and the README for more information on why I made it.
I think it takes a radical take on the problem to balance out the cons of using an unproven framework for any non-personal project.
Along with that, it also has lots of official plugins similar to what Vue provides.
You have to realize though that as developers we invest a lot of time on learning a technology. Companies invest a lot of money into stacks. It's not always easy to find developers and if your stack is "standard", it makes it easier to both grow your team and get up to speed with the code.
For a developer, company, or team, 23KB of JavaScript aren't going to be a very good incentive to ignore the advantages that come with using a standard framework like Vue. Websites are easily 10MB in size nowadays, 23KB are a drop in the ocean. I can optimize the logo and get 23KB without have my team learn a whole new framework.
What I'm trying to say is that I don't think "smaller Vue alternative" is a good selling point. If anything, because as your framework gains acceptance people will want more features, and it will inevitably grow, and there goes your competitive advantage.
It should do something better, or differently in a big way or a way people care about.
Just my two cents. I've never created anything that a huge number of people use, so I'm no institution in this area.
But plenty of front-end developers have not developed in Vue. If I'm starting a new project and someone suggests doing it in Vue, and I have to learn it all anyway, I might consider this as an alternative.
You can't compare your framework to something else (in size) if your framework does not account for backward compatibility and is missing some of the features.
That's not very significant, since even your favicon will be of comparable or even bigger size, much less any static asset like an image.
https://twitter.com/HenriHelvetica/status/877924754195324928
Which again be insignificant compared to the time it takes to download those assets from a cellular connection.
Not to mention that today's (and 2015's) mobile CPUs aren't that slow, they are comparable to mid-level laptops from 2010 or even later. If you're catering to the developed world, visitors wise, you'll be ok with 30K.
I understand that they are doing it because of marketing reasons, because many people think that smaller means faster.
And Moon is small because it doesn't have features that are necessary to build complex apps. For example, keyed updates :)
Check out the "extras" section in the README: https://github.com/kbrsh/moon#extras
It's the API that's proven.
I chose to be different in small things, such as being explicit about getting and setting properties on an instance. There are a couple oddities I didn't like with Vue as well, such as the syntax for a couple directives.
Check out the Medium article[1], it has the main reasons on why I made Moon.
These propagate up the tree so Moon eventually has a render function that is extremely optimized and can skip everything static, and the diff will only hit the nodes that can change.
Moon also has a stricter syntax for virtual DOM, allowing for less checks to be made at runtime compared to alternatives like HyperScript. This is made possible because Moon's compiler itself is in charge of creating the render functions, allowing it to give certain hints to the virtual DOM diffing engine.
There is really no way to avoid GC when you have a virtual DOM. The virtual DOM trees are pretty light and have memory usage similar to that of React and Inferno.
If you keep the virtual DOM in a typed array, there is not need for relying on the JavaScript garbage collection.
Here's an example:
https://github.com/vandenoever/baredom/blob/master/src/bared...
Since Moon has a specific way of using the DOM, you might be able to cut down on the number of array positions per node (currently 8).
if the cost of resetting is greater than the cost of collecting & re-allocating, then you're in the same place. at least in my experiments of trying to reuse already-allocated virtual nodes and resetting their properties was slower than simply unreferencing them for the GC and re-allocating new ones.
have you tested the tradeoffs of your approach in modern browsers? (i see the repo is somewhat dated).
As a vdom hidden behind an API like in the case of Moon or Vue, typed arrays could still make sense.
call me a skeptic, but i suspect that whatever impl you're comparing against is not terribly good.
this bench [1] allocates (and discards) ~3,000 virtual nodes per redraw, and each redraw is ~1.3ms, pegged @ 60fps.
the GC time is ~2% [2], so even if all GC went away, a 2x speedup is plain impossible. unless you're suggesting that the majority of the time spent in "Scripting" is heap allocations, which i'll concede may be a good amount - do you know if there's a way to measure cumulative time spent growing the heap?
Indeed it is not. The reference is a naive Object based DOM. The benchmark is also not using complete rendering and diffing: it uses versioning on the nodes. It replaces the updated dom nodes at a configurable rendering frequency. So it's very different and probably slower than current frameworks.
The remark that triggered the mention of baredom was the supposed unavoidability of the GC. Baredom does not use it and WebAssembly might make non-GC VDoms popular. Still, JS engines GC has gotten very good.
I was looking for options for HTML templating in JS found that JS template literals very naturally separate static and dynamic sections between the literals and expressions. I've been testing a library based on them [1], and for real-world templates with large static sections, it's indeed faster than traditional vdom.
https://github.com/facebook/react/issues/3226
All other "static" optimizations doesn't make any noticeable difference in performance in highly optimized vdom libraries. In fact, they are usually decrease overall performance because of increased implementation complexity.
Super easy.
question I've got to ask to people posing this question is are you not adaptable enough as a programmer to learn things fast?...I was a c# programmer and in 1 month it was like yeah no problem I understand the new tools. in fact the new frameworks taught me a lot about functional programming which was fantastic.
You can winge all you want but it's here. It's not going away due to corp IE9 and to be honest it annoys me because the js ecosystem as well is the nearest to open source ideals at the moment as a lot of people are sharing code. I can fix any bug in my dependency because I can read the source.
Yeah maybe some packages are useless. but tbh they're the ones that will sink to the floor but the good ideas are passed about like a zep cd. js is the first meme language (in the Dawkins sense) and it's extremely interesting to see it develop in the public eye
It's not that it's hard to learn this stuff. More so, it's tiresome and hard to care after watching the JS community re-inventing the same wheel(s), repeatedly.
Personally, I'd rather see the JS community solve a wider variety of problems.. instead of the same ones, over and over.
The amount of talent focused on building JS tools really is incredible. But it seems like the tools that generate the most hype always do the _same_ things, just in a shinier newer package. Which is frustrating.
I wasn't around at the time, but reading about programming languages past -- it seems like these are the same kinds of problems that fractured Lisp, back in the day.
The problem is this: It's fun, exciting, and relatively simple to roll your own X. So everyone does it. That's good. But too much fractures the community, instead of uniting it. Which.. may be more harmful than helpful, in the long-run. Time will tell. But the strongest & most productive communities typically converge on 'best-practices', once a problem is solved well enough. JS doesn't seem to do that. (At least not yet.)
The syntax is a bit strange, but once you get used to it, it's a pretty simple framework to grok.
all frameworks are blazing fast, but some are more blazing fast than others.
https://rawgit.com/krausest/js-framework-benchmark/master/we...
when i originally asked the author to submit Moon to js-framework-benchmark [1] i was surprised to hear that Moon's users have never needed or asked for keyed updates [2].
there are some authors (myself included) that consider libs without keyed DOM reconciliation to be seriously deficient.
[1] https://github.com/kbrsh/moon/issues/84
[2] https://github.com/krausest/js-framework-benchmark/pull/212#...
But would it not have been easier to simply submit a few pull requests to the Vue.js project?
If so, there is something very wrong with the state of open source development.
Part of it is that this is project started as a way for me to learn what goes on under the hood of libraries like React and Vue. While I made this, I wrote a compiler (lex + parse + generate), virtual DOM engine, reactivity system, and more!
I've started to take Moon in a different direction than Vue, and in the future it will most likely be even more different than Vue.
[1] https://rawgit.com/krausest/js-framework-benchmark/master/we...
If your web app doesn't have that, which I imagine the majority do not, don't use any client side framework at all. Javascript still works, even without a framework.
Are you suggesting jquery?
http://youmightnotneedjquery.com/
I guess I should also say you don't need a virtual DOM to make web apps. I personally like things like turbolinks (https://github.com/turbolinks/turbolinks)
[1] https://github.com/kbrsh/moon-router
[2] https://github.com/kbrsh/monx
Moon's purpose is to provide an API similar to Vue, while being less than half of the size, and having improved performance in most cases. Why try and stop something new without giving any valid criticism? If we all have a mindset like this, the web isn't going to ever improve.
I don't understand the 'shit on something new because there are similar things' mentality. It is the antithesis of the hacker spirit.
If you really want to improve the web, we're gonna need to think a bigger than this...
Moon has the core features of Vue, but it's started going in a different direction. I'd love any feedback and to hear your thoughts :)
Second, that reaction isn't about not wanting to "make decisions"... that simplifies a rather complex set of thoughts and beliefs that are driven by the often-comical Javascript world, which appears to favour extreme complexity, constant churn and obsolescence, a near-complete absence of standards or best practices, duplication of effort, and fragmentation. Of course, the flipside of this is rapid evolution, competition in a marketplace of ideas, etc, etc.
Third, if you don't want people to see this effort as yet-another-UI-framework, it'd probably be a good idea to position the project as something other than "everyone else's good ideas, but smaller and faster" (lightly paraphrasing from the project landing page)!
I am by no means trying to force people to use Moon. Instead, I am trying to show something that you might want to consider if you use and like Vue, as it is smaller and faster.
I agree I might need to reposition this project and state a little more. But I've already clarified why I made this in an article I wrote[1].
And, I should just point out: the original commenter, and myself, may have our... let's call it lack of patience with the JS community. But don't be discouraged by a little bitterness... as you mention in your blog post, there's definitely javascript library fatigue out there, and for good reason. But if the work is good, it'll speak for itself! Everything else is just marketing, and if you're not interested in pushing the project toward broader adoption, just keep on keeping on! Either people will use it or they won't, and either way you'll have learned a lot along the way, and there's nothing wrong with that.
Moon's goal isn't to have complete API compatibility with Vue, but instead to have a light alternative with a similar API.
These are hard decisions.
The truth, with software, is you don't really know what the implications of a design change are until you use it. We know a lot about what's good and bad about React now because we used it for a ton of stuff. That's the equivalent of taking your test vehicle out on the roads and testing it. In order to do that testing, these things get posted on Hacker News. Making your library mostly error free, putting docs up on GitHub... That's just getting it ready to actually test the ideas in that library.
The JavaScript community is one of the most research friendly communities out there. That's because we basically don't have a standard library, we have to send our entire application over the wire in less than a second, we can't really change the runtime, and people often want us to build new applications in a matter of days.
I get it, there are other realms of software development where you just have standardized tools, where stability is supreme, where you want to write huge checks and get back predictable quantities of mostly error free software. I get that.
But this comment shitting on JavaScript for changing too much, it's like making fun of a kid for saying weird stuff. If you want something comprehensible and predictable, go use something else! Let things be what they are. Appreciate that we have choices and different languages have different goals. Don't beat the same drum over and over of "JavaScript is too JavaScripty!"
Reflect upon this comment for a moment.
What you just said is, if we want a comprehensible, predictable development ecosystem, we should just use something other than the web.
Do you understand why this rebuttal is a bit ridiculous?
So are you choosing not to reflect and respond to my comment? Or did you really just completely miss the point I made?
I'll look for the comment where I saw more details on this. Edit to add: I haven't been able to find the comment where this was mentioned. It was within the past couple of months, though.
And one more thing. Just use Elm and live happily ever after.
I welcome new js framework. Seriously.
What's bugging me is that most JS work would have probably been better off as an improvement on something existing.
These sorts of comments amount to judging how others spend their time. It's just as silly to me as me suggesting that you spend your time credentializing in React so you can improve it for free.
I'd say there's plenty of value to offer the world by creating alternative projects that stand on their own, experimenting with different approaches.
Fragmentation - without sufficient forethought - is not cost free and 'more wood behind fewer arrows' works both for commercial entities and for open source.
Most of these 'alternative projects that stand on their own' are announced with great fanfare and die a silent death a few months later, the same effort spent on improving what is already out there would go a much longer distance.
Obviously everybody is entirely free to spend their time in whatever way they want.
Not really. Anyone needing a web UI framework can use Moon. Even if you haven't used React or Vue before.
How is this any different? You can't claim that X is better or faster than Y just because X is smaller or has fewer features. There are a lot of other factors in play here.
Getting ridiculous.
Edit: Sorry, I misunderstood your comment. I interpreted your comment as saying all of these new frameworks are making things ridiculous. This implies that Moon is contributing to that, and I'd rather have feedback.
we need a standardized declarative dom patching mechanism with data-binding that has optimal perf so we dont need to keep reimplementing virtual-dom.
Template literals in JS give us a way to always tell the static from dynamic parts of a template. HTML <template> elements let us stamp out pre-defined trees of DOM quickly. Combined we can then only update the dynamic parts without a virtual DOM.
[1] https://github.com/WebReflection/hyperHTML [2] https://gist.github.com/WebReflection/fadcc419f5ccaae92bc167...
are there advantages over t7, other than NIH?
I also didn't want to use vdom because it doesn't encode whether nodes are static or dynamic, and even static sections are diffed. That's extremely important feature for performance and memory overhead, which is why I'm happy to see that emphasized in Moon.
Also, coming from the Polymer team, where we've had a lot of success using <template> elements to stamp out large pre-defined DOM trees, I wanted a system backed by those.
You could point to frameworks which have had majority usage at any given point and say those were the "right" ways at the time. But ideas evolve, which isn't so ridiculous.