-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
211 lines (167 loc) · 5.08 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
<!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>
<link rel = "stylesheet"
type = "text/css"
href = "./assets/css/index.css" />
<link rel = "stylesheet"
type = "text/css"
href = "./assets/css/flexboxgrid.css" />
</head>
<body class="page">
<h1>Rx Marble Design System</h1>
<h4>
A library and framework agnostic design system to visualize functional
reactive programming with <a href="https://github.com/ReactiveX"
title="ReactiveExtensions">ReactiveExtensions</a>
</h4>
<p>
As this is work in progress and the migration will take some time
we refer to the current version in form of a <a
href="https://github.com/BioPhoton/Rx-Marble-Design-System/raw/master/Rx-Marble-Design-System.pdf">PDF</a>.
</p>
<br>
<hr>
<br>
<div>
<img
src="https://github.com/BioPhoton/Rx-Marble-Design-System/raw/master/assets/design-system/cover_v2.png">
</div>
<br>
<hr>
<br>
<h1> The idea behind the MarbleDesignSystem </h1>
<p>
<b>
Diagrams have the unique ability to express complex things simply.
<br>
Never had reactive programming been made so visual.
<br>
Diagrams is transforming information into compelling images
</b>
</p>
<p>
Marble diagrams serve a <b>method for </b>
us to visualize processes over time.
This helps programmers and engineers to understand and design reactive
processes.
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.
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 is more <b>critical for a positive outcome </b>
than everything else, <b>consistency</b>.
</p>
<p>
By working with a <b>standardized, reproducible approach </b>
we managed to create <b> a consistent way </b> of drawing marble diagrams.
<b> A set of rules </b> developed over many many iterations, adopted and
simplified to serve as a guideline and blueprint for <b> creating and
using </b>
these diagrams.
</p>
<h2>Intuitive</h2>
<p>
As programming with Rx is hard we made sure to keep it intuitive.
</p>
<p>
By <b> including </b>a lot of <b>people</b> into the process of the creation
of this guide we collected a lot of <b>personal feedback</b> to improve the
system.
</p>
<p>
To make sure we consider <b> a common way</b> interpretation we created
several <b>public polls</b>
we were collected and evaluated the general understanding.
This helped us to make our system <b>intuitive to understand</b>.
</p>
<h2>
Easy
</h2>
<p>
As mindset behind the system are several principles.
One of them is <b>“Easy to adopt and create”</b>, which means we want to
provide <b>a way for everybody</b> to
<b>read and create</b> marble diagrams.
</p>
<p>
To achieve this we create all diagrams in either googleSlides oder Powerpoint.
We believe this two options <b> enable</b> a big group of <b>people</b> to <b>edit
and draw </b> 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.
</p>
<p>
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>
<h1>
Design Tokens
</h1>
<div class="row">
<div class="col-xs-12
col-sm-8
col-md-6
col-lg-4">
<img src="./assets/design-system/unit_block.JPG"
alt="Unit Block" title="Unit Block">
<img src="./assets/design-system/unit_block-frame-timeline.JPG"
alt="Frame Timeline" title="Frame Timeline">
</div>
<div class="col-xs-12
col-md-6">
<p>The unit for width and height in marble diagrams is called a block.
A block is a rectangle with equal width and height.
Positioning of objects and text is also measured in blocks.
To have a convenient unit we use em with the base of 1 blok.
Sometimes time matters. The smallest unit of time is called frame.
A frame is a unit for time and expressed in width. 1 frame equals to the width of 2 blocks.
</p>
</div>
</div>
</body>
</html>