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
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:
Then edit
js/scripts.jsto addcontentlike this:Finally, fire up
npm run devand continue the rest of the tutorial from here!From what I’ve seen, it’s pretty similar to VueJS but lighter, simpler and without a router.