-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (183 loc) · 10.5 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visualizing Cloud Architectures in Real Time with d3.js</title>
<meta name="author" content="Julie Ng">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/vendor/revealjs/css/reset.css">
<link rel="stylesheet" href="assets/vendor/revealjs/css/reveal.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="assets/vendor/prism-monokai.css">
<!-- Tidy Styles -->
<link rel="stylesheet" href="assets/css/styles.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'assets/vendor/revealjs/css/print/pdf.css' : 'assets/vendor/revealjs/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<footer class="presentation-footer">Julie Ng | NodeConf EU | November 2019</footer>
<div class="slides">
<section class="presentation-title">
<h1>Visualizing Cloud Architectures in Real Time with d3.js</h1>
<ul>
<li>
<p>
Julie Ng<br>
Cloud Solution Architect, Microsoft
</p>
</li>
<li>
<p>
NodeConf EU<br>
Kilkenny, Ireland<br>
12 November 2019
</p>
</li>
</ul>
<aside class="notes">
<ul>
<li>Cloud - powerful technologies</li>
<li>Cloud - trade-offs?</li>
<li>operational complexities</li>
<li>Hypothesis: technology can't beat us humans.</li>
</ul>
</aside>
</section> <section data-markdown="slides/0-speaker-julie.md" data-separator-notes="^Note:"></section> <section>
<section class="section-title" data-background-image="images/intro/yiran-ding-478037-unsplash.jpg">
<span class="section-number">1</span>
<h1>Welcome to the Cloud</h1>
<h2>From monoliths to microservices<br> and beyond</h2>
<aside class="notes">
<ul>
<li>Let's look back </li>
<li>how we got to where we are today.</li>
</ul>
</aside>
</section> <section data-markdown="slides/1-intro/1-hello-world.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/2-add-devices.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/3-bffs.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/3-m-view-10k.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/3-n-view-5k.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/3-o-view-ground.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/5-architecture.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/5-downtime.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/1-intro/5-spaghetti.md" data-separator-notes="^Note:"></section> <section class="section-conclusion center">
<p>Takeaway #1</p>
<h1>Cloud is complex and not perfect</h1>
<h2>Neither are we ;-)</h2>
</section> </section>
<section>
<section class="section-title" data-background-image="./images/tobias-fischer-185901-unsplash.jpg">
<span class="section-number">2</span>
<h1>How do you Document Architecture?</h1>
<h2>What did we <em>intend</em> to build?</h2>
<aside class="notes">
<ul>
<li>Get overview of complexity?</li>
<li>Start with architecture</li>
<li>What did we <strong>intend to build?</strong></li>
</ul>
</aside>
</section> <section data-markdown="slides/2-architecture-monitoring/1-classic-documentation.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/2-architecture-monitoring/1-example-relationships.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/2-architecture-monitoring/1-role-monitoring.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/2-architecture-monitoring/2-grafana.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/2-architecture-monitoring/3a-imagination.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/2-architecture-monitoring/3b-reality-diverse.md" data-separator-notes="^Note:"></section> <section class="slide-quote">
<h1>Conway's Law</h1>
<blockquote>
<p>Organizations which design systems... are constrained to produce designs which are <strong>copies</strong> of the communication structures of these organizations.</p>
<cite>- Melvin Conway, "How Do Committees Invent?” Datamation (April 1968).</cite>
</blockquote>
<aside class="notes">
<strong>Neither.</strong>
<ul>
<li>What if no one “designs” architecture?</li>
<li>That's what Conway's Law implies.</li>
<li><strong>It's not about technology</strong>, e.g. Monoliths vs. Mircoservices</li>
</ul>
<strong>It's about people.</strong>
</aside>
</section>
<section class="section-conclusion center">
<p>Takeaway #2</p>
<h1>Computers are useless.<br>They only give you answers.</h1>
<p>
– Pablo Picasso
</p>
<aside class="notes">
<ul>
<li>We use technology to find solutions</li>
<li>But are we asking the right question?</li>
<li><strong>Conclusion</strong>: Hard to tame architecture, because it's organic.</li>
</ul>
</aside>
</section>
</section>
<section>
<section class="section-title" data-background-image="./images/samuel-zeller-lbXJyflMzss-unsplash.jpg">
<span class="section-number">3</span>
<h1>Let's build our own Architecture Visualization</h1>
<h2>What did we <em>intend</em> to design?</h2>
<aside class="notes">
<ul>
<li>I had a vision</li>
<li>Visualize intended architecture</li>
<li>in real time</li>
</ul>
</aside>
</section> <section data-markdown="slides/2-diy-graph/0b-goals.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/2-diy-graph/0b-health-check-2.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/2-diy-graph/6-usp-relationships.md" data-separator-notes="^Note:"></section> <section class="section-conclusion center">
<p>Takeaway #3</p>
<h1>DIY - Scratch your own need</h1>
<h2>and share - make it open source ❤</h2>
<aside class="notes">
<ul>
<li>Probably not alone with this problem</li>
<li>Started over Thanksgiving 2018</li>
</ul>
</aside>
</section> </section>
<section>
<section class="section-title" data-background-image="./images/newton/large-documents.png">
<span class="section-number">3</span>
<h1>Network Graphs with D3.js </h1>
<aside class="notes">
<ul>
<li>Yes I built something</li>
<li>Newton.js - open source</li>
<li>Walk through how and what I learned</li>
</ul>
</aside>
</section> <section data-markdown="slides/3-d3/0c-d3.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/1-data-driven.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/2-example-data.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/3a-general-update-pattern.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/3b-pattern-example.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/3c-pattern-new-syntax.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/5-links.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/7a-layout-d3.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/7b-layout-webcola.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/all-together.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/3-d3/result.md" data-separator-notes="^Note:"></section> </section>
<section data-markdown="slides/8-demo.md" data-separator-notes="^Note:"></section> <section>
<section data-markdown="slides/closing/9-0-designer-jr.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/closing/9-0-designer-sr.md" data-separator-notes="^Note:"></section> <section data-markdown="slides/closing/9-closing.md" data-separator-notes="^Note:"></section> </section>
</div>
</div>
<script src="assets/vendor/revealjs/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
center: false,
hash: true,
history: true,
width: 1280,
height: 720,
margin: 0.1,
slideNumber: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info /~https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'assets/vendor/revealjs/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'assets/vendor/revealjs/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
// { src: 'assets/vendor/revealjs/plugin/highlight/highlight.js', async: true },
// { src: 'assets/vendor/revealjs/plugin/search/search.js', async: true },
// { src: 'assets/vendor/revealjs/plugin/zoom-js/zoom.js', async: true },
{ src: 'assets/vendor/revealjs/plugin/notes/notes.js', async: true },
{ src: 'assets/vendor/revealjs/plugin/notes-server/client.js', async: true },
{ src: 'assets/vendor/prism.js', async: true }
// { src: 'https://platform.twitter.com/widgets.js', async: true }
]
})
</script>
</body>
</html>