-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
_index.html
185 lines (164 loc) · 5.13 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Marble Design System</title>
</head>
<body>
<p>
<h1>Rx Marble Design System</h1>
<h4>A design system to visualize functional reactive programming with <a
href="https://github.com/ReactiveX" title="ReactiveExtensions">ReactiveExtensions</a>
</h4>
As this is work in progress and the migration will take some time
we refer to the current version <a
href="https://docs.google.com/presentation/d/1LlVmTEcoc1LRV00Tp-rDp4kopI-NobC9S2w-w5pC_JA/edit?usp=sharing">here</a>
<hr>
<blockquote>
There's more to picture,<br>
then meets the eye.<br>
Hey hey, my my.<br>
Neil Young
</blockquote>
<hr>
<h1>The idea behind the MarbleDesignSystem</h1>
<p>
Marble diagrams serve a method for us to visualize processes over time.
This helps programmers and engineers to understand and design reactive
processes.
<br>
The overall goal of the MarbleDesignSystem is to provide a unified way of
reading and creating stream based diagrams,
in particular one specific type of it, the marble diagrams.
<br>
This guide explains all building blocks of the design system step by step and
in detail.
</p>
<p>
In general we have some main rules that system follows:
</p>
<ul>
<li>Consistent</li>
<li>Intuitive</li>
<li>Easy</li>
<li>Detailed</li>
<li>Customizable</li>
</ul>
<h2>Consistency</h2>
<p>
There are several things to follow if you try to create a standard. One of
them if more critical for a positive outcome than everything else,
consistency.
By working with a standardized, reproducible approach we managed to create a
consistent way of drawing marble diagrams.
A set of rules developed over many many iterations, adopted and simplified to
serve as a guideline and blueprint for creating and using these diagrams.
</p>
<h2>Intuitive</h2>
<p>
As programming with Rx is hard we made sure to keep it intuitive.
By including a lot of people into the process of the creation of this guide we
collected a lot of personal feedback to improve the system.
To make sure we consider a common way interpretation we created several public
polls we were collected and evaluated the general understanding.
This helped us to make our system intuitive to understand.
</p>
<h2>Easy</h2>
<p>
As mindset behind the system are several principles. One of them is “Easy to
adopt and create”, which means we want to provide a way for everybody to read
and create marble diagrams.
To achieve this we create all diagrams in either googleSlides oder Powerpoint.
We believe this two options enable a big group of people to edit and draw
these diagrams.
</p>
<h2>Detailed</h2>
<p>
Marble diagrams exist since a long time now. As there was no well thought
standard out there and not all edge cases considered, people started to create
their own solutions to visualize processes. These let to a variety of
different ways of drawing these diagrams. Some of the better approaches were
able to visualize more complex prozesses, but there is one essential thing
which nobody considered yet, but which is most critical to understand
processes based on Rx. The internal behavior of operators.
This system is not only providing a consistent, standardized way of drawing
marble diagrams, but also offers a way to visualize the internals of
operators. Of course based on the systems rules it selfe.
</p>
<h2>Customizable</h2>
<p>
TODO
</p>
<h5>Index</h5>
<ul>
<li>
Design Tokens
<ul>
<li>Unit</li>
<li>Font</li>
<li>Color</li>
<li>Shape</li>
<li>Line</li>
<li>Size</li>
</ul>
</li>
<li>
Components
<ul>
<li>Time</li>
<li>Time progress</li>
<li>Point in time</li>
<li>Consumer event</li>
<li>Notification</li>
<li>Complete</li>
<li>Error</li>
<li>Operator</li>
<li>Operator context</li>
<li>Operation</li>
</ul>
</li>
<li>
Diagram
<ul>
<li>Description</li>
<li>Legend</li>
<li>Marble diagram</li>
</ul>
</li>
<li>Beyond the standard</li>
</ul>
<h1>Design Tokens</h1>
<h2>Unit</h2>
<img src="./assets/design-system/unit_block.jpg">
<img src="./assets/design-system/unit_block-grid.jpg">
<img src="./assets/design-system/unit_block-vs-frame.jpg">
<img src="./assets/design-system/unit_block-frame-timeline.jpg">
<h2>FONT</h2>
<h3>FONT-FACE</h3>
<h3>FONT-SIZE</h3>
<h3>FONT-STYLE</h3>
<p>
Text is used to name things or give more information to a specific part of a
diagram like observables, operators and events like subscribe or unsubscribe.
It is furthermore used in notifications to give more detailed information about
their content.
</p>
<h1>Links</h1>
<ul>
<li>
<a href="https://bit.ly/rx-marble-design-system_slides">rx marble design
system (google slides)</a>
</li>
<li>
<a href="http://bit.ly/rx-marble-design-system-repo">rx marble design
system (github repo)</a>
</li>
<li>
<a href="https://bit.ly/rx-marble-design-system_issue">rx marble design
system (rxjs github issue)</a>
</li>
</ul>
</body>
</html>