-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
84 lines (80 loc) · 8.9 KB
/
index.html
File metadata and controls
84 lines (80 loc) · 8.9 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
<!doctype html>
<html>
<head>
<title>Cerebral Docs</title>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
href="/images/favicons/favicon-32x32.png"
sizes="32x32"
/>
<link
rel="icon"
type="image/png"
href="/images/favicons/favicon-16x16.png"
sizes="16x16"
/>
<link rel="manifest" href="/images/favicons/manifest.json" />
<link
rel="mask-icon"
href="/images/favicons/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/main.css" />
<link rel="stylesheet" href="/prism.css" />
<link rel="stylesheet" href="/index.css" />
<link rel="stylesheet" href="/docs.css" />
</head>
<body>
<div id="app"><link rel="preload" as="image" href="/images/debugger.png"/><div class="index-container"><div style="background:url(/images/cerebral.png);background-repeat:no-repeat;background-size:contain;background-position:center;width:100%;height:25vh"></div><h1 class="index-title">Cerebral</h1><div class="docs-doc"><div class="docs-doc-content"><div style="display:flex;justify-content:space-around;margin:0 50px 50px 50px"><div style="background-image:url(/images/vuejs.png);background-position:center;background-size:cover;width:5vw;height:5vw"></div><div style="background-image:url(/images/react.png);background-position:center;background-size:cover;width:5vw;height:5vw"></div><div style="background-image:url(/images/angular.png);background-position:center;background-size:cover;width:5vw;height:5vw"></div><div style="background-image:url(/images/preact.jpg);background-position:center;background-size:cover;width:5vw;height:5vw"></div><div style="background-image:url(/images/inferno.png);background-position:center;background-size:cover;width:5vw;height:5vw"></div></div><div class="index-buttons"><a href="/docs/introduction" class="button">GET STARTED</a><a href="/docs/api" class="button">API</a></div><p>It makes perfect sense for us to write our UIs with declarative code. The reason is that we need to reuse UI elements and compose them together in different configurations. UIs are complex.</p><div class="index-example-row"><div><p><strong>DECLARATIVE</strong></p><pre><code class="language-js"><span class="token operator"><</span>ul<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span>Item <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span>li<span class="token operator">></span>Item <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span></code></pre></div><div><p><strong>IMPERATIVE</strong></p><pre><code class="language-js"><span class="token keyword">const</span> list <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'ul'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> item1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> item2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span>
item1<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'Item 1'</span>
item2<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'Item 2'</span>
list<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>item1<span class="token punctuation">)</span>
list<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>item2<span class="token punctuation">)</span></code></pre></div></div><p>But what about our application logic? Applications are becoming more complex in nature as we push the boundaries of user experiences.
The code we write to manage this complexity would also benefit from having the same properties as our UI code.</p><div class="index-example-row"><div><p><strong>DECLARATIVE</strong></p><pre><code class="language-js"><span class="token punctuation">[</span>
<span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
getUser<span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">success</span><span class="token operator">:</span> setUser<span class="token punctuation">,</span>
<span class="token literal-property property">error</span><span class="token operator">:</span> setError
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span></code></pre></div><div><p><strong>IMPERATIVE</strong></p><pre><code class="language-js"><span class="token keyword">function</span> <span class="token function">getUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>isLoading <span class="token operator">=</span> <span class="token boolean">true</span>
ajax<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/user'</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>data <span class="token operator">=</span> user
<span class="token keyword">this</span><span class="token punctuation">.</span>isLoading <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> error
<span class="token keyword">this</span><span class="token punctuation">.</span>isLoading <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span></code></pre></div></div><p>A declarative approach to application logic also allows us to build developer tools that builds the mental image of this complexity for you:</p><p><img src="/images/debugger.png" alt="debugger"/></p><div class="index-buttons"><a href="/docs/introduction" class="button">GET STARTED</a><a href="/docs/api" class="button">API</a></div><div class="index-release">Released under the MIT License<br/>Copyright © 2026 Cerebral Github Organisation</div></div></div></div></div>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-106773030-1"
></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'UA-106773030-1')
</script>
</body>
</html>