Getting Started with Malina.js

Expressions are written in Malina.js in between curly braces: . These expressions are pieces of Malina language statements that are embedded in HTML and are executed when the app runs.

Example:

<div>
My name is {getMyName()}.
I am {20 + 8} years old.
</div>

We have two expressions here and . These expressions are evaluated and the results are injected into the HTML.

is a function call, Malina will call the function and set the returned value back in the HTML.

is an addition expression, Malina will evaluate it and set the result in the HTML.

Binding in JS frameworks means connecting a variable to the HTML view. So the HTML view reflects/uses the variables’ value in its DOM, a change in the variable’s value causes the DOM to re-render to display the new value. It is simple but yet it is one big essential feature in frontend development.

One-way binding is now the binding of a variable from the script to the HTML view. It is in one direction. A change in the variable reflects in the HTML DOM it is bound to.

Example:

<script>
let name = "Chidume Nnamdi"
</script>
<div>
My name is {name}.
</div>

The in the is a variable in the script tag. It is bound to the HTML view using the , the value will be displayed there in the DOM, and any change in the value will be reflected in the DOM.

Example:

<script>
let name = "Chidume Nnamdi"
let placeholderValue = "What's your name?"
</script>
<div>
<input value={name} placeholder={placeholderValue} type="text" />
</div>

Here, we bound and variables to input’s and attributes. and attributes values will be and respectively.

In the DOM, it will be this:

<div>
<input value="Chidume Nnamdi" placeholder="What's your name?" type="text" />
</div>

Two-way binding is like one-way binding but in this case, the variable can be changed from both the script and view. It flows in both directions.

Let’s see an example:

<script>
let name = "Nnamdi"
</script>
<body>
<div>
<input type="text" :value={name}>
</div>
</body>

The attribute in the input box is two-way bound to the variable. On initial rendering the input box will have a value “Nnamdi” inside the input box, when we type in text like “Nnamdi Chidume”, the value of the input box will change and so the variable will change from “Nnamdi” to “Nnamdi Chidume”. In fact, the variable is changed to the current value of the input box as we type in it. If the variable is changed, the value of the input box will reflect the change. Do you see it? the data flow from the script to the view, changes to any side change the bound data value.

Two-way binding in Malina.js is done using the or shortcut . If the property name is the same as the bound variable name we can omit the variable name.

We can attach or listen to events in Malina.js. Events like , , events, events, etc can be attached to elements using the formats:

The eventName is the name of the event like click, hover, key(keyup, keydown) events, mouse(mouseup, mouseover) events, etc.

Example:

<script>
function handler(e) {
console.log("Clicked !!")
}
</script>
<div>
<button @click:handler>Click Me!</button>
<button @click={handler}>Click Me!</button>
<button @click={(e) => console.log("Clicked me.")}>Click Me!</button>
</div>

Here, we demonstrated ways to register click events in an element.

We can get hold of the DOM instance of an element or an object instance of the Malina Component. This is done using the hashtag followed by the name of the reference variable.

Example:

<script>
let divRef
function handler() {
console.log(divRef.innerHTML)
}
</script>
<div>
<div #divRef>I'm a DIV</div>
<button @click={handler}>Click Me!</button>
</div>

We have a reference variable in the script and also set on the div element using the . Malina will get the DOM instance of the div element(an object of HTMLDivElement) and assign it to the variable.

See in the handler function, we know that the divRef variable we have the object of the HTMLDivElement so we can access the DOM APIs. There we are logging the inner HTML of the div element using the innerHTML property. So in our console, we will see text logged.

Conditional rendering can be achieved in Malina.js. This enables a portion of the DOM to be rendered when a condition is met.

The does the job in Malina.

Example:

<script>
let render = true
function renderHandler() {
render = false
}
</script>
<div>
{#if render}
<div>True Condition</div>
{:else}
<div>False Condition</div>
{/if}
<div>
<button @click:renderHandler>Change Render</button>
</div>
</div>

The condition here is dependent on the variable. On initial rendering, the will be rendered because the variable is initially set to true. If we click the button will change the variable value to false, this will cause the to be removed from the DOM and the will be rendered. This is conditional rendering.

We can iterate over a list and render them in Malina just like we do in Angular, React, etc.

Example:

<script>
let shoppingLists = [ "Candy", "Monster Energy", "Chocolate" ]
</script>
<div>
<h3>Shopping List</h3>
<ul>
{#each shoppingLists as shoppingList}
<li>{shoppingList}</li>
{/each}
</ul>
</div>

We have an array of shopping lists in the variable. We use the to iterate over the shoppingLists array, the keyword is used to assign a single item in the array to a variable. Here every single current iteration is set to the shoppingList variable, so we use it in the HTML to render the item.

With this our DOM will render the above like this:

<div>
<h3>Shopping List</h3>
<ul>
<li>Candy</li>
<li>Monster Energy</li>
<li>Chocolate</li>
</ul>
</div>

An HTML block can be rendered by using the syntax.

Example:

<script>
let htmlContent = "<div>Rendered content</div>"
</script>
<div>
{@html htmlContent}
</div>

The variable holds the HTML string, then we use the followed with the inside the brackets. These will make Malina render the inside the div element.

It’ll look like this:

<div>
<div>Rendered content</div>
</div>

Malina.js also supports component-driven design.

Components have their own file. It has a script block, style block and the rest content become a template.

Example:

<!-- NameComponent.html --><script>
let name = "Malina demo"
</script>
<style>
h3 {
margin: 0;
}
</style>
<div>
<h3>I'm a Malina component</h3>
<div>
This is a {name}
</div>
</div>

The script block will contain the controller logic of the Component. The style block will contain the CSS styling of the Component.

We can now use the statement in the script block in an HTML file we want to use the component.

<!-- index.html --><script>
import NameComponent from "./NameComponent.html"
</script>
<div>
Malina component demo
<NameComponent />
</div>

You see how we name exported the from the . In Malina, the name of the HTML file becomes the name of the component. That is why NameComponent will be the component name of NameComponent.html.

The contents of the NameComponent will be rendered where the is placed in the index.html file. Also, its styling and controller logic will only affect the DOM rendered by the component.

For quick test or usage of Malina.js, you can use its online REPL tool at https://malinajs.github.io/repl

For more resources on Malina.js, check out its docs at:

We covered a lot here. We started from the goodies of Malinajs to how we can scaffold a Malina project using the NPM and its Malina CLI tool. Next, we saw its basic features binding(one-way to two-way), event binding, references, and how to create and use components just like any other JS framework.

No doubt Malina.js is awesome. It has a low memory footprint and it is pretty fast with a low file size bundle.

It is a library you would want to try out.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email, or DM me.

Follow me on:

Author: admin

Leave a Reply

Your email address will not be published.