Moon.JS

 Moon.js is a minimalistic JavaScript library for building fast, functional user interface.Moon.js embodies the component-driven design approach and uses templates to create components. It is similar to Vue.

Advantages of using Moon.js

·       Tiny and fast

·       Intuitive and consistent

·       Functional and has a driver-based design

Tiny and Fast: Modern web frameworks often add a lot of weight to JavaScript bundles, resulting in slower web applications and load times. This we can easy identify when there is slow internet connection.

 Intuitive & Consistent: Just because Moon has minimal API surface, solely used for   initializing a runtime that allows functional applications inside the imperative browser   environment, view language was designed to mimic HTML, familiar language for most of the   web developers.

Hello Moon  Example

After installation open visual studio code editor and learn our most favorite how to start with Hello Moon

                 app.js

            output

  Moon.JS – Passing Parameters to Methods

Array Output

 Browser in Moon

Moon can be embedded in our browser in the script tag. Moon has a module moon-browser that enables us to use Moon view language from the browser.To enable the Moon browser to use, we should add two script tags in our HTML.

<script src="https://unpkg.com/moon"></script>

<script src="https://unpkg.com/moon-browser"></script>

The scripts are from unpkg’s CDN. The first script tag imports the Moon main library and the second script imports the library Moon Browser. Now, when we write Moon view language in the browser, we should use the script tag and add script type as “text/moon”. 

<!-- As an external script -->

<script src="./main-script.js" type="text/moon"></script><!-- As an inline script -->
<script type="text/moon">
    ...
</script>

Mounting

Moon application is mounted on a single element. We usually use the div element.

<div id="root"></div>

Moon application will be mounted in the div#root element. This div#element is placed in an index.html which is the default/index HTML page.

To mount a Moon app on the div#root we use the view driver.

Moon.use({
    view: Moon.view.driver("#root")
})

Moon View Language

This is used to create/compose views in Moon.

Data

Moon drivers are used for managing its views and data. In this section, we will look into the data. The data driver handles the persistent state provides the data as an input to wherever it is needed,data driver holds the global state of the app. To set the initial data in the moon app, we use moon.use API

Moon.use({

data: Moon.data.driver

})

View

View driver in Moonjs is used for creating and mounting elements on the DOM.

Moon.use({
    view: Moon.view.driver("#root")
})

Functions in Moon return views to replace the old one. This will be returned in an object set in a view property. Moonjs selects the value in the view property from the returned object and updates the view mounted at div#root accordingly.

Moonjs uses a virtual DOM algorithm to know when and wherein the DOM needs to be updated

function handleClick() {
    return {};
}Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

See, the button has a click event to call handleClick function. See the function returns an empty object with no view property, this will not update the DOM view.

Creating elements

Moonjs provides a large set of functions to create nodes. we can use elements function from the Moon module to create elements.

const { div, text, node, p } = Moon.view.m

Moon exports function with the name of the element. div function creates a div element. text function creates a text node. node function creates a custom element. p function creates a paragraph element. Just as their elements name.

For now, we covered all the basics of moon with all the basic examples.

https://www.youtube.com/watch?v=JrckHeOrt_s