When comparing Marko Widgets vs Knockout, the Slant community recommends Knockout for most people. In the question“What are the best React.js alternatives?” Knockout is ranked 10th while Marko Widgets is ranked 15th. The most important reason people chose Knockout is:
Knockout uses HTML5 data attributes to bind HTML elements to data objects in javascript. This allows more work to be done by the framework rather than requiring you to specify where data should be bound in the javascript. The data binding is very intuitive as the bindings are done within the HTML itself in the location it should be bound.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
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>
Pro Easy data binding
Knockout uses HTML5 data attributes to bind HTML elements to data objects in javascript. This allows more work to be done by the framework rather than requiring you to specify where data should be bound in the javascript. The data binding is very intuitive as the bindings are done within the HTML itself in the location it should be bound.
Pro Easy to learn
Has a low entry barrier and an easy learning curve. It's especially easy to learn for beginners.
Pro Built in templating
Bindings in Knockout can also be used to control the generated structure of the HTML. There are bindings provided to allow for iteration and conditionals. The structure of the html reflects the structure of the data so iterative elements are bound to arrays in the data model. Having the HTML structure maintained by bindings keeps the templating simple, easy to read, and maintain.
Knockout also allows for string based templating so you can use whatever templating library you prefer.
Pro Legacy browser support
Supports a large number of browsers, including IE6.
Pro Great documentation
The excellent tutorials with built-in exercises are a great learning experience, even for people without prior MVVM and data binding experience.

Pro Lightweight and plays nicely with other libraries
Pro Dynamic models help with keeping the code simple and clean
Models in Knockout can be watched to keep the page data up to date by using observable objects. The observables notify Knockout when data is changed and automatically updates the page when this happens. By having Knockout maintain this relation, it keeps the front end code cleaner and simpler, and by enforcing a consistent pattern with observables the methodology can be more robust.
Pro Very flexible
One can do a lot of things and it keeps self references and other types of loops under control.
Pro It's only a library
Knockout does one thing, and does it well. It doesn't try to take on more than one area. It does MVVM data binding and that is it.
Pro Simple manageable modules
Using components is a great way of breaking up large modules into simpler ones.
Cons
Con Slower than others when amount of objects grows
Knockout has a bad performance when the dealing with large amount of objects. You can see more here.
Con Can become complex once the application grows large
Knockout leaves the application structure to the developer and it can become quite complex and unmanageable in the hands of a beginner once the application grows large and complex.
Con Two way binding requires a little extra work
When allowing users to edit existing data, the two-way binding of observables means you'll need to have to save original values before they're edited, to make comparisons or revert if the user cancels the action.
