Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to SafariWhen comparing Marko vs Angular, the Slant community recommends Angular for most people. In the question“What are the best client-side JavaScript MV* frameworks?” Angular is ranked 9th while Marko is ranked 17th. The most important reason people chose Angular is:
Angular uses the existing HTML structure and builds on top of it instead of requiring you to learn a new templating language. Because it's just vanilla HTML, it is more familiar, and easier for beginners to learn. Directives let Angular know which HTML elements are under its control, and how to use them. Being directly on the HTML it's more transparent what's going on, and it's possible to get a good idea of what the page is doing just by looking at the template. Also, it makes embedding possible, as you could have an angular app within an existing site so you don't have to rewrite everything at once.
Question Ranking
Pros
Pro Extremely fast
Marko consistently outperforms other alternatives in code benchmarks, both on rendering speed and compilation time.
Pro Custom tags
Custom tags provide a simple mechanism for embedding more complex components into a template by extending the HTML grammar with support for new tags. For example:
<div>
<say-hello name="World"/>
</div>Custom tags are easy to create since they just map to a JavaScript "renderer" function as shown below:
module.exports = function sayHelloRenderer(input, out) {
out.write('Hello ' + input.name + '!');
}Custom tags support nested content:
<fancy-overlay title="My Title">
This will be the body content of the overlay
</fancy-overlay>Custom tags can also have parent/child relationships to support more complex use cases such a "tabs" component with nested "tab" components:
<fancy-tabs>
<fancy-tabs:tab label="Home">
Content for Home
</fancy-tabs:tab>
<fancy-tabs:tab label="Profile">
Content for Profile
</fancy-tabs:tab>
<fancy-tabs:tab label="Messages">
Content for Messages
</fancy-tabs:tab>
</fancy-tabs>Pro Streaming
Streaming allows progressive HTML rendering and reduces time to first byte.
Pro Server-side rendering
Marko supports both server-side and client-side rendering.
Pro Marko Widgets
Marko Widgets allows UI components (rendering + behavior) to be built using Marko.
Pro Compiled templates are readable CommonJS modules
Avoids ugly globals and "named" templates.
var template = require('./template.marko');
var html = template.renderSync({name: 'Frank'});Pro Asynchronous rendering
Marko makes additional asynchronous calls after the view rendering has begun.
Pro Lightweight runtime (~4 KB gzip)
Pro Easy to integrate with express.js
Easy Integration with Express and Node
Pro Documentation is well maintained and helpful
The documentation is extensive and very helpful. It also contains several sample applications which are very useful.
Pro Allows JavaScript expressions
JavaScript expressions can be executed inside the templates.
Pro Simple and readable syntax
Marko has a HTML-like syntax which should be easy to read and understand for everyone who has even minimal experience in web development.
Pro Short learning curve
It is easy to get up to speed and understand what is going on in a very short period of time.
Pro Small compiled templates
Marko's compiled templates are usually very small, as proven by benchmarks.
Pro Lots of tests
To prevent regressions, Marko includes a full suite of tests. The testing harness renders a collection of templates and does an exact string comparison to make sure that the tests rendered exactly as expected. There are also API tests, and negative tests to make sure that errors are reported in a friendly way.
To run tests:
git clone https://github.com/marko-js/marko
cd marko
npm install
npm test
Pro Friendly compile-time error messages
Error messages come in an easy to read and friendly format, with valid stack traces and file formats of the file(s) which brought the error(s).
Pro Concise and Mixed syntax
The Concise syntax type lets you write Marko with a Jade-like indentation based syntax, and the Mixed mode lets you combine in regular HTML-style syntax.
Pro Server and client logic can easily be expressed within the same template
Pro Has a very active and interactive community
Marko's development community is rather small compared to other frameworks but community is well mannered and active. You can chat with the core development team using gitter.im
Pro Support for a composable component oriented architecture with directives
Angular uses the existing HTML structure and builds on top of it instead of requiring you to learn a new templating language. Because it's just vanilla HTML, it is more familiar, and easier for beginners to learn. Directives let Angular know which HTML elements are under its control, and how to use them.
Being directly on the HTML it's more transparent what's going on, and it's possible to get a good idea of what the page is doing just by looking at the template.
Also, it makes embedding possible, as you could have an angular app within an existing site so you don't have to rewrite everything at once.
Pro Provides dependency injection
With dependency injection, you can load in extra javascript and new functionality just when you need it.
This is particularly helpful with testing as you can swap out services for test services.
It also means in single page apps you can load dependencies only as you need them instead of loading them up all up at the start.
Pro Easy and straightforward data-binding
Data bindings are done on the DOM, which allows you to easily sync data between various parts of the DOM in a very succint matter.
<body ng-app>
<span>Insert your name:</span>
<input type="text" ng-model="user.name" />
<h3>Echo: {{user.name}}</h3>
</body>This snippet shows how the model attribute "name" is easily bound across different parts of the DOM without having to set up any extra boilerplate.
Pro Huge ecosystem of third party components
Angular is an extremely popular JavaScript framework. Because of this, developers have developed a myriad of components which can be downloaded and integrated into any Angular application.
Pro Huge community that is quickly growing
Angular has the largest community out of all Javascript MV* frameworks and there are a lot of tutorials and guides out there for new and old users alike.
Pro All best practices
Cons
Con If you want to get the full experience you have to use NodeJS
To use markojs's most popular feature: SSR although you can use any language based server as a backend. It is rather complicated.
Con Very opinionated and not customizable enough
Some custom use cases are not possible. For example, trying to build an AMP page using Marko can be very challenging (special style tag requirements are hard to work with, also, Marko by default inserts a script tag into the rendered output html which is invalid in AMP and needs to be manually removed, etc..)
Con Steep learning curve
Angular isn't a simple framework, and because much of the magic goes on behind the scenes, it isn't easy to go from simply using the framework to being able to actually change how it works and extend it.
Con It is almost mandatory to use Typescript
Although ES standard can be used, most of the documentation and resources are with Typescript.
Con HTML template does not comply to standards
Attributes are case-sensitive, which is against the HTML standards.
Con Difficult to use for isomorphic apps that render the initial template on the server in a performant way. Non issue for enterprise apps.
Con Explicit configuration
Users will usually need to specify stuff that is very obvious (template location, providers etc. ).
Con Two-way data binding is often considered an anti-pattern
Two-way data-binding means that a HTML element in the view and an Angular model are binded, and when one of them is changed so is the other. One-way data-binding for example does not change the model when the HTML element is changed.
This is a rather controversial subject and many developers consider two-way data binding an anti-pattern and something that is useless in complex applications because it's very easy to create complex situations by using it and being unable to debug them easily or understand what's happening by just looking at the code.
