Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to Safari
SpecsUpdate
Pros
Pro Marko Widgets supports both server-side and client-side rendering
Marko Widgets uses a very efficient mechanism to bind behavior to UI components rendered on the server and in the browser.
Pro Marko Widgets uses a concise and clean HTML-based templating language for the view
Marko is a templating engine that supports a very clean HTML syntax. The Marko v3 syntax is shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marko Templating Engine</title>
</head>
<body>
<!-- Welcome to Marko! -->
<h1>
Hello ${data.name}!
</h1>
<ul if(notEmpty(data.colors))>
<li for(color in data.colors)>
${color}
</li>
</ul>
<div else>
No colors!
</div>
</body>
</html>Marko also supports a concise syntax. The following template is equivalent to the above template.
<!DOCTYPE html>
html lang="en"
head
title - Marko Templating Engine
body
// Welcome to Marko!
h1 - Hello ${data.name}!
ul if(notEmpty(data.colors))
li for(color in data.colors)
${color}
div else
- No colors!Pro Marko Widgets has been shown to be 10x faster than React on the server
In a benchmark for a real world search results app, Marko Widgets was shown to be 10x faster than React when rendering the same page on the server. Both pages were built using a very similar UI component-based architecture.
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 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 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.
Cons
Recommendations
Comments
See Product Page for "Marko Widgets"