-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
100 lines (99 loc) · 10.4 KB
/
Copy pathindex.html
File metadata and controls
100 lines (99 loc) · 10.4 KB
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
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>complate: declarative, component-based HTML templating</title><meta name="title" content="complate: declarative, component-based HTML templating"><meta name="og:image" content="https://complate.org/complate_banner_sm.png"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/assets/fonts.css" rel="stylesheet"><link href="/assets/index.css" rel="stylesheet"></head><body><div class="header-area"><div class="title-block"><div class="container"><img class="logo" src="complate.png"><div class="title-area"><h1>complate</h1><p>component-based templating</p><p>declarative • composable • portable</p></div></div></div></div><div class="container header-area">
<p>complate is a JSX-based HTML templating library.
Components serve as <a href="#components">declarative markup abstractions</a>
that are <a href="#portability">reusable across multiple languages and frameworks</a>.</p>
<figure class="code-sample">
<div class="input" aria-label="complate Template">
<pre><code class="language-jsx"><Card title="Hello World">
<p>lorem ipsum dolor sit amet</p>
</Card>
</code></pre>
</div>
<div class="output" aria-label="HTML Output">
<pre><code class="language-html"><article class="card">
<h3 class="card-title">Hello World</h3>
<div class="card-body">
<p>lorem ipsum dolor sit amet</p>
</div>
</article>
</code></pre>
</div>
<figcaption>
This <code>Card</code> component is <a href="#components">implemented as a JavaScript function</a>.
</figcaption>
</figure>
</div>
<div class="container">
<div class="icon-heading">
<div class="badge">
<svg class="icon" role="presentation">
<use href="#icon-server-heart"></use>
</svg>
</div>
<h2 id="stateless-rendering">Stateless HTML Rendering</h2>
</div>
<p>complate focuses on efficiently <a href="https://adactio.com/journal/16404">generating HTML</a>,
with support for <a href="faq.html#progressive-rendering">progressive rendering</a>.
This makes complate a templating language ideal for <a href="https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/">server-side rendering</a>,
though <a href="https://www.innoq.com/en/blog/self-contained-custom-elements/">client-side templating</a> (including <a href="faq.html#universal-rendering">universal rendering</a>) is not uncommon.</p>
<p>This classical approach to templating means generating HTML is a one-time “fire-and-forget” operation;
there is no component life cycle as far as complate is concerned.</p>
<div class="icon-heading">
<div class="badge">
<svg class="icon" role="presentation">
<use href="#icon-component"></use>
</svg>
</div>
<h2 id="components">Components</h2>
</div>
<p>Componentization is at the heart of the <a href="rationale.html">benefits of abstraction and composition</a>.
complate’s markup abstractions – called <a href="faq.html#macro">macros</a> – encapsulate a component’s internal HTML structures and highlight its dynamic constituents via explicit input parameters.
This avoids error-prone copy-and-paste workflows and allows authors to focus on content by composing high-level structures, making view code more concise, declarative, and expressive.</p>
<pre><code class="language-jsx">function Card({ title }, ...children) {
return <article class="card">
<h3 class="card-title">{title}</h3>
<div class="card-body">
{children}
</div>
</article>;
}
</code></pre>
<div class="icon-heading">
<div class="badge">
<svg class="icon" role="presentation">
<use href="#icon-jsx"></use>
</svg>
</div>
<h2 id="jsx-and-javascript">JSX and JavaScript</h2>
</div>
<p><a href="what-is-jsx.html">JSX</a> is an extension of JavaScript, pioneered by React.
Thus we can rely on JavaScript’s extensive ecosystem for modularization, tooling, sharing code, etc.
complate users benefit from the tools available in this established ecosystem.</p>
<p><span id="portability"></span>
JavaScript also enables complate’s portability: A JavaScript runtime can be embedded in almost any modern environment (e.g. V8, Nashorn, GraalVM), so macros can be reused across platforms, independent of technology choice.</p>
<p>Note that this also means authors need basic familiarity with JavaScript and a compilation step is required to turn JSX macros into executable JavaScript.
See <a href="#getting-started">Getting Started</a> for integration with server-side frameworks.</p>
<div class="icon-heading">
<div class="badge">
<svg class="icon" role="presentation">
<use href="#icon-getting-started"></use>
</svg>
</div>
<h2 id="getting-started">Getting Started</h2>
</div>
<p>We currently have support for complate for developing components in a styleguide and for porting components accross several different platforms.
<a href="getting-started.html">View this guide</a> to see all of the different options that we have available.</p>
<div class="icon-heading">
<div class="badge">
<svg class="icon" role="presentation">
<use href="#icon-faq"></use>
</svg>
</div>
<h2 id="faq">Frequently Asked Questions</h2>
</div>
<p>Please view our <a href="faq.html">FAQ</a> for more details and
a glossary of complate terminology.
There you’ll also find guidance on whether complate is suitable for your purposes.</p>
</div>
<footer><a href="https://innoq.com/en/impressum/">imprint</a><a href="https://innoq.com/en/datenschutz">privacy</a></footer><svg class="icon-definitions" hidden><defs><symbol id="icon-arrow-right" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;fill-rule:evenodd;}</style></defs><title>arrow-right-1</title><path class="cls-1" d="M5.5.75,16.22,11.47a.749.749,0,0,1,0,1.06L5.5,23.25"></path></symbol><symbol id="icon-server-heart" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>server-heart</title><path class="a" d="M5.25,4.875a.375.375,0,1,0,.375.375.375.375,0,0,0-.375-.375h0"></path><path class="a" d="M5.25,13.875a.375.375,0,1,0,.375.375.375.375,0,0,0-.375-.375h0"></path><path class="a" d="M21.75,5.25a4.5,4.5,0,0,1-4.5,4.5h-12a4.5,4.5,0,0,1,0-9h12A4.5,4.5,0,0,1,21.75,5.25Z"></path><path class="a" d="M9,18.75H5.25a4.5,4.5,0,0,1,0-9h12"></path><line class="a" x1="10.5" y1="5.25" x2="17.25" y2="5.25"></line><path class="a" d="M17.251,23.25l-5.114-5.335a3.025,3.025,0,0,1-.567-3.492h0a3.026,3.026,0,0,1,4.846-.786l.835.835.835-.835a3.025,3.025,0,0,1,4.845.786h0a3.023,3.023,0,0,1-.566,3.492Z"></path></symbol><symbol id="icon-component" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>module-three-2</title><path class="a" d="M1.723,13.033A1.5,1.5,0,0,0,.75,14.438v5.625a1.5,1.5,0,0,0,.973,1.4l4.5,1.687a1.5,1.5,0,0,0,1.054,0l4.5-1.687a1.5,1.5,0,0,0,.973-1.4V14.438a1.5,1.5,0,0,0-.973-1.405l-4.5-1.687a1.5,1.5,0,0,0-1.054,0Z"></path><polyline class="a" points="1.008 13.597 6.75 15.75 12.492 13.597"></polyline><line class="a" x1="6.75" y1="15.75" x2="6.75" y2="23.25"></line><path class="a" d="M22.95,3.85l-8.7,2.9-8.7-2.9"></path><line class="a" x1="14.25" y1="6.75" x2="14.25" y2="10.5"></line><path class="a" d="M5.25,8.25V4.75A1.5,1.5,0,0,1,6.276,3.327l7.5-2.5a1.493,1.493,0,0,1,.948,0l7.5,2.5A1.5,1.5,0,0,1,23.25,4.75v8.5a1.5,1.5,0,0,1-1.026,1.423L15.75,16.831"></path></symbol><symbol id="icon-jsx" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>monitor-code-send</title><path class="a" d="M3.822,8.25v-6A1.65,1.65,0,0,1,5.589.75h15.9a1.65,1.65,0,0,1,1.766,1.5v10.5a1.65,1.65,0,0,1-1.766,1.5H17.25"></path><line class="a" x1="3.822" y1="5.25" x2="23.25" y2="5.25"></line><path class="a" d="M.75,22.05a1.32,1.32,0,0,0,1.413,1.2H12.837a1.32,1.32,0,0,0,1.413-1.2v-9.6a1.32,1.32,0,0,0-1.413-1.2H2.163A1.32,1.32,0,0,0,.75,12.45Z"></path><polyline class="a" points="6.048 15 9.581 17.325 6.048 19.65"></polyline><path class="a" d="M18.8,23.25c1.137,0,1.8-1.256,1.8-2.25V17.25"></path><polyline class="a" points="23.25 19.65 20.533 17.25 17.815 19.65"></polyline></symbol><symbol id="icon-getting-started" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>startup-launch</title><path class="a" d="M17.25,5.25h1.5a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H16.5"></path><path class="a" d="M7.5,15.75H5.25a1.5,1.5,0,0,1-1.5-1.5V6.75a1.5,1.5,0,0,1,1.5-1.5h1.5"></path><path class="a" d="M18.571,15.75a3,3,0,0,1,2.683,1.658l1.836,3.671a1.5,1.5,0,0,1-1.342,2.171H2.252A1.5,1.5,0,0,1,.91,21.079l1.836-3.671A3,3,0,0,1,5.429,15.75"></path><path class="a" d="M14.25,3.956C14.25,2.185,12,.75,12,.75S9.75,2.185,9.75,3.956v7.481h4.5Z"></path><path class="a" d="M9.75,11.437H7.012a.6.6,0,0,1-.445-.186.432.432,0,0,1-.1-.416A5.118,5.118,0,0,1,9.75,7.687"></path><path class="a" d="M14.25,11.437h2.738a.6.6,0,0,0,.444-.186.43.43,0,0,0,.1-.416A5.129,5.129,0,0,0,14.25,7.687"></path><line class="a" x1="10.5" y1="14.25" x2="10.5" y2="16.5"></line><line class="a" x1="13.5" y1="14.25" x2="13.5" y2="18.75"></line></symbol><symbol id="icon-faq" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>conversation-question-warning-1</title><path class="a" d="M19.707,6.747A9.1,9.1,0,1,0,3.422,14.638L.75,20.25l5.612-2.672A9.079,9.079,0,0,0,9.75,18.841"></path><path class="a" d="M8.25,7.125A1.875,1.875,0,1,1,10.125,9"></path><line class="a" x1="10.125" y1="11.25" x2="10.125" y2="11.25"></line><path class="a" d="M10.125,11.25a.375.375,0,1,0,.375.375.375.375,0,0,0-.375-.375"></path><path class="a" d="M17.882,10.5a5.344,5.344,0,0,1,4.026,8.886l.671,3.864-3.5-2.158a5.364,5.364,0,1,1-1.2-10.592Z"></path><line class="a" x1="17.25" y1="14.25" x2="17.25" y2="17.25"></line></symbol></defs></svg><script src="https://unpkg.com/prismjs@1.15.0/prism.js"></script><script src="https://unpkg.com/prismjs@1.15.0/components/prism-jsx.min.js"></script></body></html>