Mikado

<h1><img src="https://cdn.jsdelivr.net/gh/nextapps-de/mikado@master/doc/mikado-animated.svg?v=3" alt="Mikado - Webs fastest templating engine" width="550px"><p></p></h1> <h3>Mikado is the webs fastest template engine for building user interfaces. Carefully crafted to get the most out of the browser. Also providing the fastest Express Render Engine of today. Super-lightweight, outstanding performance, no dependencies.</h3>

<a target="_blank" href="https://www.npmjs.com/package/mikado"><img src="https://img.shields.io/npm/v/mikado.svg"></a> <img src="https://img.shields.io/badge/build-passing-brightgreen"> <img src="https://img.shields.io/badge/coverage-90%25-brightgreen"> <img src="https://img.shields.io/badge/typed-93%25-brightgreen"> <a target="_blank" href="https://github.com/nextapps-de/mikado/issues"><img src="https://img.shields.io/github/issues/nextapps-de/mikado.svg"></a> <a target="_blank" href="https://github.com/nextapps-de/mikado/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/mikado.svg"></a>

<a href="#get-started">Getting Started</a>  •  <a href="#options">Options</a>  •  <a href="#api">API</a>  •  <a href="#benchmark">Benchmark</a>  •  <a href="#compiler">Template Compiler</a>  •  <a href="#ssr">Server-Side-Rendering</a>  •  <a href="#express">Express Render Engine</a>  •  <a href="#proxy">Reactive</a>  •  <a href="#hydration">Hydration</a>  •  <a href="#shadow">Web Components (Shadow DOM)</a>  •  <a href="CHANGELOG.md">Changelog</a>

When you are coming from any previous version: <a href="doc/migrate-0.8.md">Migration Guide 0.8.x</a>

Benchmark:

• <a href="#benchmark">Stress Test Benchmark</a>
• https://krausest.github.io/js-framework-benchmark/current.html

Demo:

• TodoMVC App: <a href="examples/todomvc/">Project</a> / <a href="examples/todomvc/src/">Source</a> / <a href="https://raw.githack.com/nextapps-de/mikado/master/examples/todomvc/dist/index.html">Demo</a>

<!-- 1. <a href="demo/basic/basic.html">Basic Example + Runtime Compiler (HTML5 Template)</a> 2. <a href="demo/basic/compiler.html">Basic Example + Runtime Compiler (String Template)</a> 3. <a href="demo/basic/demo.html">Basic Example + Events (ES5)</a> 4. <a href="demo/basic/demo.es6.html">Basic Example + Events (ES6 Modules)</a> 5. <a href="demo/basic/demo.dev.html">Basic Example + Events (Development Sources)</a> 6. TodoMVC App: <a href="demo/todomvc/">Source Code</a>&ensp;/&ensp;<a href="https://raw.githack.com/nextapps-de/mikado/master/demo/todomvc/index.html">Run Demo</a> 7. js-framework-benchmark: <a href="https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/mikado">keyed</a>&ensp;/&ensp;<a href="https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/non-keyed/mikado">non-keyed</a>&ensp;/&ensp;<a href="https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/mikado-proxy">keyed (proxy)</a> -->

Support this Project

Mikado was getting so much positive feedback and also feature requests. Help keeping Mikado active by a personal donation.

<a href="https://opencollective.com/mikado/donate" target="_blank" style="margin-right: 10px"><img src="doc/opencollective.png" height="32" alt="Donate using Open Collective"></a> <a href="https://github.com/sponsors/ts-thomas/" target="_blank" style="margin-right: 10px"><img src="doc/github-sponsors.png" height="32" alt="Donate using Github Sponsors"></a> <a href="https://liberapay.com/ts-thomas/donate" target="_blank" style="margin-right: 10px"><img src="doc/liberapay.svg" height="32" alt="Donate using Liberapay"></a> <a href="https://www.patreon.com/user?u=96245532" target="_blank" style="margin-right: 10px"><img src="doc/patron.png" height="32" alt="Donate using Patreon"></a> <a href="https://salt.bountysource.com/teams/ts-thomas" target="_blank" style="margin-right: 10px"><img src="doc/bountysource.svg" height="32" alt="Donate using Bountysource"></a> <a href="https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW" target="_blank"><img src="doc/paypal.png" height="32" alt="Donate using PayPal"></a>

Table of contents

Rendering has great impact on application performance, especially on mobile devices. Mikado takes <a href="#benchmark">templating performance</a> to a new level and provides you keyed, non-keyed recycling and also reactive paradigm switchable out of the box. Additionally, Mikado provides a server-side-rendering approach on a top-notch performance level along full support for hydration to inject templates progressively within the client's runtime. Server and client are sharing the same template definitions simply written in HTML-like markup. The server side approach will also come with the fastest middleware render engine for Express you can get today. Packed with a smart routing feature for event delegation and full support for web components by using the Shadow DOM, Mikado gives you everything you'll need to build <a href="#concept">realtime applications</a> on a cutting edge performance level.

1. <a href="#get-latest">Get Latest</a>
2. <a href="#feature-comparison">Feature Comparison: Mikado Light</a>
3. <a href="#benchmark">Benchmark Ranking (Rendering Performance)</a>
4. <a href="#api">API Overview</a>
5. <a href="#options">Mikado Options</a>
6. <a href="#get-started">Getting Started (Basic Example)</a>
7. <a href="#conventions">Rules and Conventions</a>
8. <a href="#advanced_example">Advanced Example</a>
9. <a href="#compiler">Template Compiler</a>
   • <a href="#identifier">Reserved Keywords</a>
   • <a href="#compiler-flags">Compiler Flags</a>
   • <a href="#auto-naming">Auto Naming</a>
   • <a href="#prebuilt-cache">Prebuilt Cache</a>
   • <a href="#watcher">Watcher (Auto-Compile)</a>
   • <a href="#runtime-compiler">Runtime Compiler</a>
10. <a href="#expressions">Template Expressions</a>
    • <a href="#insertion">Value Insertion</a>
    • <a href="#inline-js">JS Inline Code</a>
    • <a href="#truthy">Truthy Values</a>
    • <a href="#escape-ssr">Escape Values (SSR)</a>
    • <a href="#html">HTML Contents</a>
    • <a href="#sanitize">Sanitizer</a>
    • <a href="#bindings">Reactive Bindings</a>
11. <a href="#event">Routing & Event Delegation</a>
    • <a href="#bubbling">Event Bubbling</a>
    • <a href="#event-cache">Event Cache</a>
    • <a href="#view.listen">Explicit Register Event Delegation</a>
    • <a href="#event-control">Control Native Events</a>
    • <a href="#view.dispatch">Dispatch Routes</a>
12. Recycling Modes:
    • <a href="#non-keyed">Non-Keyed Recycling</a>
    • <a href="#keyed">Keyed Recycling</a>
13. Views:
    • <a href="#mikado.new">Create Views</a>
    • <a href="#view.mount">Mount Views</a>
    • <a href="#view.destroy">Destroy Views</a>
    • <a href="#view.render">Render Templates</a>
    • <a href="#view.create">Create Components</a>
    • <a href="#modify-views">Modify Views</a>
    • <a href="#helpers">Common View Helpers</a>
    • <a href="#manipulate">Manipulate Views</a>
14. <a href="#cache">DOM State Caching</a>
    • <a href="#cache-concept">State Caching Concept</a>
    • <a href="#cache-helpers">DOM Cache Helpers</a>
15. <a href="#view.state">View State</a>
16. <a href="#callbacks">Custom Callbacks</a>
17. <a href="#static">Static Templates</a>
    • <a href="#mikado.once">Once (One-time rendering)</a>
18. <a href="#ssr">Server-Side Rendering (SSR)</a>
    • <a href="#ssr-exclusive">SSR-exclusive Mode</a>
19. <a href="#express">Express Render Engine</a>
    • <a href="#express-options">Custom Options</a>
    • <a href="#express-render">Render Views</a>
20. Template Features:
    • <a href="#expressions">Template Expressions</a>
    • <a href="#includes">Includes</a>
    • <a href="#loop-partials">Loop Partials</a>
    • <a href="#inline-loops">Inline Loops</a>
    • <a href="#conditional">Conditional Template Structures</a>
21. Reactive Features:
    • <a href="#proxy">Reactive Properties (Proxy)</a>
    • <a href="#observable">Reactive Array (Virtual NodeList)</a>
    • <a href="#limitations">Limitations</a>
    • <a href="#strict-proxy">Strict-Proxy Mode</a>
    • <a href="#array.transaction">Transactions</a>
22. <a href="#pools">Template Pools</a>
23. <a href="#hydration">Hydration</a>
24. <a href="#shadow">Web Components (Shadow DOM)</a>
25. <a href="#full-template">Full Template Example</a>
26. <a href="#best-practices">Best Practices</a>
27. <a href="#concept">Concept of Shared Components</a>
28. <a href="#builds">Custom Builds</a>
    • <a href="#build-flags">Supported Build Flags</a>

<a name="get-latest"></a>

Get Latest

Do not use the "src" folder of this repo. It isn't meant to be used directly, instead it needs compilation. You can easily perform a <a href="#builds">custom build</a>, but don't use the source folder for production. You will need at least any kind of compiler which resolve the compiler flags within the code. The "dist" folder is containing every version which you probably need including unminified modules.

<table> <tr></tr> <tr> <td>Build</td> <td>File</td> <td>CDN</td> </tr> <tr> <td>mikado.bundle.debug.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.debug.js" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.debug.js" target="_blank">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.debug.js</a></td> </tr> <tr></tr> <tr> <td>mikado.bundle.min.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.min.js" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.