-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
61 lines (57 loc) · 8.61 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
<!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"><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><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><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>
success<span class="token punctuation">:</span> setUser<span class="token punctuation">,</span>
error<span class="token punctuation">:</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 keyword">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>user<span class="token punctuation">)</span> <span class="token operator">=</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 keyword">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=</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 © 2020 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>