Creating A Simple Profile Application With MoonJS

Published Aug 05, 2017Last updated Aug 08, 2017
Creating A Simple Profile Application With MoonJS

Hello! MoonJs is a relatively new Javascript framework that I saw there was no tutorial on and I decided to try it then write a basic tutorial on it. So,just as we have Preact for ReactJs, we have “Moon” for VueJs. Some of the key things about MoonJs is that like some other javascript frameworks, it is very light. Moon uses a fast Virtual DOM, and can re-render the DOM efficiently and most importantly, MoonJs is so easy to learn. 
I will be building a simple application that shows the basic information about a user and this tutorial is to give an head start to using MoonJs.

Requirements

  • Knowledge of JavaScript
  • Text Editor

Installation

To install MoonJs, there are two ways. One way is through Moon-cli and the other way is through Content Delivery Network (CDN) which can be found here. To setup our project well, run the following commands below:

mkdir moon-tutorial
cd moon-tutorial

The following command will create a new folder called moon-tutorial and check into the directory. So after doing that, open your project in your favourite text editor then create a file called app.html then add the lines of code

<!DOCTYPE html>
<html>
<head>
 <title>Moon Tutorial</title>
 <meta charset="UTF-8">
 <!-- Development Build -->
 <script src="https://unpkg.com/moonjs/dist/moon.js"></script>
</head>
<body>
</body>
</html>

Adding MoonJs Flavour

Create a folder called src and create another folder inside it called js then create a file called app.js in the the folder. In the file, we will be initiating an instance of MoonJs to display “Hello Pusher of Codes”. We will achieve this by adding the following codes below to the app.js file.

const moon = new Moon({
  el: ".app",
  data: {
    message: "Hello Pusher of Codes!"
  }
});

Update your app.html to look like this:

<!DOCTYPE html>
<html>
<head>
 <title>Moon Tutorial</title>
 <meta charset="UTF-8">
 <!-- Development Build -->
 <script src="https://unpkg.com/moonjs/dist/moon.js"></script>
</head>
<body>
<div class="app">
  <h1 style="text-align:center;">{{message}}</h1>
</div>
<script src="src/js/app.js"></script>
</body>
</html>

With the above you should see something like this below:

Building A Simple Profile

Let us make our application look better with more information about the user. Add the code below to app.html file:

<!DOCTYPE html>
<html>
<head>
 <title>Moon Tutorial</title>
 <meta charset="UTF-8">
 <!-- Development Build -->
 <script src="https://unpkg.com/moonjs/dist/moon.js"></script>
</head>
<body>
<div class="app">
  <h1 id="name">{{full_name}}</h1>
  <p id="email">{{email}}</p>
  <p id="phone">{{mobile_number}}</p>
  <p id="description">{{short_info}}</p>
</div>
<style type="text/css">
 .app{
  margin-top:200px;
 }
#name{
  text-align:center;
  color: blue;
 }
#email{
  text-align:center;
  color: blue;
 }
#phone{
  text-align:center;
  color: blue;
 }
#description{
  text-align:center;
  color: blue;
 }
</style>
<script src="src/js/app.js"></script>
</body>
</html>

Then, make changes to the app.js file with the code below

const moon = new Moon({
  el: ".app",
  data: {
    full_name: "Goodness Kayode | Pusher of Codes!",
    email:"gtkbrain@gmail.com",
    mobile_number:"+2341188469520",
    short_info:"I am Goodness Kayode also called Pusher of Codes. Linguist turned engineer.Community lover"
  }
});

Yupp!!! With this you should have an head start to creating applications with MoonJs.

Conclusion

I hope you enjoyed the tutorial? I just scratched the surface of the framework but this tutorial will help with teaching you how to setup a MoonJs application and how to write a basic application with the framework.
Link to repository is here

Discover and read more posts from Goodness Toluwanimi Kayode
get started
Enjoy this post?

Leave a like and comment for Goodness

7
2
2Replies
Steve Geluso
3 months ago

Thanks for the quick introduction. I ran into a few errors. You define el as “#app” but your HTML has class=“app”. Change that to id=“app” to make it work.

I used the moon-cli tool to generate the project and it generated an index.html which I replaced the contents of to make it look like your app.html file.

For anyone else following along, here’s the exact steps to install and get it running from scratch:

npm install -g moon-cli
moon init tutorial
cd tutorial
npm install

Then edit js/scripts.js to add content like this:

const Moon = require("moonjs");
require("./components/header.moon")(Moon);

new Moon({
  el: "#app",
  content: "Hello pushers of code!"
});

Finally, fire up npm run dev and continue the rest of the tutorial from here!

npm run dev
Esteban Negri
3 months ago

From what I’ve seen, it’s pretty similar to VueJS but lighter, simpler and without a router.