Why i created Mahal.js ?
I have received overall positive feedback from everyone with whom i shared about mahal.js. But most of the people asks this -
There are many javascript UI frameworks but why i created another framework ?
This question is obvious 😃.
I spent more than two years on a project and its ecosystem related project. why ?
Let me tell you about the reason -
In my experience - I found when you are starting a new project - its easier to choose any of the famous framework and start developing project. By default choose react or vue - as most of the peoples are.
but problem arises when your app starts scaling - code size increases, multiple people/team work on the project, you have timelines and all.
I collected those problems which no one is solving and have tried to solve in mahal.js. These are problems -
- Documentation
- Code scalability
- No Vdom
- Typing
1. Documentation
Documentation helps to understand the codes and most importantly it helps others who have not written the code to understand it.
As i said — its easy to start the project but when its becomes large — you are not able to remember which component does what and how that works.
Mahal.js solves this problem by providing a dedicated place in component for writing documentation. You can write documentation in yml syntax.
---
name: new_todo.mahal
description: It helps you create new task. Contains input box to input a task and a button to submit task.
events:
newTask : emits the task details when click on add.
dateCreated: April 24, 2022
---<html>
<div class="row content-center content-v-center">
<div class="column">
<div class="textbox">
<input :model(title) placeholder="Enter task title" type="text" />
</div>
<div class="textbox margin-top-20px">
<input :model(description) type="text" placeholder="Enter task description" />
</div>
</div>
<button on:click={'validate' | 'addTask' } class="btn primary btn-add">
Add
</button>
</div>
</html><script>
import { Component, reactive } from "mahal";export default class extends Component {
@reactive
title = ""; @reactive
description = ""; validate() {
if (!this.title) {
alert("Title can not be empty");
return false;
} else if (!this.description) {
alert("Description can not be empty");
return false;
}
return true;
} addTask(isValid) {
if (!isValid) {
return;
}
this.emit("newTask", {
title: this.title,
description: this.description,
});
this.title = this.description = "";
}
}
</script>
<style>
.btn-add {
height: 50px;
width: 100px;
margin-left: 25px;
}
.textbox input {
width: 100%;
}
</style>
At top of component is documentation which helps anyone to understand what this component does.
Not only this but mahal.js uses this documentation to provide file definition when you hover it.
You don’t need to go to each component, you can see documentation from outside wherever it is imported.
2. Code scalability
Code scalability means scaling of code or increasing of code lines in components.
e.g- yesterday my component A code was 50 lines, but now its 200 lines.
Now you must want to refactor it, so that at least it is readable and can be maintained.
One of the solution is to think in terms of decomposition and get a smaller component out of it - this is recommended by every framework.
But in case where product has already been created and you just need to add some more codes to add a feature or fix a bug - you won’t have time to think in terms of decomposition and refactor the code. what you can do is to just rearrange the code in multiples files may be.
Vue.js provides mixins for it but you won’t be able to navigate from one code part to another and in a bigger project this becomes a huge problem.
Mahal.js allows you to use inheritance to solve this problem. It preserve everything with inheritance. You can create multiple class and move the logic into these classes and just inherit it till parent component.
This way your codes are arranged into multiple files allowing you to read the code and typings are also solid. This allows you to navigate to different parts of code easily.
You also have the flexibility to decompose in mahal.js
3. No Vdom
Vdom allows us to push exact change required. But this does two things -
- Keep snapshot of real dom in memory
- uses algorithm called diffing to find out difference and push it in real dom.
But turns out we can achieve the same without VDom, which give us benefits of less memory and cpu both.
This was first done by Svelte. And they had released a great clarification about it — https://svelte.dev/blog/virtual-dom-is-pure-overhead
Mahal.js also works without virtual DOM and does not comprises with performance. Here is the screenshot of comparison with different famous framework
4. Typing
Typing allows you to develop things faster. Mahal.js focuses on typings and have strong typing ecosystem for everything.
it does not forces you to code in typescript but if you do - you get a lot of adavantages. You will get intillisense for almost every part in your code.
Mahal.js overall focus is to provide you smoother and cleaner development experience starting from new project to a scaling project. It cares about the phase when your app is growing and try to solve scaling problems.
I hope these articles is giving you an idea about why mahal.js was created and what problems it solves. If you like it - please clap and share with your friends.
