10 Awesome Marko Features

Marko is a friendly and super fast UI library that makes building web apps
fun! In celebration of rapidly approaching 5,000 stars on GitHub (the ultimate open source vanity metric), here are 10 features that will make you more productive in no particular order…

1. Shorthand Attributes

Tired of constantly typing out class and id attributes? No need with Marko. Simply utilize the shorthand based on CSS selectors:

2. All attribute values are Just JavaScript™

Unlike with HTML, you are not limited to string attribute values when using Marko. Attributes can have types, which makes it really easy to pass data to custom tags and it works for standard HTML tags too:

3. Isomorphic UI components made easy

Tired of boilerplate code and trouble managing component input and state? Marko makes it a breeze to develop self-contained and individually testable components. Changing state is completely synchronous, so there won’t be any headaches. You can also use inline styles making it very easy to develop small components quickly.

Do you see references to “Marko” in the snippet above? Yeah, me neither.

Is your component becoming too large? Do you prefer separating your CSS, JavaScript, and markup code? No problem. You can easily rip out your code into multiple files:

components/
  click-counter/
    component.js
    index.marko
    style.css

4. Concise syntax

The DOM is just a tree structure. Indentation is a great way to describe a DOM tree without having to worry about matching up beginning and ending tags. Marko lets you choose between a concise, indentation-based syntax, and a familiar HTML syntax:

Here’s the same thing with the concise syntax:

Can’t make up your mind or just want to paste in that code snippet from StackOverflow? HTML syntax can be used within in the concise syntax. You’ll come back and make it consistent…one day.

5. Import JavaScript modules

Do you have some helper JavaScript functions that you need to use in your views? Marko let’s you import any JavaScript module into your template using the same syntax as the JavaScript import statement without using Babel or any other build tool. No need for problematic globals (you could do that too, but please don’t or your coworkers will hate you).

6. No need to import custom tags (it’s a good thing, trust me)

Marko uses your directory structure as a method for automatically registering custom tags. This means that Marko can implicitly import tags based on where the template is located on disk. Marko will search up the directory looking for custom tags in components/directories similar to how Node.js discovers modules in node_modules/ directories.

Given the following directory structure:

components/
 fancy-button/
   index.marko
 fancy-container/
   index.marko

If fancy-button is used inside of fancy-container, it will be implicitly
imported:

7. Use JavaScript to set CSS classes and styles

Setting CSS classes and styles is made easy using JavaScript! Marko will happily accept simple strings, JavaScript objects and arrays (falsy values will be ignored).

8. Inline JavaScript Statements

Marko takes HTML and makes it more like JavaScript. You can exit out of HTML mode to embed a JavaScript statement by starting the line with a $. You can use this feature to embed JavaScript variables, functions, etc. where they are needed (take that, “separation of concerns”).

If you want to combine multiple JavaScript statements you can do that too:

9. Async rendering with the <await> tag

Node.js is asynchronous. Browsers are asynchronous. Why should rendering be synchronous? Pass your promise along to your template and Marko will asynchronously render parts of your view. Turns out, this is good for performance.

10. Server side rendering is easy

Can’t decide if you want to do server-side rendering or client-side rendering? Why are we even talking about this in 2017? It doesn’t matter. Seriously, just do both. Marko makes this a no-brainer since you can render a Marko template directly to a stream (oh, and Marko will automatically mount UI components rendered on the server when the page loads in the browser) :

Bonus: Friendly compile-time errors

We all make mistakes every now and then. Typo in your custom tag? Forgot an ending tag? No worries! Marko will give you a friendly error message and point you right to the problematic code.

You may have missed it, but it was obvious to Marko:

Unrecognized tag: fancy-buttn — More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag at line 2 col 1

Coming soon: auto correction and autonomous coding

Interested in learning more about Marko? If so, you can get additional
information on the Marko website. Join the conversation and contribute on GitHub and follow us on Twitter.

Also, don’t forget to tell your friends about Marko and star us on GitHub.

Cover image credit: Wikipedia