Unlock the Power of Malina.js: A Frontend Compiler Inspired by Svelte
Malina.js is a revolutionary frontend compiler that compiles your web application to JavaScript, eliminating the need for a framework on the frontend side. In this article, we’ll dive into the world of Malina.js, exploring its syntax, features, and capabilities. To get the most out of this article, you should have a basic understanding of HTML, CSS, JavaScript, and npm.
Bindings: The Backbone of Malina.js
Bindings are the mechanisms used to pass data from parent components to child components. They also enable you to bind data to properties and values. Malina.js offers two types of bindings: one-way binding and two-way binding.
One-Way Binding
In one-way binding, information flows in only one direction, typically from a data source to the control. This means that data is read-only in one-way bindings. For instance:
<input name={name}>
Here, name in the input tag is the attribute, and {name} is the value bound to it. To reduce code repetition, the input can be rewritten as `
Two-Way Binding
In two-way bindings, data flows in both directions: from the data source to the control, and from the control to the data source. This is particularly useful when setting up forms. For example:
<input name={name} on:input={(e) => name = e.target.value}>
Here, the name value is filled when a user types in a value in the text box.
Styling in Malina.js
Styling in Malina.js can be done by creating separate stylesheet files or styling directly in the HTML files using inline styles. To perform inline styling, you can use either class binding or style binding.
Class Binding
Class binding is used to set a class value depending on a condition passed to it. For the class value to be set, class names must be defined in the <style></style> tag.
Style Binding
Style binding is used to set a style value. This is more convenient when performing inline operations.
Events: The Lifeblood of Malina.js
Events are essential components in building applications, especially on the frontend. Malina.js listens to events via either on:eventName={handler} or @eventName={handler}. The eventName can be click, hover, etc., and you can define inline event functions.
Fragments: Reusable Code Blocks
Fragments in Malina.js serve as reusable code blocks. For instance:
<Button>Click me!</Button>
Here, you have a defined button fragment that allows you to declare the value of the button when defining it, like a prop. The fragment above reduces the stress of having to style the button again.
Components: The Building Blocks of Malina.js
Components are essential in Malina.js, as they help reduce repetition. In Malina.js, components are defined by exporting a value in the script tag from the component file in HTML. The components are also imported to use in another file by the traditional ES6 style.
Building a Malina.js Application
In this section, we’ll build a simple application to keep track of plans you intend to carry out. We’ll start by scaffolding a starter application using the create-malina-app tool:
$ npx create-malina-app my-app
The tool takes care of the scaffolding and post-installation process. Once the installation process is complete, run the application:
$ npm start
This loads up a webpage at http://localhost:7000.
Building the Components
We’ll create three components: Header, Plans, and Plan. Create a new folder in src named components, and add the three aforementioned files to it.
Header Component
The Header component is a simple component that displays the application’s name:
<h1>My Plans App</h1>
Plans Component
The Plans component is responsible for listing your plans. You’ll also be able to add new plans in this component. Start by adding dummy plans in your script tag:
const plans = [{ title: 'Plan 1', description: 'This is plan 1' }, { title: 'Plan 2', description: 'This is plan 2' }]
Iterate over the list of plans and render them:
{#each plans as plan} <Plan title={plan.title} description={plan.description} /> {/each}
In Malina, iterating through lists is done with the {#each}..{/each} tag.
Plan Component
The Plan component is a helper component that takes two prop values: title and description. Begin by exporting the props:
export let title, description
Next, write the component body:
<div class="box"> <b>{title}</b> <p>{description}</p> </div>
The plan is rendered under a class box.
Adding Features
Let’s add some extra features to our application. We’ll add a toggle description visibility feature and an add new plan feature.
Toggle Description Visibility
This feature will enable you to hide and show the plan description. It’s also a nice feature to solidify the concepts you learned earlier about events.
Adding New Plans
The next feature we’ll be adding is a section for adding new plans. In your Plans component, define a function addPlan in your script tag:
function addPlan() { plans.push({ title, description }); }
Next, type the code below after the main tag in the same file:
<form> <input type="text" bind:value={title}> <input type="text" bind:value={description}> <button on:click={addPlan}>Add Plan</button> </form>
That wraps up the basic application we’re building!
Take Your Frontend Development to the Next Level
Malina.js is a powerful frontend compiler that can help you build fast, scalable, and maintainable applications. With its unique syntax and features, you can create complex applications with ease. Whether you’re building a simple todo list app or a complex enterprise-level application, Malina.js has got you covered. So, what are you waiting for? Start building your next application with Malina.js today!