When comparing Mithril vs Marko Widgets, the Slant community recommends Mithril for most people. In the question“What are the best React.js alternatives?” Mithril is ranked 8th while Marko Widgets is ranked 15th. The most important reason people chose Mithril is:
Most other frameworks either offer a huge API to deal with model and view synchronization, or defer to other libraries & plugins to cater for relatively simple use cases. Mithril's API is tiny but complete. The natural reaction is to assume something is missing, but as you build you realise you incredibly fast, powerful and rich applications can be built using nothing but Mithril.
Specs
Ranked in these QuestionsQuestion Ranking
Pros

Pro Small, easy to learn API
Most other frameworks either offer a huge API to deal with model and view synchronization, or defer to other libraries & plugins to cater for relatively simple use cases. Mithril's API is tiny but complete. The natural reaction is to assume something is missing, but as you build you realise you incredibly fast, powerful and rich applications can be built using nothing but Mithril.

Pro Fast rendering
Mithril's loading times are very fast. This is because it's templates are compiled first and then served to the browser and because it uses a virtual DOM. The virtual DOM is a virtual tree containing all the nodes of the real DOM, every time anything changes in the virtual DOM, Mithril does not re-render the entire (real) DOM, instead it just searches and applies the differences.

Pro No need to learn another syntax to write views
Most MVC frameworks use HTML templates to render their views. They are good and useful because they are easy to read and understand. But they add more complication to an app because it's practically a new language and syntax that needs to be learned.
Mithril argues that separating markup from logic is just a separation of technologies and not concerns, so you can write Mithril views in JavaScript. Writing them in JavaScript also makes it easier to debug them (HTML templates can't be debugged).

Pro Familiar to people used to MVC
Doesn't lock you into any complicated conventions or structures, only one function is required to create either a Controller or a View. You're free to implement your architecture exactly as you want, so you can focus on the purpose of MVC, making connections between computer data and stuff in the end user's head.

Pro Small size
Weights just 8Kb gzipped and has no dependencies. A reactive stream module can be added for one extra Kb.
Pro Great documentation
Mithril has a large and expansive documentation despite it's relatively small API. Mithril's GitHub repo has more documentation than actual source code. None of that documentation is auto-generated
Pro Allows a smooth transition from other UI frameworks
One thing you need to start using Mithril is just a DOM node. With Mithril a developer is able to introduce the library step by step.
Pro Allows you to choose which JavaScript libraries to integrate in your project
Mithril gives to the developer the flexibility to chose the best JavaScript library to use for a specific task.
A huge framework like Angular instead forces you to use their API, which does not necessarily evolve as fast as the JavaScript ecosystem. Therefore you may end up in case when you are stuck using an API which is just not the best in terms of performance
Pro Can be used without build systems
It's plain old JavaScript, can be used without webpack, gulp or grunt, just include it into your HTML and start writing your app.
Pro Does not force you into a predefined structure
Mithril's API is pretty small compared to other frameworks. It forces developers to solve problems in JavaScript rather than in Mithril. Other frameworks with massive APIs force you to think in a way that suits the framework. Mithril doesn't do that.
Pro Very fast on the server
Using Marko and Marko Widgets to render UI components on the server was shown to be 10x faster than React. A benchmark application was built using both Marko+Marko Widgets and React and the results of rendering a page of 100 search results on the server was measured and compared. Both the Marko Widgets code and the React code used a very similar UI components-based appraoch.
Pro Stateful UI components
Marko Widgets supports stateful UI components. Marko Widgets will automatically rerender a UI component if its internal state changes. A UI component's state is stored in the this.state
property that is a vanilla JavaScript object. All changes to the state should go through the this.setState(name, value)
method (or this.replaceState(newState)
)
Pro Very fast in the browser
Marko Widgets utilizes the morphdom module for updating the DOM and that module was shown to be very competitive with React and virtual-dom.
Pro The real DOM is the source of truth
Marko Widgets does not rely on a virtual DOM abstraction. Instead, the real DOM is always the source of truth. When updating the DOM, the newly rendered DOM is compared with the real DOM.
Pro DOM diffing/patching
Marko Widgets updates the DOM using a DOM diffing/patching algorithm to minimize the number of changes to the DOM when rerendering a UI component due to state changes. The DOM diffing/patching is handled by the independent morphdom library.
Pro Simple JavaScript API for rendering a UI component
The following code illustrates how the render(input)
method exported by a UI component's JavaScript module can be used to render a UI component and insert the resulting HTML into the DOM:
require('./app-hello')
.render({
name: 'John'
})
.appendTo(document.body)
Pro Batched updates
Updates to the DOM are deferred until all state changes have completed for the current tick. That is, changing a widget's state will not cause the UI component's DOM to immediately be updated.
Pro Declarative eventing binding
Marko Widgets offers a simple mechanism for declaratively binding DOM event and custom event listeners to widget handler methods. For example:
<button type="button" w-onClick="handleClick">
Click Me
</button>
And then in the JavaScript:
module.exports = require('marko-widgets').defineComponent({
// ...
handleClick: function(event, el) {
this.doSomething();
}
});
Pro Marko templating engine for the view
Marko is a fast and lightweight, general purpose HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. Marko is used for rendering UI components and Marko Widgets is used to bind client-side behavior to rendered UI components. Marko can be used independently of Marko Widgets and this makes it suitable in all situations where HTML rendering is needed.
Pro Efficient binding of behavior for UI components rendered on the server.
When utilizing server-side rendering of a UI, Marko Widgets does not require that the UI be rerendered again in the browser just to bind behavior. Instead, extra information is passed down from the server to the client to allow Marko Widgets to efficiently bind widgets to UI components rendered on the server.
Pro Lightweight (~10 KB gzipped)
The runtime for Marko Widgets is extremely small. The runtime is very small and this makes Marko Widgets much simpler and easier to understand and debug. Marko Widgets offloads much of the work and complexity to compile time code so that the work required at runtime is minimal.
Pro Easily reference nested DOM elements and nested widgets
Marko Widgets supports the concept of "scoped" IDs. With scoped IDs, a nested DOM element or nested widget can be given an ID that is unique within the scope of the containing widget. At runtime the actual ID will be the scoped ID prefixed with the ID of the parent widget. A reference nested widget can be obtained using the this.getWidget(scopedId)
method and a reference to a nested DOM element can be obtained using the this.getEl(scopedId)
method.
For example:
<div class="my-app" w-bind>
<button type="button" w-onClick="handleButtonClick">
Click Me
</button>
<alert-overlay visible="false" w-id="alert">
This is a test alert.
</alert-overlay>
<div w-id="clickMessage" style="display: none;">
You clicked the button!
</div>
</div>
And then in the JavaScript code:
module.exports = require('marko-widgets').defineComponent({
// ...
handleButtonClick: function(event, el) {
var alertWidget = this.getWidget('alert');
// Call the `show()` function implemented by the alert widget:
alertWidget.show();
var clickMessageEl = this.getEl('clickMessage');
clickMessageEl.style.display = 'block';
}
});
Pro Efficient event delegation
Marko Widgets supports efficient event delegation to avoid attaching DOM event listeners to each DOM node. Instead, Marko Widgets attaches event listeners on the document.body
event for events that bubble. Events captured at the root are efficiently delegated out to widgets.
Pro UI components can be embedded in a Marko template using a custom tag
The following code illustrates how a UI component can be embedded in a Marko template:
<div>
<app-hello name="Frank"/>
</div>
Cons
Con Small API can make it unsuitable for larger more complex projects
Mithril's small API and small number of functions while helpful for small projects and applications where speed is needed, can add another layer of complexity in larger more complex applications where a more extensive API is needed out of the box.
