Giới thiệu Mahal.js

Apr 09 2022

Có rất nhiều framework có sẵn trên thị trường như Reactjs, Vuejs, v.v. Và chúng thật tuyệt vời nhưng hầu hết chúng đều hoạt động bằng cách sử dụng DOM ảo.

Nó có nghĩa là lưu trữ bản sao của DOM thực tế dưới dạng DOM ảo trong bộ nhớ và chạy thuật toán khác biệt cho mọi thay đổi. Điều này có nghĩa là nhiều máy tính hơn và nhiều bộ nhớ hơn.

Nó có thể tránh được nếu chúng ta có thể biết những gì cần thay đổi trong DOM thực tế mà không sử dụng DOM ảo.

Mahal.js hoạt động mà không cần DOM ảo và sử dụng phương pháp hiện đại để hiển thị mã của bạn. Nó có nguồn mở và sử dụng miễn phí.

Mahal.js là một khung giao diện người dùng javascript tương tự như reactjs và vuejs.

Tài liệu chính thức có sẵn tại -https://mahaljs.com/

Mahal.js hoạt động như thế nào?

Tương tự như tất cả các framework khác, đơn vị của mahal.js cũng là Component. Khi thành phần của bạn được thực thi - nó gắn vào khung công tác mahal và lắng nghe các thay đổi trạng thái và bất cứ khi nào trạng thái của bạn được thay đổi, nó sẽ tạo phần tử dựa trên các thay đổi và cập nhật trực tiếp vào DOM thực.

Quan trọng nhất là nó chỉ cập nhật những gì được yêu cầu. Ví dụ - nếu bạn có một bảng đang sử dụng mảng để hiển thị giá trị. Nếu bạn thêm một giá trị vào mảng của mình - nó cũng sẽ chỉ thêm một hàng vào bảng đó và không phần nào khác của DOM bị ảnh hưởng trừ khi phụ thuộc.

Tính năng tài liệu

Trong phát triển giao diện người dùng - không có tiêu chuẩn thích hợp để ghi lại thành phần của bạn và do đó chúng tôi đang gặp phải các vấn đề trong ứng dụng lớn.

Mahal.js hiểu vấn đề này và đó là lý do tại sao nó cung cấp tính năng ghi lại thành phần của bạn theo cú pháp yaml.

Đây là cách một thành phần trông giống như trong mahal.js

---
name: mahal_intro.mahal
description: Shows Welcome and important links
dateCreated: April 05, 2022
---
<html>
<div class="mahal-app">
    <img class="mahal-app_logo" :src="'mahal-logo.png' | imgPath" alt="mahal-logo" />
    <h1>Welcome to the {{appName}} App</h1>
    <div class="mahal-app_imp-links-label">
        Important Links
    </div>
    <div class="mahal-app_imp-links">
        <a :for(link in importantLinks) :href="link.path">
            {{link.label}}
        </a>
    </div>
</div>
</html>
<script>
import { Reactive, Component } from "mahal";
export default class extends Component {
    @Reactive appName = "Mahal";
importantLinks = [
        {
            label: "Core Doc",
            path: "https://ujjwalguptaofficial.github.io/mahal-doc/",
        },
        {
            label: "Examples",
            path: "https://github.com/ujjwalguptaofficial/mahal-examples",
        },
    ];
onInit() {
        console.log("component initiated");
        this.on("create", this.created);
        this.on("mount", this.mounted);
        this.on("destroy", this.destroyed);
    }
created() {
        console.log("component created");
    }
mounted() {
        console.log("component mounted - UI has been rendered");
    }
destroyed() {
        console.log("component destroyed - Let's unsubscribe to events");
    }
}
</script>
<style lang="scss">
.mahal-app {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.mahal-app_logo {
    width: 200px;
}
.mahal-app_imp-links-label {
    font-size: 18px;
}
.mahal-app_imp-links {
    max-width: 300px;
    font-size: 20px;
    padding: 20px;
    a {
        color: #ffb431;
        margin-left: 15px;
    }
}
</style>

Mục đích của mahal.js là gì?

Mục đích của mahal.js là giúp phát triển giao diện người dùng dễ dàng hơn bằng cách sử dụng đặc tả tập lệnh ecma mới nhất. Vì vậy, ứng dụng lớn hơn đó có thể được phát triển và duy trì bằng tài liệu, mã hóa sạch.

Tôi có thể hưởng lợi như thế nào?

Có rất nhiều cơ hội ngay bây giờ, vì đó là một khuôn khổ mới. Bạn có thể tạo các thư viện và plugin khác nhau và hưởng lợi từ nó theo cách cá nhân hoặc chuyên nghiệp.

Bạn có thể liên hệ với Ujjwal Gupta (người tạo ra mahal.js) để được trợ giúp và hướng dẫn.

Yêu cầu 🙏

Tôi yêu cầu bạn giúp tôi truyền bá. Bạn có thể làm như vậy bằng cách chia sẻ trên mạng xã hội, nói chuyện với bạn bè, tạo ứng dụng bằng mahal.js.