-<!doctype html><html lang=en><head><meta charset=UTF-8><title>Marko</title><link rel=icon type=image/png sizes=32x32 href=/assets/64c1e059.png><meta name=viewport content="width=device-width, initial-scale=1"><meta name=Description content="Marko is a friendly (and fast!) UI library that makes building web apps fun."><script src="/assets/211.6b63e88c.js" async></script><script src="/assets/616.a8b84c3a.js" async></script><link rel="stylesheet" href="/assets/c4742120.css"></head><body class=docs><!--M#s0-0-0-8--><header data-marko-key="@header s0-0-0-8" class=site-header><div class=content><a href=/ ><img src=/assets/91bc26e5.svg alt="Marko Home" class=site-logo></a><div class=stuff><nav class=site-menu><a href=/docs/getting-started/ >Docs</a><a href=/try-online>Try Online</a><a href=https://github.com/marko-js/marko>GitHub</a><!--M^s0-0-0-8-8 s0-0-0-8 8--><form data-marko='{"onclick":"focus s0-0-0-8-8 false","onsubmit":"search s0-0-0-8-8 false"}' class="site-search search"><img src=/assets/e213de74.png alt><input data-marko='{"onblur":"shrink s0-0-0-8-8 false","onfocus":"grow s0-0-0-8-8 false"}' data-marko-key="@input s0-0-0-8-8" type=search placeholder="search the docs..."></form><!--M/--></nav><button data-marko='{"onclick":"toggleMenu s0-0-0-8 false"}' class=menu>☰</button></div></div></header><!--M/--><!--M#s0-0-0-9--><div data-marko-key="@sidebar s0-0-0-9" class=doc-sidebar><button data-marko='{"onclick":"hide s0-0-0-9 false"}' class=close>✕</button><h1>Marko <!--M^s0-0-0-9-9 s0-0-0-9 9--><select data-marko='{"onchange":"switchVersion s0-0-0-9-9 false"}'><option value=current selected>5.1.18</option><option value=http://marko-v4.github.io/docs/ >4.x</option><option value=http://v3.markojs.com/docs/ >3.x</option><option value=http://marko-v2.github.io/docs/ >2.x</option></select><!--M/--></h1><!--M^s0-0-0-9-10 s0-0-0-9 10--><form data-marko='{"onclick":"focus s0-0-0-9-10 false","onsubmit":"search s0-0-0-9-10 false"}' class="site-search search"><img src=/assets/e213de74.png alt><input data-marko='{"onblur":"shrink s0-0-0-9-10 false","onfocus":"grow s0-0-0-9-10 false"}' data-marko-key="@input s0-0-0-9-10" type=search placeholder="search the docs..."></form><!--M/--><ul class=toc-level0><li class=section><a href=/docs/guides-overview/ >GUIDES</a></li><li><a href=/docs/installing/ >Installing</a></li><li><a href=/docs/getting-started/ >Getting started</a></li><li><a href=/docs/conditionals-and-lists/ >Conditionals and lists</a></li><li><a href=/docs/custom-tags/ >Custom tags</a></li><li><a href=/docs/state/ >State</a></li><li><a href=/docs/styles/ >Styles</a></li><li><a href=/docs/events/ >Events</a></li><li><a href=/docs/body-content/ >Body content</a></li><li><a href=/docs/marko-5-upgrade/ >Marko 5 upgrade</a></li></ul><ul class=toc-level0><li class=section><a href=/docs/tutorials-overview/ >TUTORIALS</a></li><li><a href=/docs/color-picker/ >Color Picker</a></li></ul><ul class=toc-level0><li class=section><a href=/docs/reference-overview/ >REFERENCE</a></li><li><a href=/docs/rendering/ >Rendering</a></li><li><a href=/docs/syntax/ >Syntax</a></li><li><a href=/docs/core-tags/ >Core tags</a></li><li><a href=/docs/class-components/ >Class components</a></li><li><a href=/docs/marko-json/ >marko.json</a></li><li><a href=/docs/compiler/ >Compiler</a></li></ul><ul class=toc-level0><li class=section><a href=/docs/bundler-integrations-overview/ >BUNDLER INTEGRATIONS</a></li><li><a href=/docs/webpack/ >Webpack</a></li><li><a href=/docs/rollup/ >Rollup</a></li><li><a href=/docs/lasso/ >Lasso</a></li></ul><ul class=toc-level0><li class=section><a href=/docs/server-integrations-overview/ >SERVER INTEGRATIONS</a></li><li><a href=/docs/express/ >Express</a></li><li><a href=/docs/koa/ >Koa</a></li><li><a href=/docs/http/ >HTTP</a></li><li><a href=/docs/fastify/ >Fastify</a></li></ul><ul class=toc-level0><li class=section><a href=/docs/tooling-overview/ >TOOLING</a></li><li><a href=/docs/editor-plugins/ >Editor plugins</a></li></ul><ul class=toc-level0><li class=section><a href=/docs/articles-overview/ >ARTICLES</a></li><li><a href=/docs/marko-vs-react/ >Marko vs React</a></li><li><a href=/docs/why-is-marko-fast/ >Why is Marko Fast</a></li><li><a class=selected href=/docs/10-awesome-marko-features/ >10 Awesome Marko Features</a><ul class="toc toc-level1"><li><ul class="toc toc-level2"><li><ul class="toc toc-level3"><li><a href="#1-shorthand-attributes">1. Shorthand Attributes</a></li><li><a href="#2-all-attribute-values-are-just-javascript">2. All attribute values are Just JavaScript™</a></li><li><a href="#3-isomorphic-ui-components-made-easy">3. Isomorphic UI components made easy</a></li><li><a href="#4-concise-syntax">4. Concise syntax</a></li><li><a href="#5-import-javascript-modules">5. Import JavaScript modules</a></li><li><a href="#6-no-need-to-import-custom-tags-its-a-good-thing-trust-me">6. No need to import custom tags</a></li><li><a href="#7-use-javascript-to-set-css-classes-and-styles">7. Use JavaScript to set CSS classes and styles</a></li><li><a href="#8-inline-javascript-statements">8. Inline JavaScript Statements</a></li><li><a href="#9-async-rendering-with-the-await-tag">9. Async rendering with the <await> tag</a></li><li><a href="#10-server-side-rendering-is-easy">10. Server side rendering is easy</a></li><li><a href="#bonus-friendly-compile-time-errors">Bonus: Friendly compile-time errors</a></li></ul></li></ul></li></ul></li></ul></div><!--M/--><main class=content><div class=doc-layout><div class=doc-container><div class=doc-content><a href=#><img src=https://cdn-images-1.medium.com/max/1000/1*Cmy6UutD5-ogL8dr1DySMQ.png alt="Marko logo" width=100%></a><br><blockquote class=null><p>This article was published in August 2017. You can find the original <a href=https://medium.com/@austinkelleher/10-awesome-marko-features-afba9d094d42>"10 Awesome Marko Features" article here</a>!</p></blockquote><h1 id=10-awesome-marko-features><a name=10-awesome-marko-features class=anchor href=#10-awesome-marko-features><span class=header-link></span></a>10 Awesome Marko Features</h1><p><a href=/ >Marko</a> is a friendly and super fast UI library that makes building web apps<br> fun! In celebration of rapidly approaching <a href=https://github.com/marko-js/marko>5,000 stars on GitHub</a> (the ultimate open source vanity metric), here are 10 features that will make you more productive in no particular order...</p><h4 id=1-shorthand-attributes><a name=1-shorthand-attributes class=anchor href=#1-shorthand-attributes><span class=header-link></span></a>1. Shorthand Attributes</h4><p>Tired of constantly typing out <code>class</code> and <code>id</code> attributes? No need with Marko. Simply utilize the shorthand based on CSS selectors:</p><script>if(localStorage.getItem('markojs-website:syntax') === 'concise'){document.body.classList.add('concise')}</script><!--M#s0-0-0-11-4-20--><!--M^s0-0-0-11-4-20-0 s0-0-0-11-4-20 0--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-0-0-11-4-20-0 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF;font-style:italic>style</span> {
0 commit comments