CINXE.COM

<!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="description" content="The purely functional user interface library that's fast, tiny, and intuitive."> <meta name="author" content="Kabir Shah"> <title>Moon</title> <link rel="shortcut icon" href="/img/logo.png"/> <link rel="stylesheet" type="text/css" href="/css/lib/grain.min.css"/> <link rel="stylesheet" type="text/css" href="/css/styles.css"/> <link rel="stylesheet" type="text/css" href="/css/index.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-14', 'auto'); ga('send', 'pageview'); </script> </head> <body> <div class="container s-x-41 s-y-i d-y p-x-10 p-y-10 m-y-10"> <div class="a-y-c m-x-7"> <div> <h2><a href="/" class="td-normal c-f-white">Moon</a></h2> </div> <div class="m-x-5"> <a href="/guide" class="td-normal c-f-white">Guide</a> <a href="/play" class="td-normal c-f-white">Playground</a> <a href="/examples" class="td-normal c-f-white">Examples</a> <a href="https://github.com/kbrsh/moon" class="td-normal c-f-white">GitHub</a> </div> </div> <div class="p-y-10 m-y-5 a-y-c"> <img src="/img/logo.png" alt="Moon Logo" class="s-x-19 s-y-19"/> <div class="d-y m-y-5"> <h1 class="s-x-30">The purely functional user interface library that's fast, tiny, and intuitive.</h1> <div class="m-x-5"> <a href="/guide" class="b-n"><button class="s-b-2 p-x-5 p-y-2 c-f-white c-b-purple-dark">GET STARTED</button></a> <a href="/play" class="b-n"><button class="s-b-2 p-x-5 p-y-2 c-f-white c-b-purple-light">PLAYGROUND</button></a> </div> </div> </div> <div class="m-x-5"> <div class="s-x-26 m-y-5"> Applications today are complex, built on top of frameworks that create abstractions fundamentally based on mutability and imperative code. They introduce concepts like reactivity or local state or algebraic effects, all in attempt to represent views as a function of state. In reality, applications are much more sophisticated and require third-party libraries for any effects other than updating a view. </div> <div class="s-x-26 m-y-5"> Moon is a novel approach to web applications based on pure functions. An application is a function that uses drivers, programs that provide an interface to the real world. These functions take input from drivers and return output to drivers. Drivers can be responsible for things like views, state, audio, HTTP requests, routing, and timing events. Applications run on the Moon, and drivers update the Earth. </div> </div> <div class="m-x-5"> <div class="s-x-26 d-y m-y-5"> <h2>Functional & Declarative</h2> In Moon, web applications are treated as functions that take driver inputs and return driver outputs. Drivers handle the interface between the output of your application and the browser so that it can stay pure and declarative. On the contrary, other popular frameworks claim to be "declarative" but only treat the view as a function of state. However, they treat other ideas such as local component state or effects as afterthoughts, requiring imperative and impure code. </div> <div class="s-x-26 m-y-5"> <pre class="s-x-i s-b-2 p-x-4 p-y-4"><a href="/play/#const%20button%20%3D%20Moon.view.m.button%3B%0A%0Aconst%20increment%20%3D%20(%7B%20data%20%7D)%20%3D%3E%20%7B%0A%09const%20dataNew%20%3D%20data%20%2B%201%3B%0A%0A%09return%20%7B%0A%09%09data%3A%20dataNew%2C%0A%09%09view%3A%20%3Cview%20data%3DdataNew%2F%3E%0A%09%7D%3B%0A%7D%3B%0A%0Aconst%20view%20%3D%20(%7B%20data%20%7D)%20%3D%3E%0A%09%3Cbutton%20%40click%3Dincrement%3E%7Bdata%7D%3C%2Fbutton%3E%3B%0A%0AMoon.use(%7B%0A%09data%3A%20Moon.data.driver%2C%0A%09view%3A%20Moon.view.driver(%22%23root%22)%0A%7D)%3B%0A%0AMoon.run(()%20%3D%3E%20(%7B%0A%09data%3A%200%2C%0A%09view%3A%20%3Cview%20data%3D0%2F%3E%0A%7D))%3B" target="_blank" class="td-normal"><img src="/img/play.png" alt="Try in playground" class="s-x-5 s-y-5"/></a><code>const button = Moon.view.m.button; const increment = ({ data }) => { const dataNew = data + 1; return { data: dataNew, view: <view data=dataNew/> }; }; const view = ({ data }) => <button @click=increment>{data}</button>; Moon.use({ data: Moon.data.driver, view: Moon.view.driver("#root") }); Moon.run(() => ({ data: 0, view: <view data=0/> }));</code></pre> </div> </div> <div class="m-x-5"> <div class="s-x-26 d-y m-y-5"> <h2>Tiny & Fast</h2> Modern web frameworks often add a lot of weight to JavaScript bundles, resulting in slower web applications and load times. This effect is especially visible when using a slow internet connection. Since Moon is so simple at its core, where it creates an abstraction to allow drivers to handle input and output, it only weighs 2kb minified and gzipped. On top of that, it is specifically optimized for JavaScript engines to perform fast virtual DOM diffing and DOM operations. </div> <div class="s-x-26 m-y-5"> <img src="/img/size.png" alt="Sizes of popular frameworks relative to Moon." class="s-x-26 s-y-20"/> <a href="https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html"><img src="/img/speed.png" alt="Performance of popular frameworks relative to Moon." class="s-x-26 s-y-20"/></a> </div> </div> <div class="m-x-5"> <div class="s-x-26 d-y m-y-5"> <h2>Intuitive & Consistent</h2> Moon has a very minimal API surface, used solely for initializing a runtime that allows for functional applications inside the imperative browser environment. The view language was designed to mimic HTML, a language familiar to most web developers. Other view languages often have variadic arguments that can have any type for creating view nodes. They create abstractions like directives or special template syntax for control flow. Moon's view language is consistent, where every tag is a function call and control flow is normal JavaScript. </div> <div class="s-x-26 m-y-5"> <pre class="s-x-i s-b-2 p-x-4 p-y-4"><code>// Moon view const posts = ( <div children=(posts.map(post => <view.post id="my-post">{post}</view.post> ))/> ); // Compiled to JS const posts = ( div({ children: posts.map(post => view.post({ id: "my-post", children: [Moon.view.m.text({data: post})] }) ) }) );</code></pre> </div> </div> <div class="d-y m-y-3"> <h2>Jump into the guide.</h2> <div class="m-x-5"> <a href="/guide" class="b-n"><button class="s-b-2 p-x-5 p-y-2 c-f-white c-b-purple-dark">GET STARTED</button></a> <a href="/play" class="b-n"><button class="s-b-2 p-x-5 p-y-2 c-f-white c-b-purple-light">PLAYGROUND</button></a> </div> </div> </div> </body> </html>