-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
437 lines (395 loc) · 114 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<!doctype html><html lang=en><head><meta charset=UTF-8><title>Marko vs React: An In-depth Look | Marko</title><link rel=icon type=image/png sizes=32x32 href=/assets/d78b83f1.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>
if (window.self !== window.top) {
document.documentElement.classList.add("iframe");
}
</script><script>
const params = new URL(window.location).searchParams;
const uwu = params.has("uwu")
? params.get("uwu") !== "false"
: localStorage.uwu;
if (uwu) {
localStorage.uwu = true;
document.documentElement.className = "uwu";
document.write(
"<style>@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');html.uwu body{font-family:'Varela Round',sans-serif;}</style>",
);
} else {
delete localStorage.uwu;
}
</script><script src="/assets/121.fd31caae.js" async></script><script src="/assets/364.f6733859.js" async></script><script src="/assets/991.5eec5c73.js" async></script><link rel="stylesheet" href="/assets/a50c84bf.css"></head><body class=docs><a href="#main" id=skip-link>Skip to main content</a><!--M#s0-1-0-14--><header data-marko-key="@header s0-1-0-14" class=site-header><div class=content><a href="/"><img src=/assets/91bc26e5.svg alt="Marko Home" class=site-logo><img src=/assets/2371441a.png alt="Marko Home" class=site-logo-uwu></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-1-0-14-12 s0-1-0-14 12--><link rel=preconnect href=https://GB0QQV5RQM-dsn.algolia.net crossorigin><div data-marko-key="@container s0-1-0-14-12" class=search></div><!--M/--></nav><button data-marko='{"onclick":"toggleMenu s0-1-0-14 false"}' class=menu>☰</button></div></div></header><!--M/--><!--M#s0-1-0-15--><div data-marko-key="@sidebar s0-1-0-15" class=doc-sidebar><button data-marko='{"onclick":"hide s0-1-0-15 false"}' class=close>✕</button><h1>Marko <!--M^s0-1-0-15-9 s0-1-0-15 9--><select data-marko='{"onchange":"switchVersion s0-1-0-15-9 false"}' data-marko-key="@version s0-1-0-15-9"><option value=/v6/docs/setup>next</option><option value=/docs/getting-started selected>5.37.27</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><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/typescript/">TypeScript</a></li><li><a href="/docs/marko-5-upgrade/">Marko 5 upgrade</a></li><li><a href="/docs/troubleshooting-streaming/">Troubleshooting Streaming</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/vite/">Vite</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/cloudflare-workers/">Cloudflare Workers</a></li><li><a href="/docs/express/">Express</a></li><li><a href="/docs/fastify/">Fastify</a></li><li><a href="/docs/koa/">Koa</a></li><li><a href="/docs/http/">HTTP</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 class=selected 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 href="/docs/10-awesome-marko-features/">10 Awesome Marko Features</a></li></ul></div><!--M/--><main id=main tabindex=-1 class=content><div class=doc-layout><div class=doc-container><div class=doc-content><h1 id=marko-vs-react-an-in-depth-look><a name=marko-vs-react-an-in-depth-look class=anchor href=#marko-vs-react-an-in-depth-look><span class=header-link></span></a>Marko vs React: An In-depth Look</h1><a href=https://hackernoon.com/marko-vs-react-an-in-depth-look-767de0a5f9a6><img src=https://cdn-images-1.medium.com/max/2000/1*4BP6tPQtwImj6_QseeybwQ.png alt="Marko logo" width=100%></a><br><blockquote class=null><p>This article was published March 2017. Both frameworks have gone through several updates since. You can find the original <a href=https://hackernoon.com/marko-vs-react-an-in-depth-look-767de0a5f9a6>"Marko vs React: An In-depth Look" article here</a>!</p></blockquote><p>In this article we will take an in-depth look at the differences and similarities between <a href="/">Marko</a> and React from the perspective of the maintainers of Marko.</p><p>On the surface, Marko and React have a lot in common and both are trying to solve very similar problems. Specifically, both Marko and React allow developers to build web applications based on UI components and both free developers from having to write code to manually update the DOM. While many of the features in Marko were inspired by React, Marko and React offer very different usability and performance characteristics. Marko was designed to avoid almost all boilerplate and is more closely aligned with HTML. In almost all cases, a Marko UI component will require less lines of code than its React JSX equivalent while maintaining readability and allowing the same expressiveness as JSX. In addition, Marko is highly optimized for use on the server and in the browser and has a much smaller weight:</p><p><img src=https://cdn-images-1.medium.com/max/1600/1*a9hL_pfNrRq1UU3Mxkf3Jg.png alt="Marko logo" width=100%><br></p><p>Because the Marko JavaScript library is much smaller than React, it will require less time to load and parse and this will drastically improve page load times on slow connections or on older devices. Based on <a href=/#benchmarks>our benchmarks</a>, Marko consistently outperforms React by a significant margin on both the server and in the browser.</p><h3 id=example><a name=example class=anchor href=#example><span class=header-link></span></a>Example</h3><p>The following code highlights some of the differences between Marko and React JSX using a somewhat contrived UI component as an example:</p><h4 id=react-jsx><a name=react-jsx class=anchor href=#react-jsx><span class=header-link></span></a>React JSX</h4><script>if(localStorage.getItem('markojs-website:syntax') === 'concise'){document.body.classList.add('concise')}</script><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class</span> Counter <span style=color:#FF4185>extends</span> React.<span style=color:#A6E22E;font-weight:bold>Component</span> {
<span style=color:#66D9EF>constructor</span>(<span style=color:#FFAC4D>props</span>) {
<span style=color:#FFFFFF>super</span>(<span style=color:#FFFFFF>props</span>);
<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span> <span style=color:#FFFFFF>=</span> { count: <span style=color:#AE81FF>0</span> };
}
<span style=color:#A6E22E>increment</span>(<span style=color:#FFAC4D>delta</span>) {
<span style=color:#FFFFFF>this</span>.<span style=color:#A6E22E>setState</span>({ count: <span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span>.<span style=color:#FFFFFF>count</span> <span style=color:#FF4185>+</span> <span style=color:#FFFFFF>delta</span> });
}
<span style=color:#A6E22E>render</span>() {
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>count</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span>.<span style=color:#FFFFFF>count</span>;
<span style=color:#66D9EF>let</span> <span style=color:#FFFFFF>countClassName</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFF066>"count"</span>;
<span style=color:#FF4185>if</span> (<span style=color:#FFFFFF>count</span> <span style=color:#FF4185>></span> <span style=color:#AE81FF>0</span>) {
<span style=color:#FFFFFF>countClassName</span> <span style=color:#FFFFFF>+=</span> <span style=color:#FFF066>" positive"</span>;
} <span style=color:#FF4185>else</span> <span style=color:#FF4185>if</span> (<span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>) {
<span style=color:#FFFFFF>countClassName</span> <span style=color:#FFFFFF>+=</span> <span style=color:#FFF066>" negative"</span>;
}
<span style=color:#FF4185>return</span> (
<span style=color:#FF4185><</span><span style=color:#FFFFFF>div</span> <span style=color:#FFFFFF>className=</span><span style=color:#FFF066>"click-count"</span><span style=color:#FF4185>></span>
<span style=color:#FF4185><</span><span style=color:#FFFFFF>div</span> <span style=color:#FFFFFF>className=</span>{<span style=color:#FFFFFF>countClassName</span>}<span style=color:#FF4185>></span>{<span style=color:#FFFFFF>count</span>}<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
<span style=color:#FF4185><</span><span style=color:#FFAC4D>button</span>
<span style=color:#FFFFFF>onClick=</span>{() => {
this.increment(-<span style=color:#AE81FF>1</span>);
}}
<span style=color:#FF4185>></span>
<span style=color:#FF4185>-</span><span style=color:#AE81FF>1</span>
<span style=color:#FF4185></</span><span style=color:#FFFFFF>button</span><span style=color:#FF4185>></span>
<span style=color:#FF4185><</span><span style=color:#FFAC4D>button</span>
<span style=color:#FFFFFF>onClick=</span>{() => {
this.increment(<span style=color:#AE81FF>1</span>);
}}
<span style=color:#FF4185>></span>
<span style=color:#FF4185>+</span><span style=color:#AE81FF>1</span>
<span style=color:#FF4185></</span><span style=color:#FFFFFF>button</span><span style=color:#FF4185>></span>
<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
);
}
}
</pre><p><span class=figcaption_hack><a href=https://codepen.io/mlrawlings/pen/wJXOWR?editors=0010>▶ Try Online</a></span></p><h4 id=marko><a name=marko class=anchor href=#marko><span class=header-link></span></a>Marko</h4><!--M#s0-1-0-17-4-31--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-31 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>class</span> {
<span style=color:#A6E22E>onCreate</span>() {
<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span> <span style=color:#FFFFFF>=</span> { count: <span style=color:#AE81FF>0</span> };
}
<span style=color:#A6E22E>increment</span>(<span style=color:#FFAC4D>delta</span>) {
<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span>.<span style=color:#FFFFFF>count</span> <span style=color:#FFFFFF>+=</span> <span style=color:#FFFFFF>delta</span>;
}
}
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>count</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>state</span>.<span style=color:#FFFFFF>count</span>;
<<span style=color:#FF4185>div</span><span style=color:#A6E22E>.click-count</span>>
<<span style=color:#FF4185>div</span><span style=color:#A6E22E>.count</span> <span style=color:#A6E22E>class</span><span style=color:#FFFFFF>=</span>{
positive: <span style=color:#FFFFFF>count</span> <span style=color:#FF4185>></span> <span style=color:#AE81FF>0</span>,
negative: <span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>
}>
<span style=color:#66D9EF>${</span><span style=color:#FFFFFF>count</span><span style=color:#66D9EF>}</span>
</<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>button</span> <span style=color:#66D9EF>on-click</span>(<span style=color:#FFF066>'increment'</span>, <span style=color:#FF4185>-</span><span style=color:#AE81FF>1</span>)>
-1
</<span style=color:#FF4185>button</span>>
<<span style=color:#FF4185>button</span> <span style=color:#66D9EF>on-click</span>(<span style=color:#FFF066>'increment'</span>, <span style=color:#AE81FF>1</span>)>
+1
</<span style=color:#FF4185>button</span>>
</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class</span> {
<span style=color:#A6E22E>onCreate</span>() {
<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span> <span style=color:#FFFFFF>=</span> { count: <span style=color:#AE81FF>0</span> };
<span style=color:#FFFFFF>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>count</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>state</span>.<span style=color:#FFFFFF>count</span>;
<span style=color:#FFFFFF>div</span>.<span style=color:#FFFFFF>click</span><span style=color:#FF4185>-</span><span style=color:#FFFFFF>count</span>
<span style=color:#FFFFFF>div</span> <span style=color:#FFFFFF>class=</span>[
<span style=color:#FFF066>"count"</span>,
{
positive: <span style=color:#FFFFFF>count</span> <span style=color:#FF4185>></span> <span style=color:#AE81FF>0</span>,
negative: <span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>,
},
]
<span style=color:#FF4185>--</span> <span style=color:#FFFFFF>$</span>{<span style=color:#FFFFFF>count</span>}
<span style=color:#FFFFFF>button</span> <span style=color:#FFFFFF>on</span><span style=color:#FF4185>-</span><span style=color:#A6E22E>click</span>(<span style=color:#FFF066>"increment"</span>, <span style=color:#FF4185>-</span><span style=color:#AE81FF>1</span>) <span style=color:#FF4185>--</span> <span style=color:#FF4185>-</span><span style=color:#AE81FF>1</span>
<span style=color:#FFFFFF>button</span> <span style=color:#FFFFFF>on</span><span style=color:#FF4185>-</span><span style=color:#A6E22E>click</span>(<span style=color:#FFF066>"increment"</span>, <span style=color:#AE81FF>1</span>) <span style=color:#FF4185>--</span> <span style=color:#FF4185>+</span><span style=color:#AE81FF>1</span>
</pre></div></div><!--M/--><p><span class=figcaption_hack><a href=/try-online/?gist=8fe46bc5866605aca0dfeec202604011>▶ Try Online</a></span></p><h3 id=similarities><a name=similarities class=anchor href=#similarities><span class=header-link></span></a>Similarities</h3><p>Marko and React have the following in common:</p><ul><li>UI component-based</li><li>JavaScript and HTML markup can be intertwined</li><li>No restrictions on JavaScript (use ES5 or ES2015+, your choice)</li><li>Virtual DOM rendering in the browser</li><li>DOM diffing/patching is used to reconcile views</li><li>Both support keyed element matching</li><li>UI components can have input properties</li><li>UI components can have internal state</li><li>Changes to state trigger an asynchronous update to the DOM</li><li>Updates to the DOM are batched</li><li>Compatible with central application state stores such as Redux and MobX</li><li>UI components can be embedded using custom tags</li><li>Declarative event binding (no <code>domEl.addEventListener()</code> needed)</li><li>Support for all DOM events</li><li>Event delegation utilized internally for DOM events that bubble</li><li>IE9+ support</li><li>Similar lifecycle events for UI components</li><li>JSX and Marko both compile to JavaScript</li></ul><h3 id=differences><a name=differences class=anchor href=#differences><span class=header-link></span></a>Differences</h3><p>At a high level here are some differences:</p><h4 id=differences-in-rendering><a name=differences-in-rendering class=anchor href=#differences-in-rendering><span class=header-link></span></a>Differences in rendering</h4><ul><li><strong>Improved performance:</strong> Marko renders to a virtual DOM in the browser and directly to an HTML stream on the server (Marko supports multiple compilation targets).</li><li><strong>Improved performance:</strong> Marko supports asynchronous rendering with <a href="https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/">early flushing of HTML</a> for improvements in actual and perceived page load times.</li><li><strong>Improved performance:</strong> React requires an additional client-side re-render if a page is initially rendered on the server while Marko does not.</li><li><strong>Improved ease of use:</strong> Marko automatically serializes UI component state and input down to the browser so that the browser can pick up right where the server left off.</li><li><strong>Improved ease of use:</strong> Marko is suitable for rendering an entire HTML page on the server with support for tags such as <code><doctype></code> and <code><html></code></li></ul><h4 id=differences-in-syntax><a name=differences-in-syntax class=anchor href=#differences-in-syntax><span class=header-link></span></a>Differences in syntax</h4><ul><li><strong>Improved ease of use:</strong> Marko uses the <a href="/docs/syntax/">HTML-JS</a> syntax and the <a href=https://facebook.github.io/react/docs/jsx-in-depth.html>JSX</a> syntax is offered for React.</li><li><strong>Improved ease of use:</strong> Marko supports both a concise syntax and a familiar HTML syntax.</li><li><strong>Improved ease of use:</strong> JSX requires strict XML while Marko aligns with less strict HTML that web developers are used to.</li><li><strong>Improved ease of use:</strong> With Marko, <em>all</em> HTML attribute values are parsed as JavaScript expressions.</li><li><strong>Improved ease of use:</strong> Marko supports simple directives for conditionals, looping, etc.</li><li><strong>JSX limitation:</strong> JSX is “just JavaScript” but requires expressions that preclude the usage of JavaScript statements such as in certain places.</li></ul><h4 id=differences-in-compilation><a name=differences-in-compilation class=anchor href=#differences-in-compilation><span class=header-link></span></a>Differences in compilation</h4><ul><li><strong>Improved performance:</strong> Marko supports multiple compilation outputs (Marko VDOM and HTML streaming are currently supported).</li><li><strong>Improved ease of use:</strong> Marko compiles UI components to JavaScript modules that export a rendering API.</li><li><strong>Expanded capabilities:</strong> Marko supports a robust API for controlling how custom tags and custom attributes get compiled and it supports compile-time transforms based on a friendly Abstract Syntax Tree (AST).</li><li><strong>Improved performance:</strong> JSX is just syntactic sugar that translates elements to <code>createElement()</code> function calls while the Marko compiler has full control over how things are compiled and optimized.</li><li><strong>Improved ease of use:</strong> React requires all UI components to be explicitly imported before they can be used as custom tags while Marko supports both explicit importing and implicit importing.</li><li><strong>Improved performance:</strong> Marko has a modular runtime and the compiler generates code that only imports the parts of the Marko runtime that are needed for much smaller builds.</li><li><strong>Improved ease of use:</strong> Marko supports optional compile-time checks to ensure that only allowed attributes are passed to custom tags. (React <code>PropTypes</code> only provide validation at render-time)</li><li><strong>Improved ease of use:</strong> Marko validates <em>all</em> tag names at compile-time.</li><li><strong>Improved ease of use:</strong> Marko provides its own compiler that integrates with Node.js and JavaScript module bundlers while React JSX requires babel and custom babel transforms.</li></ul><h4 id=differences-in-ui-components><a name=differences-in-ui-components class=anchor href=#differences-in-ui-components><span class=header-link></span></a>Differences in UI components</h4><ul><li><strong>Reduced boilerplate:</strong> No explicit extending of JavaScript classes in Marko (in contrast to <code>class Counter extends React.Component</code> in React).</li><li><strong>Improved ease of use:</strong> Modifications to UI component state are synchronous with Marko while <a href=https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous>the rules for React are more complicated</a>.</li><li><strong>Improved ease of use:</strong> Marko watches UI component state objects to allow state to be modified directly (e.g., <code>this.state.count++</code>).</li><li><strong>Improved ease of use:</strong> Marko supports single-file UI components combining JavaScript behavior, CSS styling (with support for CSS preprocessors) and HTML markup. (React requires using one of the many <a href=https://github.com/MicheleBertoli/css-in-js>CSS in JS solutions</a> if you want styles in the same file as your component and there is no standard in the community)</li><li><strong>Improved maintainability:</strong> Marko supports a seamless transition from a single-file UI component to a multi-file UI component.</li><li><strong>Improved performance:</strong> Marko assumes UI components are pure by default and skips re-rendering when input properties and state are unchanged (React requires extending <a href=https://facebook.github.io/react/docs/react-api.html#reactpurecomponent>React.PureComponent</a>).</li></ul><h4 id=differences-in-event-systems><a name=differences-in-event-systems class=anchor href=#differences-in-event-systems><span class=header-link></span></a>Differences in event systems</h4><ul><li><strong>Reduced complexity:</strong> React utilizes <a href=https://facebook.github.io/react/docs/events.html>synthetic events</a> while Marko utilizes real DOM events.</li><li><strong>Improved ease of use:</strong> Custom events are emitted using the <a href=https://nodejs.org/api/events.html>EventEmitter API</a> in Marko (e.g., <code>this.emit('myCustomEvent', arg1, arg2)</code>).</li><li><strong>Improved ease of use:</strong> Marko has a consistent approach for listening to both native DOM events and custom events.</li><li><strong>Improved ease of use:</strong> React requires passing around <code>Function</code> references for custom events while Marko automatically delegates emitted custom events to event handler methods on components.</li><li><strong>Improved ease of use:</strong> Marko provides a simple mechanism for binding additional arguments to event handler methods and <code>this</code> will be the component instance.</li></ul><h4 id=differences-in-compatibility><a name=differences-in-compatibility class=anchor href=#differences-in-compatibility><span class=header-link></span></a>Differences in compatibility</h4><ul><li><strong>Marko limitation:</strong> Marko has no support for native mobile similar to React Native (although with Marko VDOM rendering, this is possible).</li><li><strong>Marko limitation:</strong> Marko requires a JavaScript module bundler (such as <a href="/docs/lasso/">Lasso</a>, <a href="/docs/webpack/">Webpack</a>, <a href="/docs/rollup/">Rollup</a> since Marko UI components compile down to JavaScript modules. (we consider using a JavaScript module bundler a best practice)</li></ul><hr><p>In the sections below we will take a closer look at some of the differences between Marko and React.</p><h3 id=syntax><a name=syntax class=anchor href=#syntax><span class=header-link></span></a>Syntax</h3><p>Both Marko and React JSX allow HTML markup and JavaScript to be combined into a single file and both support building web applications based on UI components. Marko utilizes an <a href="/docs/syntax/">HTML-JS syntax</a> while most React apps use the JSX syntax.</p><blockquote class=null><p>React JSX makes JavaScript more like HTML and Marko makes HTML more like JavaScript.</p></blockquote><p>In the end, both Marko and React allow JavaScript and HTML to be intertwined.</p><h3 id=syntax-attributes><a name=syntax-attributes class=anchor href=#syntax-attributes><span class=header-link></span></a>Syntax: attributes</h3><h4 id=react-jsx_1><a name=react-jsx_1 class=anchor href=#react-jsx_1><span class=header-link></span></a>React JSX</h4><p>In React JSX, all attribute values are parsed as string values unless <code>{}</code> is used.</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185><</span><span style=color:#FFFFFF>MyComponent</span>
<span style=color:#FFFFFF>name=</span><span style=color:#FFF066>"Frank"</span>
<span style=color:#FFFFFF>messageCount=</span>{<span style=color:#AE81FF>30</span>}
<span style=color:#FFFFFF>visible=</span>{<span style=color:#FFFFFF>true</span>}
<span style=color:#FFFFFF>person=</span>{{ firstName: <span style=color:#FFF066>'John'</span>, lastName: <span style=color:#FFF066>'Doe'</span> }}
<span style=color:#FFFFFF>colors=</span>{[<span style=color:#FFF066>'red'</span>, <span style=color:#FFF066>'green'</span>, <span style=color:#FFF066>'blue'</span>]} />
<div id="content" className="foo">Hello</div>
</pre><h4 id=marko_1><a name=marko_1 class=anchor href=#marko_1><span class=header-link></span></a>Marko</h4><p>With Marko, <em>all</em> attribute values are parsed as JavaScript expressions. The following Marko code is equivalent to the React JSX code above:</p><!--M#s0-1-0-17-4-198--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-198 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>my-component</span>
<span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"Frank"</span>
<span style=color:#A6E22E>message-count</span><span style=color:#FFFFFF>=</span><span style=color:#AE81FF>30</span>
<span style=color:#A6E22E>visible</span><span style=color:#FFFFFF>=</span><span style=color:#AE81FF>true</span>
<span style=color:#A6E22E>person</span><span style=color:#FFFFFF>=</span>{ firstName: <span style=color:#FFF066>'John'</span>, lastName: <span style=color:#FFF066>'Doe'</span> }
<span style=color:#A6E22E>colors</span><span style=color:#FFFFFF>=</span>[<span style=color:#FFF066>'red'</span>, <span style=color:#FFF066>'green'</span>, <span style=color:#FFF066>'blue'</span>] />
<<span style=color:#FF4185>div</span> <span style=color:#A6E22E>id</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"content"</span> <span style=color:#A6E22E>class</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"foo"</span>>Hello</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>my-component</span> [
<span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"Frank"</span>
<span style=color:#A6E22E>message-count</span><span style=color:#FFFFFF>=</span><span style=color:#AE81FF>30</span>
<span style=color:#A6E22E>visible</span>
<span style=color:#A6E22E>person</span><span style=color:#FFFFFF>=</span>{ firstName: <span style=color:#FFF066>"John"</span>, lastName: <span style=color:#FFF066>"Doe"</span> }
<span style=color:#A6E22E>colors</span><span style=color:#FFFFFF>=</span>[<span style=color:#FFF066>"red"</span>, <span style=color:#FFF066>"green"</span>, <span style=color:#FFF066>"blue"</span>]
]
<span style=color:#FF4185>div</span><span style=color:#A6E22E>#content.foo</span> -- Hello
</pre></div></div><!--M/--><h3 id=syntax-inline-javascript><a name=syntax-inline-javascript class=anchor href=#syntax-inline-javascript><span class=header-link></span></a>Syntax: inline JavaScript</h3><h4 id=react-jsx_2><a name=react-jsx_2 class=anchor href=#react-jsx_2><span class=header-link></span></a>React JSX</h4><p>React JSX starts with JavaScript and allows XML elements to be inlined as shown below:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> { <span style=color:#FFFFFF>formatDate</span> } <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./util"</span>;
<span style=color:#66D9EF>function</span> <span style=color:#A6E22E>formatName</span>(<span style=color:#FFAC4D>person</span>) {
<span style=color:#FF4185>return</span> <span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>firstName</span> <span style=color:#FF4185>+</span> <span style=color:#FFF066>" "</span> <span style=color:#FF4185>+</span> <span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>lastName</span>.<span style=color:#A6E22E>charAt</span>(<span style=color:#AE81FF>0</span>) <span style=color:#FF4185>+</span> <span style=color:#FFF066>"."</span>;
}
<span style=color:#FF4185>export</span> <span style=color:#FF4185>default</span> <span style=color:#66D9EF>function</span> <span style=color:#A6E22E>HelloMessage</span>(<span style=color:#FFAC4D>props</span>) {
<span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>person</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>props</span>.<span style=color:#FFFFFF>person</span>;
<span style=color:#FF4185>return</span> (
<div>
<span style=color:#FFFFFF>Hello</span> {<span style=color:#FFAC4D>formatName</span>(<span style=color:#FFAC4D>person</span>)}<span style=color:#FF4185>!</span>
<span><span style=color:#FFFFFF>You</span> <span style=color:#FFFFFF>were</span> <span style=color:#FFFFFF>born</span> <span style=color:#FFFFFF>on</span> {<span style=color:#FFAC4D>formatDate</span>(<span style=color:#FFAC4D>person</span>.<span style=color:#FFAC4D>birthday</span>)}.<span style=color:#FF4185></</span><span style=color:#FFFFFF>span</span><span style=color:#FF4185>></span>
<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
);
}
</pre><h4 id=marko_2><a name=marko_2 class=anchor href=#marko_2><span class=header-link></span></a>Marko</h4><p>Marko starts out in HTML, but it allows JavaScript to be inlined in a clean and maintainable way. Unlike other template languages, Marko aims to allow the full power of JavaScript. The following Marko code is equivalent to the React JSX code above:</p><!--M#s0-1-0-17-4-210--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-210 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> { <span style=color:#FFFFFF>formatDate</span> } <span style=color:#FF4185>from</span> <span style=color:#FFF066>'./util'</span>;
<span style=color:#FF4185>static</span> <span style=color:#66D9EF>function</span> <span style=color:#A6E22E>formatName</span>(<span style=color:#FFAC4D>person</span>) {
<span style=color:#FF4185>return</span> <span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>firstName</span> <span style=color:#FF4185>+</span> <span style=color:#FFF066>' '</span> <span style=color:#FF4185>+</span> <span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>lastName</span>.<span style=color:#A6E22E>charAt</span>(<span style=color:#AE81FF>0</span>) <span style=color:#FF4185>+</span> <span style=color:#FFF066>'.'</span>;
}
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>person</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>person</span>;
<<span style=color:#FF4185>div</span>>
Hello <span style=color:#66D9EF>${</span><span style=color:#A6E22E>formatName</span>(<span style=color:#FFFFFF>person</span>)<span style=color:#66D9EF>}</span>!
<<span style=color:#FF4185>span</span>>
You were born on <span style=color:#66D9EF>${</span><span style=color:#A6E22E>formatDate</span>(<span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>birthday</span>)<span style=color:#66D9EF>}</span>.
</<span style=color:#FF4185>span</span>>
</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> { <span style=color:#FFFFFF>formatDate</span> } <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./util"</span>;
<span style=color:#FF4185>static</span> <span style=color:#66D9EF>function</span> <span style=color:#A6E22E>formatName</span>(<span style=color:#FFAC4D>person</span>) {
<span style=color:#FF4185>return</span> <span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>firstName</span> <span style=color:#FF4185>+</span> <span style=color:#FFF066>" "</span> <span style=color:#FF4185>+</span> <span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>lastName</span>.<span style=color:#A6E22E>charAt</span>(<span style=color:#AE81FF>0</span>) <span style=color:#FF4185>+</span> <span style=color:#FFF066>"."</span>;
}
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>person</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>person</span>;
<span style=color:#FF4185>div</span>
-- Hello <span style=color:#66D9EF>${</span><span style=color:#A6E22E>formatName</span>(<span style=color:#FFFFFF>person</span>)<span style=color:#66D9EF>}</span>!
<span style=color:#FF4185>span</span> -- You were born on <span style=color:#66D9EF>${</span><span style=color:#A6E22E>formatDate</span>(<span style=color:#FFFFFF>person</span>.<span style=color:#FFFFFF>birthday</span>)<span style=color:#66D9EF>}</span>.
</pre></div></div><!--M/--><p>Lines prefixed with <code>$</code> are directly added to the compiled JavaScript output inside the compiled <code>render()</code> function (for JavaScript code that should run for every render). Lines prefixed with <code>static</code> are directly added to the compiled JavaScript output outside the <code>render()</code> function (for code that should only run <em>once</em> when the template is loaded).</p><h3 id=syntax-html-support><a name=syntax-html-support class=anchor href=#syntax-html-support><span class=header-link></span></a>Syntax: HTML support</h3><p>With Marko any valid HTML markup can be used inside a Marko template. This is not the case with React. The following quote is from the <a href=https://facebook.github.io/react/docs/introducing-jsx.html#specifying-children-with-jsx>React documentation</a>:</p><blockquote class=caveat><p><strong>Caveat:</strong></p></blockquote><blockquote class=null><p>Since JSX is closer to JavaScript than HTML, React DOM uses <code>camelCase</code> property naming convention instead of HTML attribute names.</p></blockquote><blockquote class=null><p>For example, <code>class</code> becomes <code>className</code> in JSX, and <code>tabindex</code> becomes <code>tabIndex</code>.</p></blockquote><p>As a result of this caveat for React, <a href=https://magic.reactjs.net/htmltojsx.htm>tools for converting HTML to JSX exist</a>.</p><h4 id=react-jsx_3><a name=react-jsx_3 class=anchor href=#react-jsx_3><span class=header-link></span></a>React JSX</h4><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185><</span><span style=color:#FFFFFF>div</span> <span style=color:#FFFFFF>id=</span><span style=color:#FFF066>"content"</span> <span style=color:#FFFFFF>className=</span><span style=color:#FFF066>"my-component"</span><span style=color:#FF4185>></span><span style=color:#FFFFFF>Hello</span><span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
<span style=color:#FF4185><</span><span style=color:#FFFFFF>input</span> <span style=color:#FFFFFF>type=</span><span style=color:#FFF066>"text"</span> <span style=color:#FFFFFF>name=</span><span style=color:#FFF066>"firstName"</span> <span style=color:#FFFFFF>value=</span><span style=color:#FFF066>"John"</span> <span style=color:#FF4185>/></span>
</pre><h4 id=marko_3><a name=marko_3 class=anchor href=#marko_3><span class=header-link></span></a>Marko</h4><!--M#s0-1-0-17-4-242--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-242 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span> <span style=color:#A6E22E>id</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"content"</span> <span style=color:#A6E22E>class</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"my-component"</span>>Hello</<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>input</span> <span style=color:#A6E22E>type</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"text"</span> <span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"firstName"</span> <span style=color:#A6E22E>value</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"John"</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div</span><span style=color:#A6E22E>#content.my-component</span> -- Hello
<span style=color:#FF4185>input</span> <span style=color:#A6E22E>type</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"text"</span> <span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"firstName"</span> <span style=color:#A6E22E>value</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"John"</span>
</pre></div></div><!--M/--><h3 id=syntax-conditionals><a name=syntax-conditionals class=anchor href=#syntax-conditionals><span class=header-link></span></a>Syntax: conditionals</h3><p>JSX is syntactic sugar on top of JavaScript, but it requires expressions, so simple things like an <code>if/else/for</code> statement don’t work on their own within a JSX element. As a result, you must either use a ternary expression, an immediately invoked function expression, function call expression, or the experimental <code>do {}</code> expression (stage 0 at the time of writing). This is not an issue for Marko, and tags such as <code>if()</code> and <code>for</code> can be used anywhere as shown below:</p><h4 id=react-jsx_4><a name=react-jsx_4 class=anchor href=#react-jsx_4><span class=header-link></span></a>React JSX</h4><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>function</span> <span style=color:#A6E22E>counterMessage</span>(<span style=color:#FFAC4D>count</span>) {
<span style=color:#FF4185>return</span> (
<span style=color:#FF4185><</span><span style=color:#FFFFFF>div</span> <span style=color:#FFFFFF>className=</span><span style=color:#FFF066>"counter-message"</span><span style=color:#FF4185>></span>
(<span style=color:#66D9EF>function</span>() {
<span style=color:#FF4185>if</span> (<span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>) {
<span style=color:#FF4185>return</span> <div><span style=color:#FFFFFF>Count</span> <span style=color:#FFFFFF>is</span> <span style=color:#FFFFFF>negative</span><span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
} <span style=color:#FF4185>else</span> <span style=color:#FF4185>if</span> (<span style=color:#FFFFFF>count</span> <span style=color:#FF4185>===</span> <span style=color:#AE81FF>0</span>) {
<span style=color:#FF4185>return</span> <div><span style=color:#FFFFFF>Count</span> <span style=color:#FFFFFF>is</span> <span style=color:#FFFFFF>zero</span><span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
} <span style=color:#FF4185>else</span> {
<span style=color:#FF4185>return</span> <div><span style=color:#FFFFFF>Count</span> <span style=color:#FFFFFF>is</span> <span style=color:#FFFFFF>positive</span><span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
}
}())
<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
)
}
</pre><h4 id=marko_4><a name=marko_4 class=anchor href=#marko_4><span class=header-link></span></a>Marko</h4><!--M#s0-1-0-17-4-257--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-257 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span><span style=color:#A6E22E>.counter-message</span>>
<<span style=color:#FF4185>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>)>
<<span style=color:#FF4185>div</span>>Count is negative</<span style=color:#FF4185>div</span>>
</<span style=color:#FF4185>if</span>>
<<span style=color:#FF4185>else</span> <span style=color:#A6E22E>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185>===</span> <span style=color:#AE81FF>0</span>)>
<<span style=color:#FF4185>div</span>>Count is zero</<span style=color:#FF4185>div</span>>
</<span style=color:#FF4185>else</span>>
<<span style=color:#FF4185>else</span>>
<<span style=color:#FF4185>div</span>>Count is positive</<span style=color:#FF4185>div</span>>
</<span style=color:#FF4185>else</span>>
</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div</span><span style=color:#A6E22E>.counter-message</span>
<span style=color:#FF4185>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>)
<span style=color:#FF4185>div</span> -- Count is negative
<span style=color:#FF4185>else</span> <span style=color:#A6E22E>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185>===</span> <span style=color:#AE81FF>0</span>)
<span style=color:#FF4185>div</span> -- Count is zero
<span style=color:#FF4185>else</span>
<span style=color:#FF4185>div</span> -- Count is positive
</pre></div></div><!--M/--><p>Marko also allows directives to be used as attributes for a more condensed template:</p><!--M#s0-1-0-17-4-259--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-259 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span><span style=color:#A6E22E>.counter-message</span>>
<<span style=color:#FF4185>div</span> <span style=color:#A6E22E>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>)>Count is negative</<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>div</span> <span style=color:#A6E22E>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185>===</span> <span style=color:#AE81FF>0</span>)>Count is zero</<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>div</span> <span style=color:#A6E22E>else</span>>Count is positive</<span style=color:#FF4185>div</span>>
</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div</span><span style=color:#A6E22E>.counter-message</span>
<span style=color:#FF4185>div</span> <span style=color:#A6E22E>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185><</span> <span style=color:#AE81FF>0</span>) -- Count is negative
<span style=color:#FF4185>div</span> <span style=color:#A6E22E>if</span>(<span style=color:#FFFFFF>count</span> <span style=color:#FF4185>===</span> <span style=color:#AE81FF>0</span>) -- Count is zero
<span style=color:#FF4185>div</span> <span style=color:#A6E22E>else</span> -- Count is positive
</pre></div></div><!--M/--><h3 id=syntax-looping><a name=syntax-looping class=anchor href=#syntax-looping><span class=header-link></span></a>Syntax: looping</h3><h4 id=react-jsx_5><a name=react-jsx_5 class=anchor href=#react-jsx_5><span class=header-link></span></a>React JSX</h4><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>function</span> <span style=color:#A6E22E>renderColors</span>(<span style=color:#FFAC4D>colors</span>) {
<span style=color:#FF4185>return</span> (
<ul>
{<span style=color:#FFAC4D>colors</span>.<span style=color:#FFAC4D>map</span>((<span style=color:#FFAC4D>color</span>) <span style=color:#FFFFFF>=</span><span style=color:#FF4185>></span> (
<span style=color:#FF4185><</span><span style=color:#FFAC4D>li</span>
<span style=color:#FFFFFF>className=</span><span style=color:#FFF066>"color"</span>
<span style=color:#FFFFFF>style=</span>{{
backgroundColor: <span style=color:#FFFFFF>color</span>,
}}
<span style=color:#FF4185>></span>
{<span style=color:#FFAC4D>color</span>}
<span style=color:#FF4185></</span><span style=color:#FFFFFF>li</span><span style=color:#FF4185>></span>
))}
<span style=color:#FF4185></</span><span style=color:#FFFFFF>ul</span><span style=color:#FF4185>></span>
);
}
</pre><h4 id=marko_5><a name=marko_5 class=anchor href=#marko_5><span class=header-link></span></a>Marko</h4><!--M#s0-1-0-17-4-269--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-269 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>ul</span>>
<<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>>
<<span style=color:#FF4185>li</span><span style=color:#A6E22E>.color</span> <span style=color:#A6E22E>style</span><span style=color:#FFFFFF>=</span>{ backgroundColor: <span style=color:#FFFFFF>color</span> }>
<span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span>
</<span style=color:#FF4185>li</span>>
</<span style=color:#FF4185>for</span>>
</<span style=color:#FF4185>ul</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul</span>
<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>
<span style=color:#FF4185>li</span><span style=color:#A6E22E>.color</span> <span style=color:#A6E22E>style</span><span style=color:#FFFFFF>=</span>{ backgroundColor: <span style=color:#FFFFFF>color</span> } -- <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><h3 id=syntax-html-shorthand><a name=syntax-html-shorthand class=anchor href=#syntax-html-shorthand><span class=header-link></span></a>Syntax: HTML shorthand</h3><!--M#s0-1-0-17-4-273--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-273 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span> <span style=color:#A6E22E>id</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"content"</span>/>
<<span style=color:#FF4185>h1</span> <span style=color:#A6E22E>class</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"subheader"</span>/>
<<span style=color:#FF4185>h1</span> <span style=color:#A6E22E>id</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"pageTitle"</span> <span style=color:#A6E22E>class</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"foo bar"</span>/>
<span style=color:#8F8F9E><!-- Shorthand equivalent: --></span>
<<span style=color:#FF4185>div</span><span style=color:#A6E22E>#content</span>/>
<<span style=color:#FF4185>h1</span><span style=color:#A6E22E>.subheader</span>/>
<<span style=color:#FF4185>h1</span><span style=color:#A6E22E>#pageTitlefoo.bar</span>/>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div</span><span style=color:#A6E22E>#content</span>
<span style=color:#FF4185>h1</span><span style=color:#A6E22E>.subheader</span>
<span style=color:#FF4185>h1</span><span style=color:#A6E22E>#pageTitle.foo.bar</span>
<span style=color:#8F8F9E><!-- Shorthand equivalent: --></span>
<span style=color:#FF4185>div</span><span style=color:#A6E22E>#content</span>
<span style=color:#FF4185>h1</span><span style=color:#A6E22E>.subheader</span>
<span style=color:#FF4185>h1</span><span style=color:#A6E22E>.bar#pageTitlefoo</span>
</pre></div></div><!--M/--><p>Marko supports a shorthand based on CSS selectors for less code.</p><p>React does not support these helpful shorthands.</p><h3 id=syntax-concise><a name=syntax-concise class=anchor href=#syntax-concise><span class=header-link></span></a>Syntax: concise</h3><p>Marko supports a concise syntax that drops angled brackets and ending tags in favor of indentation. Here’s how the Marko syntax options compare:</p><h4 id=marko-html-syntax><a name=marko-html-syntax class=anchor href=#marko-html-syntax><span class=header-link></span></a>Marko HTML syntax</h4><!--M#s0-1-0-17-4-283--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-283 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>ul</span>>
<<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>>
<<span style=color:#FF4185>li</span>><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span></<span style=color:#FF4185>li</span>>
</<span style=color:#FF4185>for</span>>
</<span style=color:#FF4185>ul</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul</span>
<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>
<span style=color:#FF4185>li</span> -- <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><h4 id=marko-concise-syntax><a name=marko-concise-syntax class=anchor href=#marko-concise-syntax><span class=header-link></span></a>Marko concise syntax</h4><!--M#s0-1-0-17-4-287--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-287 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul</span>
<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>
<span style=color:#FF4185>li</span> -- <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul</span>
<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>
<span style=color:#FF4185>li</span> -- <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><h4 id=marko-mixed-syntax><a name=marko-mixed-syntax class=anchor href=#marko-mixed-syntax><span class=header-link></span></a>Marko mixed syntax</h4><!--M#s0-1-0-17-4-291--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-291 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul</span>
<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>
<<span style=color:#FF4185>li</span>><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span></<span style=color:#FF4185>li</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul</span>
<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>colors</span>
<span style=color:#FF4185>li</span> -- <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><p>The HTML syntax and the concise syntax can be used together:</p><h4 id=react-jsx_6><a name=react-jsx_6 class=anchor href=#react-jsx_6><span class=header-link></span></a>React JSX</h4><p>React does not offer a concise syntax.</p><h3 id=components><a name=components class=anchor href=#components><span class=header-link></span></a>Components</h3><p>Marko starts with simple HTML and allows UI component logic to easily be layered on top.</p><h4 id=react-jsx_7><a name=react-jsx_7 class=anchor href=#react-jsx_7><span class=header-link></span></a>React JSX</h4><p>A React UI component is typically implemented as a class that extends <code>ReactComponent</code>:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class</span> HelloMessage <span style=color:#FF4185>extends</span> React.<span style=color:#A6E22E;font-weight:bold>Component</span> {
<span style=color:#A6E22E>render</span>() {
<span style=color:#FF4185>return</span> <div><span style=color:#FFFFFF>Hello</span> {this.props.name.toUpperCase()}<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>;
}
}
</pre><p>React also supports a more concise functional component:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>function</span> <span style=color:#A6E22E>HelloMessage</span>(<span style=color:#FFAC4D>props</span>) {
<span style=color:#FF4185>return</span> <div><span style=color:#FFFFFF>Hello</span> {props.name.toUpperCase()}<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>;
}
</pre><p>However, if state or lifecycle events are needed then a functional UI component must be converted to a class component:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class</span> HelloMessage <span style=color:#FF4185>extends</span> React.<span style=color:#A6E22E;font-weight:bold>Component</span> {
<span style=color:#A6E22E>componentDidMount</span>() {
<span style=color:#8F8F9E>// ...</span>
}
<span style=color:#A6E22E>render</span>() {
<span style=color:#FF4185>return</span> <div><span style=color:#FFFFFF>Hello</span> {this.props.name.toUpperCase()}<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>;
}
}
</pre><h4 id=marko_6><a name=marko_6 class=anchor href=#marko_6><span class=header-link></span></a>Marko</h4><p>Here is the same component in Marko:</p><!--M#s0-1-0-17-4-312--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-312 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span>>Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>.<span style=color:#A6E22E>toUpperCase</span>()<span style=color:#66D9EF>}</span></<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div</span> -- Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>.<span style=color:#A6E22E>toUpperCase</span>()<span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><p>Behavior can easily be added to any Marko UI component:</p><!--M#s0-1-0-17-4-314--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-314 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>class</span> {
<span style=color:#A6E22E>onMount</span>() {
<span style=color:#8F8F9E>// ...</span>
}
}
<<span style=color:#FF4185>div</span>>Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>.<span style=color:#A6E22E>toUpperCase</span>()<span style=color:#66D9EF>}</span></<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class</span> {
<span style=color:#A6E22E>onMount</span>() {
<span style=color:#8F8F9E>// ...</span>
}
}
<span style=color:#FF4185>div</span> -- Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>.<span style=color:#A6E22E>toUpperCase</span>()<span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><p>Marko also allows JavaScript behavior, CSS styling and HTML markup to be embedded in the Marko template as a single file UI component:</p><!--M#s0-1-0-17-4-316--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-316 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>class</span> {
<span style=color:#A6E22E>onMount</span>() {
<span style=color:#8F8F9E>// ...</span>
}
}
<span style=color:#66D9EF>style</span><span style=color:#FF4185>.less</span> {
<span style=color:#A6E22E>.hello</span> {
<span style=color:#66D9EF>color</span>: <span style=color:#66D9EF>red</span>;
}
}
<<span style=color:#FF4185>div</span><span style=color:#A6E22E>.hello</span>>
Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>.<span style=color:#A6E22E>toUpperCase</span>()<span style=color:#66D9EF>}</span>
</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class</span> {
<span style=color:#A6E22E>onMount</span>() {
<span style=color:#8F8F9E>// ...</span>
}
}
<span style=color:#66D9EF>style</span><span style=color:#FF4185>.less</span> {
<span style=color:#A6E22E>.hello</span> {
<span style=color:#66D9EF>color</span>: <span style=color:#66D9EF>red</span>;
}
}
<span style=color:#FF4185>div</span><span style=color:#A6E22E>.hello</span> -- Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>.<span style=color:#A6E22E>toUpperCase</span>()<span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><h3 id=api><a name=api class=anchor href=#api><span class=header-link></span></a>API</h3><p>Marko compiles components to JavaScript modules that export their rendering APIs, as shown below:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>Greeting</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./components/greeting.marko"</span>;
<span style=color:#FFFFFF>Greeting</span>.<span style=color:#A6E22E>renderSync</span>({ name: <span style=color:#FFF066>"Frank"</span> }).<span style=color:#A6E22E>appendTo</span>(<span style=color:#FFFFFF>document</span>.<span style=color:#FFFFFF>body</span>);
</pre><p>The same UI component can render to streams, such as a writable HTTP response stream:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>Greeting</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./components/greeting.marko"</span>;
<span style=color:#FFFFFF>Greeting</span>.<span style=color:#A6E22E>render</span>({ name: <span style=color:#FFF066>"John"</span> }, <span style=color:#FFFFFF>res</span>);
</pre><blockquote class=null><p>The users of a Marko UI component do not need to know that the component was implemented using Marko.</p></blockquote><p>Contrast this with React as an example:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>ReactDOM</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"react-dom"</span>;
<span style=color:#FFFFFF>ReactDOM</span>.<span style=color:#A6E22E>render</span>(
<span style=color:#FF4185><</span><span style=color:#FFFFFF>HelloMessage</span> <span style=color:#FFFFFF>name=</span><span style=color:#FFF066>"John"</span> <span style=color:#FF4185>/></span>,
<span style=color:#FFFFFF>document</span>.<span style=color:#A6E22E>getElementById</span>(<span style=color:#FFF066>"container"</span>),
);
</pre><p>On top of that, React requires that a different module be imported to render the exact same UI component on the server:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>ReactDOMServer</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"react-dom/server"</span>;
<span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>html</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>ReactDOMServer</span>.<span style=color:#A6E22E>renderToString</span>(<HelloMessage name=<span style=color:#FFF066>"John"</span> />);
</pre><h3 id=custom-tags><a name=custom-tags class=anchor href=#custom-tags><span class=header-link></span></a>Custom tags</h3><h4 id=react-jsx_8><a name=react-jsx_8 class=anchor href=#react-jsx_8><span class=header-link></span></a>React JSX</h4><p>With React, all custom tags for UI components must be explicitly imported:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>Hello</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./components/Hello"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>GoodBye</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./components/GoodBye"</span>;
<span style=color:#FF4185>export</span> <span style=color:#FF4185>default</span> <span style=color:#66D9EF>function</span> <span style=color:#A6E22E>HelloGoodBye</span>(<span style=color:#FFAC4D>props</span>) {
<span style=color:#FF4185>return</span> (
<div>
<span style=color:#FF4185><</span><span style=color:#FFFFFF>Hello</span> <span style=color:#FFFFFF>name=</span>{props.<span style=color:#FFFFFF>name</span>} <span style=color:#FF4185>/></span>
<span style=color:#FF4185><</span><span style=color:#FFFFFF>GoodBye</span> <span style=color:#FFFFFF>name=</span>{props.<span style=color:#FFFFFF>name</span>} <span style=color:#FF4185>/></span>
<span style=color:#FF4185></</span><span style=color:#FFFFFF>div</span><span style=color:#FF4185>></span>
);
}
</pre><h4 id=marko_7><a name=marko_7 class=anchor href=#marko_7><span class=header-link></span></a>Marko</h4><p>Marko supports a mechanism for <a href=/docs/custom-tags/#discovering-tags>automatically discovering custom tags</a> for UI components based on the project directory structure. Marko walks up the directory tree to discover all directories and it will also automatically discover custom tags exported by installed packages. This approach negates the need for explicitly importing a custom tag to reduce the amount of code needed in a Marko template. For example given the following directory structure:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034>.
├── components/
│ ├── hello.marko
│ └── good-bye.marko
└── index.marko
</pre><p>The <code><hello></code> tag and the <code><good-bye></code> tag nested below the <code>components/</code> directory will automatically be made available to the <code>index.marko</code> at the root:</p><!--M#s0-1-0-17-4-343--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-343 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>hello</span> <span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span> />
<<span style=color:#FF4185>good-bye</span> <span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span> />
</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div</span>
<span style=color:#FF4185>hello</span> <span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>
<span style=color:#FF4185>good-bye</span> <span style=color:#A6E22E>name</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>
</pre></div></div><!--M/--><p>This approach also allows editors and IDEs to offer autocompletion for custom tags.</p><h3 id=async><a name=async class=anchor href=#async><span class=header-link></span></a>Async</h3><p>Even after rendering has started, Marko allows parts of the view to be rendered asynchronously using the <a href=/docs/core-tags#await><code><await></code></a> tag as shown in the following Marko template:</p><!--M#s0-1-0-17-4-351--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-351 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>fsp</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>'fs-promise'</span>;
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>filePath</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>__dirname</span> <span style=color:#FF4185>+</span> <span style=color:#FFF066>'/hello.txt'</span>;
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>readPromise</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>fsp</span>.<span style=color:#A6E22E>readFile</span>(<span style=color:#FFFFFF>filePath</span>, {encoding: <span style=color:#FFF066>'utf8'</span>});
<<span style=color:#FF4185>await</span>(<span style=color:#FFFFFF>readPromise</span>)>
<<span style=color:#A6E22E>@then</span>|<span style=color:#FFAC4D>helloText</span>|>
<<span style=color:#FF4185>p</span>><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>helloText</span><span style=color:#66D9EF>}</span></<span style=color:#FF4185>p</span>>
</<span style=color:#A6E22E>@then</span>>
</<span style=color:#FF4185>await</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>fsp</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"fs-promise"</span>;
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>filePath</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>__dirname</span> <span style=color:#FF4185>+</span> <span style=color:#FFF066>"/hello.txt"</span>;
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>readPromise</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>fsp</span>.<span style=color:#A6E22E>readFile</span>(<span style=color:#FFFFFF>filePath</span>, { encoding: <span style=color:#FFF066>"utf8"</span> });
<span style=color:#FF4185>await</span>(<span style=color:#FFFFFF>readPromise</span>)
<span style=color:#A6E22E>@then</span>|<span style=color:#FFAC4D>helloText</span>|
<span style=color:#FF4185>p</span> -- <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>helloText</span><span style=color:#66D9EF>}</span>
</pre></div></div><!--M/--><h3 id=compiler><a name=compiler class=anchor href=#compiler><span class=header-link></span></a>Compiler</h3><p>Marko compiles a template differently based on whether or not it will be used on the server or in the browser. For example, given the following template:</p><!--M#s0-1-0-17-4-356--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-356 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span>>Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span><span style=color:#66D9EF>}</span>!</<span style=color:#FF4185>div</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div</span> -- Hello <span style=color:#66D9EF>${</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span><span style=color:#66D9EF>}</span>!
</pre></div></div><!--M/--><h4 id=compiled-for-the-server><a name=compiled-for-the-server class=anchor href=#compiled-for-the-server><span class=header-link></span></a>Compiled for the server:</h4><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>marko_template</span> <span style=color:#FFFFFF>=</span> <span style=color:#A6E22E>require</span>(<span style=color:#FFF066>"marko/html"</span>).<span style=color:#A6E22E>t</span>(<span style=color:#FFFFFF>__filename</span>),
<span style=color:#FFFFFF>marko_helpers</span> <span style=color:#FFFFFF>=</span> <span style=color:#A6E22E>require</span>(<span style=color:#FFF066>"marko/runtime/html/helpers"</span>),
<span style=color:#FFFFFF>marko_escapeXml</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>marko_helpers</span>.<span style=color:#FFFFFF>x</span>;
<span style=color:#66D9EF>function</span> <span style=color:#A6E22E>render</span>(<span style=color:#FFAC4D>input</span>, <span style=color:#FFAC4D>out</span>) {
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>w</span>(<span style=color:#FFF066>"<div>Hello "</span> <span style=color:#FF4185>+</span> <span style=color:#A6E22E>marko_escapeXml</span>(<span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>) <span style=color:#FF4185>+</span> <span style=color:#FFF066>"!</div>"</span>);
}
</pre><h4 id=compiled-for-the-browser><a name=compiled-for-the-browser class=anchor href=#compiled-for-the-browser><span class=header-link></span></a>Compiled for the browser:</h4><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>marko_template</span> <span style=color:#FFFFFF>=</span> <span style=color:#A6E22E>require</span>(<span style=color:#FFF066>"marko/vdom"</span>).<span style=color:#A6E22E>t</span>(<span style=color:#FFFFFF>__filename</span>);
<span style=color:#66D9EF>function</span> <span style=color:#A6E22E>render</span>(<span style=color:#FFAC4D>input</span>, <span style=color:#FFAC4D>out</span>) {
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>e</span>(<span style=color:#FFF066>"DIV"</span>, <span style=color:#AE81FF>null</span>, <span style=color:#AE81FF>3</span>).<span style=color:#A6E22E>t</span>(<span style=color:#FFF066>"Hello "</span>).<span style=color:#A6E22E>t</span>(<span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>name</span>).<span style=color:#A6E22E>t</span>(<span style=color:#FFF066>"!"</span>);
}
</pre><h3 id=compile-time-code-transforms><a name=compile-time-code-transforms class=anchor href=#compile-time-code-transforms><span class=header-link></span></a>Compile-time code transforms</h3><p>The Marko compiler was built to support compile-time code generators for custom tags and it also provides support for compile-time transforms. While Babel allows code transformations of JavaScript, the Marko compiler provides support for resolving custom tags declaratively and the Marko AST provides for very powerful and simple transformations as shown in the following code for rendering Markdown to HTML at <em>compile-time</em>:</p><p><strong>components/markdown/code-generator.js:</strong></p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>marked</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"marked"</span>;
<span style=color:#FF4185>import</span> { <span style=color:#FFFFFF>removeIndentation</span> } <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./util"</span>;
<span style=color:#FF4185>export</span> <span style=color:#FF4185>default</span> <span style=color:#66D9EF>function</span> <span style=color:#A6E22E>generateCode</span>(<span style=color:#FFAC4D>el</span>, <span style=color:#FFAC4D>codegen</span>) {
<span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>bodyText</span> <span style=color:#FFFFFF>=</span> <span style=color:#A6E22E>removeIndentation</span>(<span style=color:#FFFFFF>el</span>.<span style=color:#FFFFFF>bodyText</span>);
<span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>html</span> <span style=color:#FFFFFF>=</span> <span style=color:#A6E22E>marked</span>(<span style=color:#FFFFFF>bodyText</span>);
<span style=color:#66D9EF>var</span> <span style=color:#FFFFFF>builder</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>codegen</span>.<span style=color:#FFFFFF>builder</span>;
<span style=color:#FF4185>return</span> <span style=color:#FFFFFF>builder</span>.<span style=color:#A6E22E>html</span>(<span style=color:#FFFFFF>builder</span>.<span style=color:#A6E22E>literal</span>(<span style=color:#FFFFFF>html</span>));
}
</pre><p>The <code><markdown></code> tag can then be used as shown below:</p><!--M#s0-1-0-17-4-372--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-372 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>markdown</span>>
> This section demonstrates Markdown in Marko
# Marko is awesome!
- High performance
- Small
- Intuitive
</<span style=color:#FF4185>markdown</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>markdown</span>
--
> This section demonstrates Markdown in Marko # Marko is awesome! - High performance - Small - Intuitive
--
</pre></div></div><!--M/--><p>In this example, after the template is compiled, the <a href=https://github.com/chjj/marked>marked</a> library is no longer needed at render-time.</p><h3 id=tools><a name=tools class=anchor href=#tools><span class=header-link></span></a>Tools</h3><p>Marko and React offer a variety of developer tools. The <a href=https://github.com/marko-js/marko-devtools>Marko developer tools</a> are constantly evolving, but Marko currently provides tools for unit testing UI components, precompiling <code>.marko</code> files and generating configuration-less apps (similar to <a href=https://github.com/facebookincubator/create-react-app>create-react-app</a>). Currently, there are no Marko developer tools that integrate with the browser, but this is something we would like to see in the future. We will go into more detail on the Marko developer tools in a future post.</p><h4 id=ide-and-editor-support><a name=ide-and-editor-support class=anchor href=#ide-and-editor-support><span class=header-link></span></a>IDE and editor support</h4><p>Marko offers syntax highlighting across all major IDEs and editors, as well as on GitHub. Marko provides first-class support for the Atom editor with syntax highlighting, <a href=https://github.com/marko-js/atom-language-marko#autocomplete>Autocomplete</a> for both HTML and custom tags, <a href=https://github.com/marko-js/atom-language-marko#hyperclick>Hyperclick</a> to quickly jump to referenced files and methods, and <a href=https://github.com/marko-js/atom-language-marko#prettyprint>Pretty printing</a> to keep your code readable.</p><hr><h3 id=why-marko><a name=why-marko class=anchor href=#why-marko><span class=header-link></span></a>Why Marko?</h3><p>Here are just a few reasons you should consider using <a href="/">Marko</a> over React:</p><ul><li>Marko requires much less boilerplate.</li><li>Marko has much better performance based on our benchmarks.</li><li>Marko offers a clean and powerful syntax that aligns with HTML while also allowing the full power of JavaScript.</li><li>Marko has much less complexity and a very small runtime.</li><li>Marko has a much lower page weight for faster page loads.</li><li>Marko has strong integrations with Node.js.</li><li>Marko allows for extremely powerful IDE and editor plugins (see the <a href=https://github.com/marko-js/atom-language-marko>Marko plugin for Atom</a> as an example).</li><li>Marko has a powerful compiler that allows new features to be added without introducing bloat.</li><li>eBay relies heavily on Marko and it is being used to build ebay.com (including the mobile web).</li><li>Marko has a strong and growing community on <a href=https://github.com/marko-js/marko>GitHub</a> and in <a href=https://discord.gg/RFGxYGs>Discord</a>.</li></ul><p>Interested in learning more about Marko? If so, you can get additional information on the <a href="/">Marko website</a>. Join the conversation and contribute on <a href=https://github.com/marko-js/marko>GitHub</a> and follow us on <a href=https://twitter.com/MarkoDevTeam>Twitter</a>.</p><a href="https://github.com/marko-js/marko/blob/main/packages/marko/docs/marko-vs-react.md" class=edit-on-github>EDIT <img alt="on GitHub" src=/assets/0bc571bc.svg></a><h2 id=contributors><a name=contributors class=anchor href=#contributors><span class=header-link></span></a> Contributors</h2><p>Helpful? You can thank these awesome people! You can also <a href=https://github.com/marko-js/marko/blob/main/packages/marko/docs/marko-vs-react.md>edit this doc</a> if you see any issues or want to improve it.</p><div class=contributors><a href=https://github.com/DylanPiercey class=contributor><img src=https://avatars.githubusercontent.com/u/4985201?v=4 alt class=photo><span class=name>DylanPiercey</span></a><a href=https://github.com/PersephoneQueenOfFlowers class=contributor><img src=https://avatars.githubusercontent.com/u/5151659?v=4 alt class=photo><span class=name>PersephoneQueenOfFlowers</span></a><a href=https://github.com/mlrawlings class=contributor><img src=https://avatars.githubusercontent.com/u/1958812?v=4 alt class=photo><span class=name>mlrawlings</span></a><a href=https://github.com/tigt class=contributor><img src=https://avatars.githubusercontent.com/u/8072522?v=4 alt class=photo><span class=name>tigt</span></a><a class=contributor><img alt class=photo><span class=name></span></a><a href=https://github.com/marko-js/marko/blob/main/packages/marko/docs/marko-vs-react.md class="contributor you"><div class=photo><span class=icon>+</span></div><span class=name>You?</span></a></div><footer class="site-footer doc-footer"><a href="https://openjsf.org/" class=openjsf><img src=/assets/6876aea9.svg alt> <span><span class=bold>OpenJS</span> <span class=light>Foundation</span></span></a><div class=separator></div><a href=https://github.com/marko-js/marko/blob/main/LICENSE class=osi><img src=/assets/1b70b500.svg alt> MIT License</a><div class=separator></div><a href=https://github.com/eBay class=ebay><img src=/assets/339b8a9e.svg alt=eBay> open source</a></footer></div></div></div></main><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66854919-1', 'markojs.com');
ga('send', 'pageview');
</script><a href=https://discord.gg/marko target=_blank class=discord-button><img src=/assets/78800ea4.svg alt="Chat in Marko's Discord Server"></a><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-1-0-14",0,{}],["s0-1-0-14-12",1,{}],["s0-1-0-15",2,{"currentDoc":"marko-vs-react"}],["s0-1-0-15-9",3,{}],["s0-1-0-17-4-31",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class\u003C/span> {\n <span style=color:#A6E22E>onCreate\u003C/span>() {\n <span style=color:#FFFFFF>this\u003C/span>.<span style=color:#FFFFFF>state\u003C/span> <span style=color:#FFFFFF>=\u003C/span> { count: <span style=color:#AE81FF>0\u003C/span> };\n }\n <span style=color:#A6E22E>increment\u003C/span>(<span style=color:#FFAC4D>delta\u003C/span>) {\n <span style=color:#FFFFFF>this\u003C/span>.<span style=color:#FFFFFF>state\u003C/span>.<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FFFFFF>+=\u003C/span> <span style=color:#FFFFFF>delta\u003C/span>;\n }\n}\n\n<span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>count\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>state\u003C/span>.<span style=color:#FFFFFF>count\u003C/span>;\n\n<<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.click-count\u003C/span>>\n <<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.count\u003C/span> <span style=color:#A6E22E>class\u003C/span><span style=color:#FFFFFF>=\u003C/span>{\n positive: <span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185>>\u003C/span> <span style=color:#AE81FF>0\u003C/span>,\n negative: <span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185><\u003C/span> <span style=color:#AE81FF>0\u003C/span>\n }>\n <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>count\u003C/span><span style=color:#66D9EF>}\u003C/span>\n </<span style=color:#FF4185>div\u003C/span>>\n <<span style=color:#FF4185>button\u003C/span> <span style=color:#66D9EF>on-click\u003C/span>(<span style=color:#FFF066>'increment'\u003C/span>, <span style=color:#FF4185>-\u003C/span><span style=color:#AE81FF>1\u003C/span>)>\n -1\n </<span style=color:#FF4185>button\u003C/span>>\n <<span style=color:#FF4185>button\u003C/span> <span style=color:#66D9EF>on-click\u003C/span>(<span style=color:#FFF066>'increment'\u003C/span>, <span style=color:#AE81FF>1\u003C/span>)>\n +1\n </<span style=color:#FF4185>button\u003C/span>>\n</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class\u003C/span> {\n <span style=color:#A6E22E>onCreate\u003C/span>() {\n <span style=color:#FFFFFF>this\u003C/span>.<span style=color:#FFFFFF>state\u003C/span> <span style=color:#FFFFFF>=\u003C/span> { count: <span style=color:#AE81FF>0\u003C/span> };\n<span style=color:#FFFFFF>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>count\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>state\u003C/span>.<span style=color:#FFFFFF>count\u003C/span>;\n\n<span style=color:#FFFFFF>div\u003C/span>.<span style=color:#FFFFFF>click\u003C/span><span style=color:#FF4185>-\u003C/span><span style=color:#FFFFFF>count\u003C/span>\n <span style=color:#FFFFFF>div\u003C/span> <span style=color:#FFFFFF>class=\u003C/span>[\n <span style=color:#FFF066>\"count\"\u003C/span>,\n {\n positive: <span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185>>\u003C/span> <span style=color:#AE81FF>0\u003C/span>,\n negative: <span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185><\u003C/span> <span style=color:#AE81FF>0\u003C/span>,\n },\n ]\n <span style=color:#FF4185>--\u003C/span> <span style=color:#FFFFFF>$\u003C/span>{<span style=color:#FFFFFF>count\u003C/span>}\n <span style=color:#FFFFFF>button\u003C/span> <span style=color:#FFFFFF>on\u003C/span><span style=color:#FF4185>-\u003C/span><span style=color:#A6E22E>click\u003C/span>(<span style=color:#FFF066>\"increment\"\u003C/span>, <span style=color:#FF4185>-\u003C/span><span style=color:#AE81FF>1\u003C/span>) <span style=color:#FF4185>--\u003C/span> <span style=color:#FF4185>-\u003C/span><span style=color:#AE81FF>1\u003C/span>\n <span style=color:#FFFFFF>button\u003C/span> <span style=color:#FFFFFF>on\u003C/span><span style=color:#FF4185>-\u003C/span><span style=color:#A6E22E>click\u003C/span>(<span style=color:#FFF066>\"increment\"\u003C/span>, <span style=color:#AE81FF>1\u003C/span>) <span style=color:#FF4185>--\u003C/span> <span style=color:#FF4185>+\u003C/span><span style=color:#AE81FF>1\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-198",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>my-component\u003C/span>\n <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"Frank\"\u003C/span>\n <span style=color:#A6E22E>message-count\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#AE81FF>30\u003C/span>\n <span style=color:#A6E22E>visible\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#AE81FF>true\u003C/span>\n <span style=color:#A6E22E>person\u003C/span><span style=color:#FFFFFF>=\u003C/span>{ firstName: <span style=color:#FFF066>'John'\u003C/span>, lastName: <span style=color:#FFF066>'Doe'\u003C/span> }\n <span style=color:#A6E22E>colors\u003C/span><span style=color:#FFFFFF>=\u003C/span>[<span style=color:#FFF066>'red'\u003C/span>, <span style=color:#FFF066>'green'\u003C/span>, <span style=color:#FFF066>'blue'\u003C/span>] />\n\n<<span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>id\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"content\"\u003C/span> <span style=color:#A6E22E>class\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"foo\"\u003C/span>>Hello</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>my-component\u003C/span> [\n <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"Frank\"\u003C/span>\n <span style=color:#A6E22E>message-count\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#AE81FF>30\u003C/span>\n <span style=color:#A6E22E>visible\u003C/span>\n <span style=color:#A6E22E>person\u003C/span><span style=color:#FFFFFF>=\u003C/span>{ firstName: <span style=color:#FFF066>\"John\"\u003C/span>, lastName: <span style=color:#FFF066>\"Doe\"\u003C/span> }\n <span style=color:#A6E22E>colors\u003C/span><span style=color:#FFFFFF>=\u003C/span>[<span style=color:#FFF066>\"red\"\u003C/span>, <span style=color:#FFF066>\"green\"\u003C/span>, <span style=color:#FFF066>\"blue\"\u003C/span>]\n]\n\n<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>#content.foo\u003C/span> -- Hello\n\u003C/pre>"}],["s0-1-0-17-4-210",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import\u003C/span> { <span style=color:#FFFFFF>formatDate\u003C/span> } <span style=color:#FF4185>from\u003C/span> <span style=color:#FFF066>'./util'\u003C/span>;\n\n<span style=color:#FF4185>static\u003C/span> <span style=color:#66D9EF>function\u003C/span> <span style=color:#A6E22E>formatName\u003C/span>(<span style=color:#FFAC4D>person\u003C/span>) {\n <span style=color:#FF4185>return\u003C/span> <span style=color:#FFFFFF>person\u003C/span>.<span style=color:#FFFFFF>firstName\u003C/span> <span style=color:#FF4185>+\u003C/span> <span style=color:#FFF066>' '\u003C/span> <span style=color:#FF4185>+\u003C/span> <span style=color:#FFFFFF>person\u003C/span>.<span style=color:#FFFFFF>lastName\u003C/span>.<span style=color:#A6E22E>charAt\u003C/span>(<span style=color:#AE81FF>0\u003C/span>) <span style=color:#FF4185>+\u003C/span> <span style=color:#FFF066>'.'\u003C/span>;\n}\n\n<span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>person\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>person\u003C/span>;\n\n<<span style=color:#FF4185>div\u003C/span>>\n Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#A6E22E>formatName\u003C/span>(<span style=color:#FFFFFF>person\u003C/span>)<span style=color:#66D9EF>}\u003C/span>!\n <<span style=color:#FF4185>span\u003C/span>>\n You were born on <span style=color:#66D9EF>${\u003C/span><span style=color:#A6E22E>formatDate\u003C/span>(<span style=color:#FFFFFF>person\u003C/span>.<span style=color:#FFFFFF>birthday\u003C/span>)<span style=color:#66D9EF>}\u003C/span>.\n </<span style=color:#FF4185>span\u003C/span>>\n</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import\u003C/span> { <span style=color:#FFFFFF>formatDate\u003C/span> } <span style=color:#FF4185>from\u003C/span> <span style=color:#FFF066>\"./util\"\u003C/span>;\n<span style=color:#FF4185>static\u003C/span> <span style=color:#66D9EF>function\u003C/span> <span style=color:#A6E22E>formatName\u003C/span>(<span style=color:#FFAC4D>person\u003C/span>) {\n <span style=color:#FF4185>return\u003C/span> <span style=color:#FFFFFF>person\u003C/span>.<span style=color:#FFFFFF>firstName\u003C/span> <span style=color:#FF4185>+\u003C/span> <span style=color:#FFF066>\" \"\u003C/span> <span style=color:#FF4185>+\u003C/span> <span style=color:#FFFFFF>person\u003C/span>.<span style=color:#FFFFFF>lastName\u003C/span>.<span style=color:#A6E22E>charAt\u003C/span>(<span style=color:#AE81FF>0\u003C/span>) <span style=color:#FF4185>+\u003C/span> <span style=color:#FFF066>\".\"\u003C/span>;\n}\n<span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>person\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>person\u003C/span>;\n\n<span style=color:#FF4185>div\u003C/span>\n -- Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#A6E22E>formatName\u003C/span>(<span style=color:#FFFFFF>person\u003C/span>)<span style=color:#66D9EF>}\u003C/span>!\n <span style=color:#FF4185>span\u003C/span> -- You were born on <span style=color:#66D9EF>${\u003C/span><span style=color:#A6E22E>formatDate\u003C/span>(<span style=color:#FFFFFF>person\u003C/span>.<span style=color:#FFFFFF>birthday\u003C/span>)<span style=color:#66D9EF>}\u003C/span>.\n\u003C/pre>"}],["s0-1-0-17-4-242",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>id\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"content\"\u003C/span> <span style=color:#A6E22E>class\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"my-component\"\u003C/span>>Hello</<span style=color:#FF4185>div\u003C/span>>\n\n<<span style=color:#FF4185>input\u003C/span> <span style=color:#A6E22E>type\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"text\"\u003C/span> <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"firstName\"\u003C/span> <span style=color:#A6E22E>value\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"John\"\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>#content.my-component\u003C/span> -- Hello\n\n<span style=color:#FF4185>input\u003C/span> <span style=color:#A6E22E>type\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"text\"\u003C/span> <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"firstName\"\u003C/span> <span style=color:#A6E22E>value\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"John\"\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-257",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.counter-message\u003C/span>>\n <<span style=color:#FF4185>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185><\u003C/span> <span style=color:#AE81FF>0\u003C/span>)>\n <<span style=color:#FF4185>div\u003C/span>>Count is negative</<span style=color:#FF4185>div\u003C/span>>\n </<span style=color:#FF4185>if\u003C/span>>\n <<span style=color:#FF4185>else\u003C/span> <span style=color:#A6E22E>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#AE81FF>0\u003C/span>)>\n <<span style=color:#FF4185>div\u003C/span>>Count is zero</<span style=color:#FF4185>div\u003C/span>>\n </<span style=color:#FF4185>else\u003C/span>>\n <<span style=color:#FF4185>else\u003C/span>>\n <<span style=color:#FF4185>div\u003C/span>>Count is positive</<span style=color:#FF4185>div\u003C/span>>\n </<span style=color:#FF4185>else\u003C/span>>\n</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.counter-message\u003C/span>\n <span style=color:#FF4185>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185><\u003C/span> <span style=color:#AE81FF>0\u003C/span>)\n <span style=color:#FF4185>div\u003C/span> -- Count is negative\n <span style=color:#FF4185>else\u003C/span> <span style=color:#A6E22E>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#AE81FF>0\u003C/span>)\n <span style=color:#FF4185>div\u003C/span> -- Count is zero\n <span style=color:#FF4185>else\u003C/span>\n <span style=color:#FF4185>div\u003C/span> -- Count is positive\n\u003C/pre>"}],["s0-1-0-17-4-259",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.counter-message\u003C/span>>\n <<span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185><\u003C/span> <span style=color:#AE81FF>0\u003C/span>)>Count is negative</<span style=color:#FF4185>div\u003C/span>>\n <<span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#AE81FF>0\u003C/span>)>Count is zero</<span style=color:#FF4185>div\u003C/span>>\n <<span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>else\u003C/span>>Count is positive</<span style=color:#FF4185>div\u003C/span>>\n</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.counter-message\u003C/span>\n <span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185><\u003C/span> <span style=color:#AE81FF>0\u003C/span>) -- Count is negative\n <span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>if\u003C/span>(<span style=color:#FFFFFF>count\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#AE81FF>0\u003C/span>) -- Count is zero\n <span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>else\u003C/span> -- Count is positive\n\u003C/pre>"}],["s0-1-0-17-4-269",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>ul\u003C/span>>\n <<span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>>\n <<span style=color:#FF4185>li\u003C/span><span style=color:#A6E22E>.color\u003C/span> <span style=color:#A6E22E>style\u003C/span><span style=color:#FFFFFF>=\u003C/span>{ backgroundColor: <span style=color:#FFFFFF>color\u003C/span> }>\n <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span>\n </<span style=color:#FF4185>li\u003C/span>>\n </<span style=color:#FF4185>for\u003C/span>>\n</<span style=color:#FF4185>ul\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul\u003C/span>\n <span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>\n <span style=color:#FF4185>li\u003C/span><span style=color:#A6E22E>.color\u003C/span> <span style=color:#A6E22E>style\u003C/span><span style=color:#FFFFFF>=\u003C/span>{ backgroundColor: <span style=color:#FFFFFF>color\u003C/span> } -- <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-273",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div\u003C/span> <span style=color:#A6E22E>id\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"content\"\u003C/span>/>\n<<span style=color:#FF4185>h1\u003C/span> <span style=color:#A6E22E>class\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"subheader\"\u003C/span>/>\n<<span style=color:#FF4185>h1\u003C/span> <span style=color:#A6E22E>id\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"pageTitle\"\u003C/span> <span style=color:#A6E22E>class\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"foo bar\"\u003C/span>/>\n\n<span style=color:#8F8F9E><!-- Shorthand equivalent: -->\u003C/span>\n<<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>#content\u003C/span>/>\n<<span style=color:#FF4185>h1\u003C/span><span style=color:#A6E22E>.subheader\u003C/span>/>\n<<span style=color:#FF4185>h1\u003C/span><span style=color:#A6E22E>#pageTitlefoo.bar\u003C/span>/>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>#content\u003C/span>\n<span style=color:#FF4185>h1\u003C/span><span style=color:#A6E22E>.subheader\u003C/span>\n<span style=color:#FF4185>h1\u003C/span><span style=color:#A6E22E>#pageTitle.foo.bar\u003C/span>\n<span style=color:#8F8F9E><!-- Shorthand equivalent: -->\u003C/span>\n<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>#content\u003C/span>\n<span style=color:#FF4185>h1\u003C/span><span style=color:#A6E22E>.subheader\u003C/span>\n<span style=color:#FF4185>h1\u003C/span><span style=color:#A6E22E>.bar#pageTitlefoo\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-283",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>ul\u003C/span>>\n <<span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>>\n <<span style=color:#FF4185>li\u003C/span>><span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span></<span style=color:#FF4185>li\u003C/span>>\n </<span style=color:#FF4185>for\u003C/span>>\n</<span style=color:#FF4185>ul\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul\u003C/span>\n <span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>\n <span style=color:#FF4185>li\u003C/span> -- <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-287",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul\u003C/span>\n <span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>\n <span style=color:#FF4185>li\u003C/span> -- <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul\u003C/span>\n <span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>\n <span style=color:#FF4185>li\u003C/span> -- <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-291",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul\u003C/span>\n <span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>\n <<span style=color:#FF4185>li\u003C/span>><span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span></<span style=color:#FF4185>li\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>ul\u003C/span>\n <span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>color\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>colors\u003C/span>\n <span style=color:#FF4185>li\u003C/span> -- <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>color\u003C/span><span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-312",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div\u003C/span>>Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>.<span style=color:#A6E22E>toUpperCase\u003C/span>()<span style=color:#66D9EF>}\u003C/span></<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div\u003C/span> -- Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>.<span style=color:#A6E22E>toUpperCase\u003C/span>()<span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-314",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class\u003C/span> {\n <span style=color:#A6E22E>onMount\u003C/span>() {\n <span style=color:#8F8F9E>// ...\u003C/span>\n }\n}\n\n<<span style=color:#FF4185>div\u003C/span>>Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>.<span style=color:#A6E22E>toUpperCase\u003C/span>()<span style=color:#66D9EF>}\u003C/span></<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class\u003C/span> {\n <span style=color:#A6E22E>onMount\u003C/span>() {\n <span style=color:#8F8F9E>// ...\u003C/span>\n }\n}\n\n<span style=color:#FF4185>div\u003C/span> -- Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>.<span style=color:#A6E22E>toUpperCase\u003C/span>()<span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-316",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class\u003C/span> {\n <span style=color:#A6E22E>onMount\u003C/span>() {\n <span style=color:#8F8F9E>// ...\u003C/span>\n }\n}\n\n<span style=color:#66D9EF>style\u003C/span><span style=color:#FF4185>.less\u003C/span> {\n <span style=color:#A6E22E>.hello\u003C/span> {\n <span style=color:#66D9EF>color\u003C/span>: <span style=color:#66D9EF>red\u003C/span>;\n }\n}\n\n<<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.hello\u003C/span>>\n Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>.<span style=color:#A6E22E>toUpperCase\u003C/span>()<span style=color:#66D9EF>}\u003C/span>\n</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class\u003C/span> {\n <span style=color:#A6E22E>onMount\u003C/span>() {\n <span style=color:#8F8F9E>// ...\u003C/span>\n }\n}\n\n<span style=color:#66D9EF>style\u003C/span><span style=color:#FF4185>.less\u003C/span> {\n <span style=color:#A6E22E>.hello\u003C/span> {\n <span style=color:#66D9EF>color\u003C/span>: <span style=color:#66D9EF>red\u003C/span>;\n }\n}\n\n<span style=color:#FF4185>div\u003C/span><span style=color:#A6E22E>.hello\u003C/span> -- Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>.<span style=color:#A6E22E>toUpperCase\u003C/span>()<span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-343",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div\u003C/span>>\n <<span style=color:#FF4185>hello\u003C/span> <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> />\n <<span style=color:#FF4185>good-bye\u003C/span> <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> />\n</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div\u003C/span>\n <span style=color:#FF4185>hello\u003C/span> <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>\n <span style=color:#FF4185>good-bye\u003C/span> <span style=color:#A6E22E>name\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-351",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import\u003C/span> <span style=color:#FFFFFF>fsp\u003C/span> <span style=color:#FF4185>from\u003C/span> <span style=color:#FFF066>'fs-promise'\u003C/span>;\n\n<span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>filePath\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>__dirname\u003C/span> <span style=color:#FF4185>+\u003C/span> <span style=color:#FFF066>'/hello.txt'\u003C/span>;\n<span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>readPromise\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>fsp\u003C/span>.<span style=color:#A6E22E>readFile\u003C/span>(<span style=color:#FFFFFF>filePath\u003C/span>, {encoding: <span style=color:#FFF066>'utf8'\u003C/span>});\n\n<<span style=color:#FF4185>await\u003C/span>(<span style=color:#FFFFFF>readPromise\u003C/span>)>\n <<span style=color:#A6E22E>@then\u003C/span>|<span style=color:#FFAC4D>helloText\u003C/span>|>\n <<span style=color:#FF4185>p\u003C/span>><span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>helloText\u003C/span><span style=color:#66D9EF>}\u003C/span></<span style=color:#FF4185>p\u003C/span>>\n </<span style=color:#A6E22E>@then\u003C/span>>\n</<span style=color:#FF4185>await\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import\u003C/span> <span style=color:#FFFFFF>fsp\u003C/span> <span style=color:#FF4185>from\u003C/span> <span style=color:#FFF066>\"fs-promise\"\u003C/span>;\n<span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>filePath\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>__dirname\u003C/span> <span style=color:#FF4185>+\u003C/span> <span style=color:#FFF066>\"/hello.txt\"\u003C/span>;\n<span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>var\u003C/span> <span style=color:#FFFFFF>readPromise\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>fsp\u003C/span>.<span style=color:#A6E22E>readFile\u003C/span>(<span style=color:#FFFFFF>filePath\u003C/span>, { encoding: <span style=color:#FFF066>\"utf8\"\u003C/span> });\n\n<span style=color:#FF4185>await\u003C/span>(<span style=color:#FFFFFF>readPromise\u003C/span>)\n <span style=color:#A6E22E>@then\u003C/span>|<span style=color:#FFAC4D>helloText\u003C/span>|\n <span style=color:#FF4185>p\u003C/span> -- <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>helloText\u003C/span><span style=color:#66D9EF>}\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-356",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div\u003C/span>>Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span><span style=color:#66D9EF>}\u003C/span>!</<span style=color:#FF4185>div\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>div\u003C/span> -- Hello <span style=color:#66D9EF>${\u003C/span><span style=color:#FFFFFF>input\u003C/span>.<span style=color:#FFFFFF>name\u003C/span><span style=color:#66D9EF>}\u003C/span>!\n\u003C/pre>"}],["s0-1-0-17-4-372",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>markdown\u003C/span>>\n\n> This section demonstrates Markdown in Marko\n\n# Marko is awesome!\n\n- High performance\n- Small\n- Intuitive\n\n</<span style=color:#FF4185>markdown\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>markdown\u003C/span>\n --\n > This section demonstrates Markdown in Marko # Marko is awesome! - High performance - Small - Intuitive\n --\n\u003C/pre>"}]],"t":["IZr$9Bl","uja7Vjk","G0dDyNr","wIkyy5p","x0AuQwk"]})</script></body></html>