Cookie Consent by Free Privacy Policy Generator 📌 Mithril.js: A Modern Framework for JavaScript


✅ Mithril.js: A Modern Framework for JavaScript


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

What is Mithril.js?

Mithril.js is a modern client-side JavaScript framework for building Single Page Applications (SPAs). It is small (less than 10kb gzip), fast, and provides routing and XHR utilities out of the box. Mithril.js is used by companies like Vimeo and Nike, as well as open-source platforms like Lichess.

Comparison with other frameworks

Mithril.js shares many similarities with React. Both use virtual DOM, lifecycle methods, and key-based reconciliation. However, React is a view library, so a typical React-based application relies on third-party libraries for routing, XHR, and state management. Mithril.js, on the other hand, has built-in modules for common needs like routing and XHR.

In terms of size, Mithril.js is much smaller and faster compared to popular frameworks like React and Angular.

Creating a component

A component in Mithril.js is simply an object with a view function. Here's an example of what a component looks like in Mithril.js:

var Hello = {
    view: function() {
        return m("main", [
            m("h1", {class: "title"}, "My first application"),
            m("button", "A button"),
        ])
    }
}

m.mount(root, Hello)

This code creates a Hello component that displays a title and a button on the page.

Advantages of Mithril.js

  • Small size: Mithril.js is one of the smallest JavaScript frameworks available, with a size of only 8KB.
  • Easy to learn: Mithril.js has a simple and intuitive API that is easy to learn, even for developers who are new to JavaScript frameworks.
  • Fast performance: Mithril.js is designed to be fast and efficient, with minimal overhead and fast rendering times.
  • No build stage required: Many web pages today are not single-page applications built with Webpack.
  • Community support: Although Mithril.js has a smaller community compared to other more popular frameworks, its community is very active and offers great support.

Disadvantages of Mithril.js

  • Smaller community and limited resources: Compared to more adopted frameworks, Mithril.js has a smaller community. This may result in fewer online resources, tutorials, and community support options.
  • Less mature ecosystem: Although Mithril.js has an active community, the ecosystem around it is relatively smaller compared to other frameworks.

Routing in Mithril.js

Routing is a system that allows creating Single Page Applications (SPAs), i.e., applications that can transition from one page to another without causing a full browser refresh. Mithril.js provides a routing API that allows applications to respond to changes in the URL.

Here's an example of how routing is set up in Mithril.js:

var Home = {
    view: function() {
        return "Welcome Codú"
    }
}

m.route(document.body, "/home", {
    "/home": Home,
})

In this code, m.route is used to set up routing. The first argument is the DOM element where the application will be mounted, the second argument is the default route, and the third argument is an object that maps routes to components.

XHR in Mithril.js

XHR (XMLHttpRequest) is a method for communicating with the server. Mithril.js provides its own implementation (m.request) that facilitates XHR requests and redraws the UI after each XHR request.

Here's an example of how an XHR request is made in Mithril.js:

m.request({
    method: "GET",
    url: "https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0"
})
.then(function(result) {
    console.log(result);
})

In this code, m.request is used to make a GET request to the server. The method returns a promise that resolves with the result of the request.

Handling route parameters

Mithril.js allows handling route parameters. Route parameters are key-value pairs that can come from route interpolations (e.g., if a route is /users/:id, and resolves to /users/1, the route parameter has a key id and a value "1"), router query strings (e.g., if the route is /users?page=1), and the state object passed to the underlying history.pushState / history.replaceState call.

Here's an example of how route parameters are handled in Mithril.js:

var Article = {
    view: function(vnode) {
        return "This is article " + vnode.attrs.articleid
    }
}

m.route(document.body, {
    '/article/:articleid': Article
})

m.route.set('/article/:articleid', {articleid: 1})

In this code, m.route.set is used to set the route to /article/:articleid, where :articleid is a route parameter interpolated with the value of articleid in the parameters object.

Lifecycle methods

Components and virtual DOM nodes in Mithril.js can have lifecycle methods, also known as hooks, which are called at various points during the life of a DOM element. Lifecycle methods receive the vnode as their first argument, and have their this keyword bound to vnode.state.

The lifecycle of a DOM element typically includes creation and attachment of the element to the document, updating attributes or child nodes when a UI event is triggered and data changes, and removal of the element from the document.

Here's an example of how lifecycle methods are used in Mithril.js:

var ComponentWithHooks = {
    oninit: function(vnode) {
        console.log("initialized")
    },
    oncreate: function(vnode) {
        console.log("DOM created")
    },
    onbeforeupdate: function(newVnode, oldVnode) {
        return true
    },
    onupdate: function(vnode) {
        console.log("DOM updated")
    },
    onbeforeremove: function(vnode) {
        console.log("exit animation can start")
        return new Promise(function(resolve) {
            // call after animation completes
            resolve()
        })
    },
    onremove: function(vnode) {
        console.log("removing DOM element")
    },
    view: function(vnode) {
        return "hello"
    }
}

In this code, ComponentWithHooks is a component that has several lifecycle methods. Each lifecycle method logs a message to the console when called.

Conclusion

In summary, Mithril.js offers an efficient and lightweight alternative for client-side web development. Its small size, fast performance, and intuitive API make it appealing to both experienced developers and those just starting out in the world of JavaScript frameworks.

Official Website

You can find more information about Mithril.js on its official website.

...

✅ Mithril JS + Quasar CSS + mithril stream + UI (pages) -> real app


📈 55.97 Punkte

✅ Mithril.js: A Modern Framework for JavaScript


📈 48.57 Punkte

✅ Die Ringe der Macht: Wieso ist Mithril so bedeutend für Mittelerde? Gil-Galads Plan und das Elbenlied


📈 27.99 Punkte

✅ Der Herr der Ringe - Die Ringe der Macht: Könnte Elrond Durin für Mithril verraten?


📈 27.99 Punkte

✅ Der Herr der Ringe - Die Ringe der Macht: Könnte Elrond Durin für Mithril verraten?


📈 27.99 Punkte

✅ Die Ringe der Macht: Wieso behüten die Zwerge Mithril wie einen Schatz?


📈 27.99 Punkte

✅ Die Ringe der Macht: Wieso heilt Mithril das Elbenblatt?


📈 27.99 Punkte

✅ Ars0N-Framework - A Modern Framework For Bug Bounty Hunting


📈 20.69 Punkte

✅ niieani/bash-oo-framework: Bash Infinity is a modern boilerplate / framework / standard library for bash


📈 20.69 Punkte

✅ CVE-2022-43484 | TERASOLUNA Global Framework/Server Framework Spring Framework input validation


📈 19.91 Punkte

✅ Modern Data Security Needs a Modern Solution


📈 14.83 Punkte

✅ A Modern Cybersecurity Fight Requires a Modern Approach to Regulatory Oversight


📈 14.83 Punkte

✅ Update für Modern Warfare bestätigt Map-Klassiker aus Modern Warfare 3 & CoD 4


📈 14.83 Punkte

✅ Call of Duty: Modern Warfare – Test zum Reboot der Modern Warfare-Reihe


📈 14.83 Punkte

✅ Modern Skills for Modern CISOs: Your Questions Answered


📈 14.83 Punkte

✅ 5 Modern Skills for Modern CISOs


📈 14.83 Punkte

✅ Call of Duty ist down: Störung verursacht Feuerpause in Modern Warfare 2, Warzone 2.0 und Modern Warfare 3


📈 14.83 Punkte

✅ Modern Data Security Needs a Modern Solution


📈 14.83 Punkte

✅ Hilla: The Modern Web Framework for Java


📈 14.05 Punkte

✅ CUPS' Founder Releases PAPPL 1.0 As Modern Printer Application Framework


📈 14.05 Punkte

✅ VMware launches Modern Network framework to help businesses adapt to a new normal


📈 14.05 Punkte

✅ A Deep Dive into React JS: The Modern Framework Revolutionizing Web Development


📈 14.05 Punkte

✅ The Ultimate Guide to Laravel: A PHP Framework for Modern Web Applications


📈 14.05 Punkte

✅ Modern CSS Layouts: You Might Not Need A Framework For That


📈 14.05 Punkte

✅ Best Node.js Framework Choices for Modern App Development


📈 14.05 Punkte

✅ 🚀 Unveiling Jai.js: A Blazing Fast, JSX-Inclusive Framework for Modern Web UIs – Launching Nov 25th


📈 14.05 Punkte

✅ Havoc - Modern and malleable post-exploitation command and control framework


📈 14.05 Punkte

✅ Introducing DFlex - A Modern Javascript Drag and Drop Library


📈 13.94 Punkte











matomo

Datei nicht gefunden!