kelvinsekx
RETURN TO ARTICLES

MavoScript for Beginner

^(* ! *)^ 7 minutes read
Last modified on Sat, October 10,2020

Over the years as a javascript developer, I have understood the ubiquitousness of javascript libraries and frameworks in order to build awesome user interfaces.

They make our hard work shine.

In this regard, libraries and frameworks like react and vue have shined respectively.

Although, react and vue do all the heavy lifting, they come with a small itch: they require that their users have more than basic understanding of javascript at least [IMO].

MavoScript to the rescue

Mavoscript comes built out with the assumption that you might only know HTML and CSS yet want to build awesome UIs.

Mavoscript makes us build UIs without the need to ever understand javascript. With that in mind, mavoscript power resides in the use of its special html attributes.

Note: If you have used vue or angular before now they seem similar. Most especially the special attribute part. However, Mavoscript is not javascript. Things are handled here a little different.

Getting started with mavoscript

To get up and running with mavoscript, all you need is to paste the js and css links below into the head component of your html document.

note Remember you need internet connection to make things work

<link rel="stylesheet" href="https://get.mavo.io/mavo.css" / >

<script src="https://get.mavo.io/mavo.js"></script>

Grant mavo permission with mv-app

If you’ve successfully pasted the links, the next step is to notify mavo which element you want it to handle.

This is similar to react unique id html-attribute passed to ReactDOM but we will have to replace id with mv-app.

The mv-app html-attribute notifies mavo it should be responsible for the element. I mean this, mv-app tells mavoscript that the element is concerned with her and she, mavo, should take note and start treating it differently.

See how to tell mavoscript about an element below.

<!-- mv-app is passed like a regular html-attribute -->
<div mv-app="mavopractice">

</div>

Deep Dive into mavo basics

To practice the basic concepts we will create a calculator project.

Along the way, I will be discussing the most basic concepts in mavo.

You can use the markup below as a template for your calculator.

<div mv-app="mavopractice">
    <h1>Hey mavos,</h1>
    <p>Let’s do some calculations…</p>
    <form>
        <input type="text" />

        <select >
            <option value="+">+</option>
            <option value="-">-</option>

            <option value="*">*</option>
            <option value="/">/</option>
        </select>

        <input type="text" />
    </form>

    <!--container where answer will be displayed -->
    <div class="answerContainer">

    </div>
</div>

Property

The concept you will be learning first is property.

To me, property is the most fundamental concept with mavo. It is very similar to variables in javascript or in any programming language you are familiar with.

Howbeit, property is not as complicated as variable can be.

It is just an attribute that is passed to an element inorder to collect its values.

Property naming conventions are similar to the naming convention in javascript.

Check out how I added three properties and named them.

<input type="text" property="input1" />
<select property="sign">
.
.
.
</select>
<input type="text" property="input2" />

Now that we added property attribute to some of our elements we can watch changes to the element.

  1. input1: This will be used to collect the first inputed number.
  2. sign: This is needed to keep watch of changes to our calculator signs
  3. input2: The third element we want to keep track is the second inputed number

ALERT!!!: SPOILER AHEAD

To confirm, let’s make a quick script to see our changes in the console.

<script>
console.log([input1])
</script>

###The Spoiler: You fell for it? Remember I told you mavoscript isn't javascript. If you did like my instinct did above you would get an error in your console. If you've actually done the console.logging above, try to see the console in your browser. It should print Uncaught ReferenceError: input1 isnot defined. Please delete the script because it won't work.

To actually handle things, we can only see changes through the html. Do this now.

<!--container where answer will be displayed -->
    <div class="answerContainer">
    <!-- Here is the real way of handling things-->
        [input1]
    </div>

Start typing numbers into the first input and see the changes live in the div with class answerContainer. This is more than enough evidence property really keep watches for changes to element.

Expression

Pasting our values to see is not enough. It does not make enough sense of what calculators can do. Calculators take input and transform them. We want the same. This is where expression comes in. You want input1 + input2 to give an answer.

All valid javascript expressions are valid in the mavo too. In this case we can dump javascript +, - etc and see some magic.

Re-edit the immediate changes above to [input1 + input2] and tell me what you saw when you started adding numbers to both inputs.

mv-expression

If you are a little bit conversant, you should have noticed a strange bracket `" [ " input1 + input2 " ] ". I have been using it for quite a while in this article.

Expressions need a place to stay, and mavo created that with the brackets. You can't just put the property's name into the html value and expect it to do something.

"By default, mavo expressions are delineated with brackets", according to the mavo docs. However, you can change the syntax but we will not be covering that here.

You wouldn’t want to place properties in the middle of elements without brackets. It won't work. You want mavo to be aware that the name is a property right? Then do not ever forget to add the brackets.

Well we can move on now.

conditionals

With mavo, there are two ways to make conditionals : if() and mv-if

According to https://mavo.io, "you can use the if(condition, ifyes, ifno) function to print out different text depending on a condition". On the other hand, the mv-if is an attribute that hides or shows an element considering that the condition is true.

The if() amd mv-if works very similar. Only that the former, if() , is a function and can be used for more complex logic, and the latter, mv-if , is an attribute and simplifies logic to a simpler yes or no.

In this tutorial, I have decided to stick to mv-if for two reasons

  1. since you must have been familiar with special attributes like property and mv-app,
  2. mv-if is simpler if().

BACK TO CODING: enough of the talking

In our case, we would hide some element based on the user chosen option.

note: ##Please read the code below carefully It might first look confusing, but re-read. It is not as difficult like you think. If you re-read, it should be very clear.

<div class="answerContainer">

    <!-- if the sign property is '+', show this else hide it-->
    <div mv-if="sign = '+'">
        <p>[input1] + [input2] = </p>
        <p> [input1 + input2]</p>
    </div>

    <!-- if the sign property is '-', show this else hide it-->
    <div mv-if="sign = '-'">
        <p>[input1] - [input2] = </p>
        <p>[input1 - input2]</p>
    </div>

    <!-- if the sign property is '*', show this else hide it-->
    <div mv-if="sign = '*'">
        <p>[input1] * [input2] = </p>
        <p>[input1 * input2]</p>
    </div>

    <!-- if the sign property is '/', show this else hide it-->
    <div mv-if="sign = '/'">
        <p>[input1] / [input2] = </p>
        <p>[input1 / input2]</p>
    </div>
</div>

You now have an amazing calculator. Reload your browser to see the changes.

Putting all together so far

If you understood everything so far, the changes shouldn’t be a deal. The full code can be found on https://github.com/kelvinsekx/mavocalculator.

Closing Note

With this you have a functional calculator all without any programming language isn’t that awesome.

Although this part isn’t necessary, you add this css file to make things look cool.

<style>
    .answerContainer{
        width: 12rem;
        margin-top: 10px;
        font-size: 2rem;
        padding: 2rem;
        background: forestgreen;
        color: #f4f4f4;
    }
</style>
Edit this page


    Kelvinsekx.codes is built, maintained and written by Ukuejubola Kelvin Oritsetimeyin.

    Icons from www.flaticon.com