A blazing fast UI library I’ve been using for a while now, it solves all my problems, and does it beautifully. After a while, in late 2015, I began to notice some performance issues with my application. So I began to create something new, as a learning project. Hopefully to see how this DOM stuff actually works, and write a solution specifically for me. Vue After researching how Vue actually works under the hood, I came across . It had the concept of a virtual DOM, and diffing this against the previous state every time. I also came across the fact that Vue didn’t use this idea at the time (it does now). React I began writing a simple library, not meant for anyone else to use. Just a single file, with jumbled up code, attempting to make something. I just didn’t know what it was yet. After getting it to work, no matter what I did, it was So I gave up, and just kept on using my slow implementation. ridiculously slow! Remake Later, I came across . It was game-changing, a alternative, that was , and only in I read the code, it was beautiful, easy-to-read, and I learned a lot about how a UI library actually works. Preact React faster 3kb! So I set out to recreate what I called “Moon”. The goal was to be like Preact, but for Vue, as I preferred Vue’s API. Performance The performance of these frameworks can be so much better, it’s just that no library has it right. They all have their benefits, but still are weak in some areas. For example, library A might be good at adding items to the end of a large list, and library B might be good at adding items to the start of a large list. There’s a explaining why some abstractions are slow. In a nutshell, interfacing with the DOM directly is faster than an abstraction over the DOM. great article Still, dealing directly with the DOM can get messy, often leading to spaghetti code if not written correctly. All libraries have their abstraction, React and Vue use a virtual DOM, the Ember team created Glimmer, and hyperHTML uses bindings between the DOM and context fragments. These all are specific to the library, each with its’ own performance benefits and weaknesses. The question is, which library should you use? Moon to the Rescue After a couple months of development, what was originally supposed to be a library for my use, was rewritten into a library ready for anyone to mess around with. ⚡️ It uses a version of the virtual DOM, but intelligently marks static nodes and skips over them, and only updates the parts of the DOM that have changed. 💎 It provides a beautiful API, to Vue. Complete with directives, reactive DOM updates, computed properties, etc. very similar 🎉 It is only ! 5kb 🔨 It has a built in component system, allowing you to compose your UI out of different components. Benchmarks Here are the DBMonster results (higher is better): Moon — 102 rerenders/second Preact — 85 rerenders/second Vue — 50 rerenders/second React — 50 rerenders/second Here are the results benchmarking TodoMVC implementations (lower is better): Another One? I know, I know, there seems to be a new framework released every day. Moon is one of them. Javascript This doesn’t mean you have to use it, in fact, it doesn’t mean anyone has to. If you are fine with your current solution, great! Keep on grinding. If you are starting a new project, or are looking for some performance benefits, or want a nice API, feel free to try out Moon! Why so Long? Moon, an idea that started in late 2015, is now almost production ready in early 2017. Why did it take so long? Remember, Moon started as a learning project. At the time, I was simply looking to make something for myself, without all the bloated features of popular libraries that I simply . I also knew nothing about the DOM. didn’t need It’s amazing how much I’ve learned since then. For more information, check out the . If you liked this, please hit the 👏 Moon website
