-
Notifications
You must be signed in to change notification settings - Fork 3
/
introducing-moon.html
62 lines (52 loc) · 6.66 KB
/
introducing-moon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Kabir Shah">
<title>Introducing Moon | Blog of Kabir Shah</title>
<link id="favicon" rel="shortcut icon"/>
<link rel="alternate" type="application/json" title="Kabir Shah" href="/feed.json"/>
<link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="/css/lib/grain.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/styles.css"/>
<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","https://www.google-analytics.com/analytics.js","ga");
ga("create", "UA-70792533-7", "auto");
ga("send", "pageview");
</script>
</head>
<body>
<div class="s-x-33 p-x-10 p-y-10 m-y-6">
<div class="s-x-i">
<a class="s-x-i plain" href="/">
<img src="/img/logo.png" alt="Personal Logo" class="s-y-8"/>
</a>
<h1 class="s-x-i">Introducing Moon</h1>
<p class="s-x-i">March 25, 2017</p>
</div>
<p class="s-x-i">I used <a href="https://vuejs.org/">Vue</a> for a while, and it solved all of my problems 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.</p><p class="s-x-i">After researching how Vue works under the hood, I came across <a href="https://facebook.github.io/react/">React</a>. It had the concept of a virtual DOM, and patching this with state updates in order to update the DOM. I also came across the fact that Vue didn’t use this idea at the time (it does now).</p><p class="s-x-i">I began writing a simple library, not meant for anyone else to use. It was a single file, with jumbled up code, attempting to make something. I just didn’t know what it was yet.</p><p class="s-x-i">After getting it to work, no matter what I did, it was <em>ridiculously slow!</em> So I gave up, and kept on using my slow implementation.</p><h2 id="remake" class="s-x-i">Remake</h2><p class="s-x-i">Later, I came across <a href="https://preactjs.com/">Preact</a>. It was game-changing, a React alternative, that was <em>faster</em>, and only in <em>3kb!</em> I read the code, it was beautiful, easy-to-read, and I learned a lot about how a UI library actually works.</p><p class="s-x-i">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.</p><h2 id="performance" class="s-x-i">Performance</h2><p class="s-x-i">The performance of these frameworks can be so much better, but 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.</p><p class="s-x-i">There’s a <a href="http://webreflection.blogspot.co.uk/2015/04/the-dom-is-not-slow-your-abstraction-is.html">great article</a> explaining why some abstractions are slow. In a nutshell, interfacing with the DOM directly is faster than an abstraction over the DOM.</p><p class="s-x-i">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.</p><p class="s-x-i">These all are specific to the library, each with its’ own performance benefits and weaknesses. The question is, which library should you use?</p><h2 id="moon-to-the-rescue" class="s-x-i">Moon to the Rescue</h2><p class="s-x-i">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.</p><ul>
<li><p class="s-x-i">⚡️ 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.</p></li><li><p class="s-x-i">💎 It provides a beautiful API, <em>very similar</em> to Vue. Complete with directives,
reactive DOM updates, computed properties, etc.</p></li><li><p class="s-x-i">🎉 It is only <em>6kb</em>!</p></li><li><p class="s-x-i">🔨 It has a built in component system, allowing you to compose your UI out of
different components.</p></li></ul>
<h2 id="benchmarks" class="s-x-i">Benchmarks</h2><p class="s-x-i">Here are the DBMonster results (higher is better):</p><ul>
<li><p class="s-x-i">Moon — 102 rerenders/second</p></li><li><p class="s-x-i">Preact — 85 rerenders/second</p></li><li><p class="s-x-i">Vue — 50 rerenders/second</p></li><li><p class="s-x-i">React — 50 rerenders/second</p></li></ul>
<p class="s-x-i">Here are the results benchmarking TodoMVC implementations (lower is better):</p><p class="s-x-i"><img src="../img/introducing-moon/benchmark.png" alt="">
<span class="caption">Benchmark for adding 100 items, completing 100 items, and deleting 100 items</span></p><h2 id="another-one" class="s-x-i">Another One?</h2><p class="s-x-i">I know, I know, there seems to be a new Javascript framework released every day. Moon is one of them.</p><p class="s-x-i">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.</p><p class="s-x-i">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!</p><h2 id="why-so-long" class="s-x-i">Why so Long?</h2><p class="s-x-i">Moon, an idea that started in late 2015, is now almost production ready in early 2017. Why did it take so long?</p><p class="s-x-i">Remember, Moon started as a learning project. At the time, I was looking
to make something for myself, without all the bloated features of popular
libraries I <em>didn’t need</em>. I also knew nothing about the DOM.</p><p class="s-x-i">It’s amazing how much I’ve learned since then.</p>
<div class="s-x-i m-x-5">
<p><a href="https://kabir.sh">Portfolio</a></p>
<p><a href="https://blog.kabir.sh">Blog</a></p>
<p><a href="https://twitter.com/kbrshah">Twitter</a></p>
<p><a href="https://github.com/kbrsh">GitHub</a></p>
</div>
</div>
<script type="text/javascript" src="/js/index.js"></script>
</body>
</html>