forked from rkumar0322/DeanJain-Farewell
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PATTERNS.html
250 lines (236 loc) · 87 KB
/
PATTERNS.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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html><html lang="en-US"><head><title>Design Principles and Patterns</title><meta property="og:title" content="Design Principles and Patterns"><meta name="description" content="Design Principles and Patterns PaaC"><meta property="og:description" content="Design Principles and Patterns PaaC"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTAgMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJtMzIgOTAgNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTQwIDcwSDIwVjUwbTIwIDBMMjAgNzBtNDAtNDBoMjB2MjBtLTIwIDAgMjAtMjAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen]{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTIwIDUwaDIwdjIwbS0yMCAwIDIwLTIwbTQwIDBINjBWMzBtMjAgMEw2MCA1MCIvPjwvc3ZnPg==")}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS13aWR0aDo1cHh9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yMCA2MGgtNWE1IDUgMCAwIDEtNS01VjIwYTUgNSAwIDAgMSA1LTVoNjBhNSA1IDAgMCAxIDUgNXY1TTMwIDg1aDYwIi8+PHJlY3QgeD0iMzAiIHk9IjM1IiB3aWR0aD0iNjAiIGhlaWdodD0iNDAiIHJ4PSI1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiLz48cmVjdCBjbGFzcz0iYSIgeD0iMzAiIHk9IjM1IiB3aWR0aD0iNjAiIGhlaWdodD0iNDAiIHJ4PSI1Ii8+PHBhdGggY2xhc3M9ImEiIGQ9Ik00MCA1MGg0ME00MCA2MGgzMCIvPjwvc3ZnPg==") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}}.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{body,html{height:100%;margin:0}body{background:#000;overflow:hidden}svg.bespoke-marp-slide{content-visibility:hidden;opacity:0;pointer-events:none;z-index:-1}svg.bespoke-marp-slide.bespoke-marp-active{content-visibility:visible;opacity:1;pointer-events:auto;z-index:0}svg.bespoke-marp-slide.bespoke-marp-active.bespoke-marp-active-ready *{-webkit-animation-name:__bespoke_marp__!important;animation-name:__bespoke_marp__!important}@supports not (content-visibility:hidden){svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}}[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{bottom:0;left:0;position:absolute;right:0;top:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;will-change:transform;z-index:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>*,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>:first-child,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{height:32px;line-height:32px;width:32px}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive{cursor:none}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}body[data-bespoke-view=""] svg.bespoke-marp-slide,body[data-bespoke-view=next] svg.bespoke-marp-slide{height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent+.bespoke-marp-parent{top:5px}body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar{background:#0288d1;flex:0 0 0;transition:flex-basis .2s cubic-bezier(0,1,1,1)}body[data-bespoke-view=next]{background:transparent}body[data-bespoke-view=presenter]{background:#161616}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container{display:grid;font-family:Helvetica,Arial,sans-serif;grid-template-areas:"current next" "current note" "info note";grid-template-columns:2fr 1fr;grid-template-rows:minmax(140px,1fr) 2fr 3em;height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent{grid-area:current;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide{height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide.bespoke-marp-active{filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container{background:#222;cursor:pointer;display:none;grid-area:next;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container iframe.bespoke-marp-presenter-next{background:transparent;border:0;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container{background:#222;color:#eee;grid-area:note}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note{word-wrap:break-word;box-sizing:border-box;font-size:1.1em;height:calc(100% - 40px);margin:20px;overflow:auto;padding-right:3px;scrollbar-color:hsla(0,0%,93%,.5) transparent;scrollbar-width:thin;white-space:pre-wrap;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar{width:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-track{background:transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-thumb{background:hsla(0,0%,93%,.5);border-radius:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note:empty{pointer-events:none}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:first-child{margin-top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:last-child{margin-bottom:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container{align-items:center;box-sizing:border-box;color:#eee;display:flex;flex-wrap:nowrap;grid-area:info;justify-content:center;padding:0 10px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{box-sizing:border-box;display:block;padding:0 10px;white-space:nowrap;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page{order:2;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page .bespoke-marp-presenter-info-page-text{display:inline-block;min-width:120px;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time{color:#999;order:1;text-align:left}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{color:#999;order:3;text-align:right}}@media print{.bespoke-marp-presenter-info-container,.bespoke-marp-presenter-next-container,.bespoke-marp-presenter-note-container{display:none}}</style><style>@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Lato:400,900|Roboto+Mono:400,700&display=swap");div#p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#p>svg>foreignObject>section h1{font-size:2em;margin:0.67em 0}div#p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:1280px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#p>svg>foreignObject>section{page-break-before:always;break-before:page}div#p>svg>foreignObject>section,div#p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;animation-delay:0s!important;animation-duration:0s!important;color-adjust:exact!important;transition:none!important}div#p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{display:block;height:auto;width:100%}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{position:static}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{content:""}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{position:relative}}div#p>svg>foreignObject>section [data-marp-fitting-svg-content]{display:table;white-space:nowrap;width:-webkit-max-content;width:-moz-max-content;width:max-content}div#p>svg>foreignObject>section [data-marp-fitting-svg-content-wrap]{white-space:pre}div#p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}
/*!
* Marp / Marpit Gaia theme.
*
* @theme gaia
* @author Yuki Hattori
*
* @auto-scaling true
* @size 4:3 960px 720px
*/div#p>svg>foreignObject>section .hljs{background:#000;color:#f8f8f8;display:block;overflow-x:auto;padding:.5em}div#p>svg>foreignObject>section .hljs-comment,div#p>svg>foreignObject>section .hljs-quote{color:#aeaeae;font-style:italic}div#p>svg>foreignObject>section .hljs-keyword,div#p>svg>foreignObject>section .hljs-selector-tag,div#p>svg>foreignObject>section .hljs-type{color:#e28964}div#p>svg>foreignObject>section .hljs-string{color:#65b042}div#p>svg>foreignObject>section .hljs-subst{color:#daefa3}div#p>svg>foreignObject>section .hljs-link,div#p>svg>foreignObject>section .hljs-regexp{color:#e9c062}div#p>svg>foreignObject>section .hljs-name,div#p>svg>foreignObject>section .hljs-section,div#p>svg>foreignObject>section .hljs-tag,div#p>svg>foreignObject>section .hljs-title{color:#89bdff}div#p>svg>foreignObject>section .hljs-class .hljs-title,div#p>svg>foreignObject>section .hljs-doctag{text-decoration:underline}div#p>svg>foreignObject>section .hljs-bullet,div#p>svg>foreignObject>section .hljs-number,div#p>svg>foreignObject>section .hljs-symbol{color:#3387cc}div#p>svg>foreignObject>section .hljs-params,div#p>svg>foreignObject>section .hljs-template-variable,div#p>svg>foreignObject>section .hljs-variable{color:#3e87e3}div#p>svg>foreignObject>section .hljs-attribute{color:#cda869}div#p>svg>foreignObject>section .hljs-meta{color:#8996a8}div#p>svg>foreignObject>section .hljs-formula{background-color:#0e2231;color:#f8f8f8;font-style:italic}div#p>svg>foreignObject>section .hljs-addition{background-color:#253b22;color:#f8f8f8}div#p>svg>foreignObject>section .hljs-deletion{background-color:#420e09;color:#f8f8f8}div#p>svg>foreignObject>section .hljs-selector-class{color:#9b703f}div#p>svg>foreignObject>section .hljs-selector-id{color:#8b98ab}div#p>svg>foreignObject>section .hljs-emphasis{font-style:italic}div#p>svg>foreignObject>section .hljs-strong{font-weight:700}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{max-height:580px}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2,div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4,div#p>svg>foreignObject>section h5,div#p>svg>foreignObject>section h6{margin:.5em 0 0}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{font-weight:inherit}div#p>svg>foreignObject>section h1{font-size:1.8em}div#p>svg>foreignObject>section h2{font-size:1.5em}div#p>svg>foreignObject>section h3{font-size:1.3em}div#p>svg>foreignObject>section h4{font-size:1.1em}div#p>svg>foreignObject>section h5{font-size:1em}div#p>svg>foreignObject>section h6{font-size:.9em}div#p>svg>foreignObject>section blockquote,div#p>svg>foreignObject>section p{margin:1em 0 0}div#p>svg>foreignObject>section ol>li,div#p>svg>foreignObject>section ul>li{margin:.3em 0 0}div#p>svg>foreignObject>section ol>li>p,div#p>svg>foreignObject>section ul>li>p{margin:.6em 0 0}div#p>svg>foreignObject>section code{display:inline-block;font-family:Roboto Mono,monospace;font-size:.8em;letter-spacing:0;margin:-.1em .15em;padding:.1em .2em;vertical-align:baseline}div#p>svg>foreignObject>section pre{display:block;margin:1em 0 0;min-height:1em;overflow:visible}div#p>svg>foreignObject>section pre code{box-sizing:border-box;font-size:.7em;margin:0;min-width:100%;padding:.5em}div#p>svg>foreignObject>section pre code svg[data-marp-fitting=svg]{max-height:calc(580px - 1em)}div#p>svg>foreignObject>section blockquote{margin:1em 0 0;padding:0 1em;position:relative}div#p>svg>foreignObject>section blockquote:after,div#p>svg>foreignObject>section blockquote:before{content:"“";display:block;font-family:Times New Roman,serif;font-weight:700;position:absolute}div#p>svg>foreignObject>section blockquote:before{left:0;top:0}div#p>svg>foreignObject>section blockquote:after{bottom:0;right:0;transform:rotate(180deg)}div#p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#p>svg>foreignObject>section mark{background:transparent}div#p>svg>foreignObject>section table{border-collapse:collapse;border-spacing:0;margin:1em 0 0}div#p>svg>foreignObject>section table td,div#p>svg>foreignObject>section table th{border-style:solid;border-width:1px;padding:.2em .4em}div#p>svg>foreignObject>section:after,div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{box-sizing:border-box;font-size:66%;height:70px;line-height:50px;overflow:hidden;padding:10px 25px;position:absolute}div#p>svg>foreignObject>section:after{--marpit-root-font-size:66%}div#p>svg>foreignObject>section header{top:0}div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{left:0;right:0}div#p>svg>foreignObject>section footer{bottom:0}div#p>svg>foreignObject>section{word-wrap:break-word;--color-background:#fff8e1;--color-background-stripe:rgba(69,90,100,0.1);--color-foreground:#455a64;--color-dimmed:#6a7a7d;--color-highlight:#0288d1;background-color:var(--color-background);background-image:linear-gradient(135deg,hsla(0,0%,53%,0),hsla(0,0%,53%,.02) 50%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05));color:var(--color-foreground);font-family:Lato,Avenir Next,Avenir,Trebuchet MS,Segoe UI,sans-serif;font-size:35px;height:720px;letter-spacing:1.25px;line-height:1.35;padding:70px;width:1280px}div#p>svg>foreignObject>section{--marpit-root-font-size:35px}div#p>svg>foreignObject>section:after{bottom:0;font-size:80%;right:0}div#p>svg>foreignObject>section:after{--marpit-root-font-size:80%}div#p>svg>foreignObject>section a,div#p>svg>foreignObject>section mark{color:var(--color-highlight)}div#p>svg>foreignObject>section code{background:var(--color-dimmed);color:var(--color-background)}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{color:var(--color-highlight)}div#p>svg>foreignObject>section pre>code{background:var(--color-foreground)}div#p>svg>foreignObject>section blockquote:after,div#p>svg>foreignObject>section blockquote:before,div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header,div#p>svg>foreignObject>section section:after{color:var(--color-dimmed)}div#p>svg>foreignObject>section table td,div#p>svg>foreignObject>section table th{border-color:var(--color-foreground)}div#p>svg>foreignObject>section table thead th{background:var(--color-foreground);color:var(--color-background)}div#p>svg>foreignObject>section table tbody>tr:nth-child(odd) td,div#p>svg>foreignObject>section table tbody>tr:nth-child(odd) th{background:var(--color-background-stripe,transparent)}div#p>svg>foreignObject>section>:first-child,div#p>svg>foreignObject>section>header:first-child+*{margin-top:0}div#p>svg>foreignObject>section.invert{--color-background:#455a64;--color-background-stripe:rgba(255,248,225,0.1);--color-foreground:#fff8e1;--color-dimmed:#dad8c8;--color-highlight:#81d4fa}div#p>svg>foreignObject>section.gaia{--color-background:#0288d1;--color-background-stripe:rgba(255,248,225,0.1);--color-foreground:#fff8e1;--color-dimmed:#cce2de;--color-highlight:#81d4fa}div#p>svg>foreignObject>section.lead{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}div#p>svg>foreignObject>section.lead h1,div#p>svg>foreignObject>section.lead h2,div#p>svg>foreignObject>section.lead h3,div#p>svg>foreignObject>section.lead h4,div#p>svg>foreignObject>section.lead h5,div#p>svg>foreignObject>section.lead h6{text-align:center}div#p>svg>foreignObject>section.lead h1 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h2 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h3 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h4 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h5 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h6 svg[data-marp-fitting=svg]{--preserve-aspect-ratio:xMidYMid meet}div#p>svg>foreignObject>section.lead p{text-align:center}div#p>svg>foreignObject>section.lead blockquote>h1,div#p>svg>foreignObject>section.lead blockquote>h2,div#p>svg>foreignObject>section.lead blockquote>h3,div#p>svg>foreignObject>section.lead blockquote>h4,div#p>svg>foreignObject>section.lead blockquote>h5,div#p>svg>foreignObject>section.lead blockquote>h6,div#p>svg>foreignObject>section.lead blockquote>p{text-align:left}div#p>svg>foreignObject>section.lead blockquote svg[data-marp-fitting=svg]:not([data-marp-fitting-math]){--preserve-aspect-ratio:xMinYMin meet}div#p>svg>foreignObject>section.lead ol>li>p,div#p>svg>foreignObject>section.lead ul>li>p{text-align:left}div#p>svg>foreignObject>section.lead table{margin-left:auto;margin-right:auto}div#p>svg>foreignObject>section[data-marpit-scope-eWFsue2F] a{color:#eee}div#p>svg>foreignObject>section[data-marpit-scope-c6YqtNQM]{font-size:24px}div#p>svg>foreignObject>section[data-marpit-scope-c6YqtNQM]{--marpit-root-font-size:24px}div#p>svg>foreignObject>section[data-marpit-scope-ZZ7SYJAe]{font-size:23px}div#p>svg>foreignObject>section[data-marpit-scope-ZZ7SYJAe]{--marpit-root-font-size:23px}div#p>svg>foreignObject>section[data-marpit-scope-jtAT1kUF]{font-size:32px}div#p>svg>foreignObject>section[data-marpit-scope-jtAT1kUF]{--marpit-root-font-size:32px}div#p>svg>foreignObject>section[data-marpit-scope-YLmOI2dU]{font-size:24px}div#p>svg>foreignObject>section[data-marpit-scope-YLmOI2dU]{--marpit-root-font-size:24px}div#p>svg>foreignObject>section[data-marpit-scope-4b57jQt0] h1{color:yellow}div#p>svg>foreignObject>section[data-marpit-scope-4b57jQt0]{font-size:20px}div#p>svg>foreignObject>section[data-marpit-scope-4b57jQt0]{--marpit-root-font-size:20px}div#p>svg>foreignObject>section[data-marpit-scope-KQ7YNUKL]{font-size:20px}div#p>svg>foreignObject>section[data-marpit-scope-KQ7YNUKL]{--marpit-root-font-size:20px}div#p>svg>foreignObject>section[data-marpit-scope-FxGh42xF]{font-size:20px}div#p>svg>foreignObject>section[data-marpit-scope-FxGh42xF]{--marpit-root-font-size:20px}div#p>svg>foreignObject>section[data-marpit-scope-wrs65GrD]{font-size:15px}div#p>svg>foreignObject>section[data-marpit-scope-wrs65GrD]{--marpit-root-font-size:15px}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#p>svg>foreignObject>section[data-marpit-advanced-background=content],div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id="p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-color="#012" style="--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;--color:#012;color:#012;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://pbs.twimg.com/media/DP07zHPW4AIUkkk?format=jpg");background-size:100%;filter:opacity(.5);"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="1" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-color="#012" style="--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;--color:#012;color:#012;" data-marpit-advanced-background="content">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content> Design Principles & Patterns</span></foreignObject></svg></h1>
<p><br /> <br /></p>
<h6>If debugging is the process of removing software bugs, then programming must be the process of putting them in... ~Edsger Dijkstra</h6>
<p><br /><br /></p>
<h3>Dean.Jain - Staff Engineer @Amex</h3>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="color:#012;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-marpit-scope-eWFsue2F="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" data-background-color="#123" data-color="#fff" class="lead" data-marpit-pagination="2" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDqmvKIonQfgPF_7Rk--M4KDCl9xmto8bhWg&usqp=CAU");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="2" data-marpit-scope-eWFsue2F="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" data-background-color="#123" data-color="#fff" class="lead" data-marpit-pagination="2" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h4>Agenda</h4>
<ul>
<li>Intro : What</li>
<li>History : When</li>
<li>Types : What All</li>
<li>Details : How and Why</li>
<li>Discussion Q/A ?</li>
</ul>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section class="lead" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-pagination="2" data-marpit-pagination-total="19"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-scope-c6YqtNQM="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" class="lead" data-marpit-pagination="3" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h5>Software development is a learning process; working code is a side effect!</h5>
<h1>Key Design Principles <img class="emoji" draggable="false" alt="🔑" src="https://twemoji.maxcdn.com/2/svg/1f511.svg" data-marp-twemoji=""/></h1>
<ul>
<li>(<strong>KISS</strong>) Keep It Simple Stupid <img class="emoji" draggable="false" alt="💋" src="https://twemoji.maxcdn.com/2/svg/1f48b.svg" data-marp-twemoji=""/> -> Do The <strong>Simplest</strong> Thing That Could Possibly Work</li>
<li><strong>YAGNI</strong> <img class="emoji" draggable="false" alt="🚯" src="https://twemoji.maxcdn.com/2/svg/1f6af.svg" data-marp-twemoji=""/> -> You Arent Gonna Need It</li>
<li><strong>DRY</strong> <img class="emoji" draggable="false" alt="🔁" src="https://twemoji.maxcdn.com/2/svg/1f501.svg" data-marp-twemoji=""/> -> Dont Repeat Yourself (Single Source of Truth)</li>
<li><strong>Code For The Maintainer</strong> <img class="emoji" draggable="false" alt="📗" src="https://twemoji.maxcdn.com/2/svg/1f4d7.svg" data-marp-twemoji=""/> -> Always code and comment in such a way that if someone a few notches junior checks up the code, they will take pleasure in reading and learning from it.</li>
<li><strong>Avoid Premature Optimization</strong> <img class="emoji" draggable="false" alt="💦" src="https://twemoji.maxcdn.com/2/svg/1f4a6.svg" data-marp-twemoji=""/> -> Make It Work Make It Right Make It Fast</li>
<li><strong>Minimise Coupling</strong> <img class="emoji" draggable="false" alt="👫" src="https://twemoji.maxcdn.com/2/svg/1f46b.svg" data-marp-twemoji=""/> -> Coupling between modules/components is their degree of mutual interdependence; Lower coupling is better. In other words, coupling is the probability that code unit "B" will "break" after an unknown change to code unit "A".</li>
<li><strong>Maximise Cohesion</strong> <img class="emoji" draggable="false" alt="🤝" src="https://twemoji.maxcdn.com/2/svg/1f91d.svg" data-marp-twemoji=""/> -> Cohesion of a single module/component is the degree to which its responsibilities form a meaningful unit; higher cohesion is better.</li>
</ul>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-marpit-scope-ZZ7SYJAe="" data-marpit-fragments="5" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" data-background-color="#123" data-color="#fff" class="lead" data-marpit-pagination="4" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4Wry5epHg-_WRnLzvxdZfWsmpy5AbAa6YXw&usqp=CAU");background-size:80%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="4" data-marpit-scope-ZZ7SYJAe="" data-marpit-fragments="5" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" data-background-color="#123" data-color="#fff" class="lead" data-marpit-pagination="4" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h4>SOLID Principles: <img class="emoji" draggable="false" alt="🪨" src="https://twemoji.maxcdn.com/2/svg/1faa8.svg" data-marp-twemoji=""/></h4>
<ul>
<li data-marpit-fragment="1"><strong>SRP</strong> states that a class should have exactly one responsibility</li>
<li data-marpit-fragment="2"><strong>OCP</strong> - class (or function) should be open for extension but closed for modification</li>
<li data-marpit-fragment="3"><strong>LSP</strong> states that if type S inherits from type T then both T and S should be interchangeable in functions that expect T.</li>
<li data-marpit-fragment="4"><strong>ISP</strong> says to avoid writing monstrous interfaces that burden classes with responsibilities they don't need or want.</li>
<li data-marpit-fragment="5"><strong>DIP</strong> - Instead of writing code that refers to actual classes, you should instead write code that refers to interfaces or perhaps abstract classes</li>
</ul>
<h5>Q: How to Apply Design Principles??</h5>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section class="lead" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-pagination="4" data-marpit-pagination-total="19"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" class="lead" data-marpit-pagination="5" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>What’s a design pattern?</h3>
<ul>
<li>Design patterns are typical <strong>solutions to commonly occurring problems</strong> in software design. <strong>They are like pre-made blueprints</strong> that you can customize to solve a recurring design problem in your code.</li>
<li>The pattern is not a specific piece of code, but <strong>a general concept for solving a particular problem. You can follow the pattern details and implement a solution that suits the realities of your own program</strong>.</li>
<li>Design patterns are a <strong>toolkit of tried and tested solutions to common problems</strong> in software design.</li>
</ul>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-scope-jtAT1kUF="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" data-background-color="#123" data-color="#fff" class="lead" data-marpit-pagination="6" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h4>History:</h4>
<ul>
<li>The concept of patterns was first described by Christopher Alexander in A Pattern Language: Towns, Buildings, Construction.</li>
<li>Erich Gamma, John Vlissides, Ralph Johnson, and Richard Helm In 1994, they published Design Patterns: Elements of Reusable Object-Oriented Software, in which they applied the concept of design patterns to programming.</li>
<li>The book <strong>featured 23 patterns</strong> solving various problems of object-oriented design and became a best-seller very quickly. Due to its lengthy name, people started to call it <strong>“the book by the gang of four”</strong> which was soon shortened to simply <strong>“the GoF book”</strong>.</li>
<li>Many patterns followed...</li>
</ul>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="7" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>Microservices Patterns</h3>
<p><img src="https://microservices.io/i/PatternsRelatedToMicroservices.jpg" alt="width:1100px height:500px" style="width:1100px;height:500px;" /></p>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-scope-YLmOI2dU="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-background-color="#123" data-color="#fff" data-marpit-pagination="8" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>Modern Design Patterns ++</h3>
<ol>
<li>
<p>Circuit Breaker<br />
Acts as a proxy for operations that might fail. The proxy should monitor the number of recent failures that have occurred, and use this information to decide whether to allow the operation to proceed, or simply return an exception immediately. Netflix’s Hystrix or Reselience4J or Envoy proxy can be used to implement it.</p>
</li>
<li>
<p>Sidecar<br />
Envoy Proxy is one of the most popular sidecar proxies, It helps you keep the core functionality of the application separate, using the sidecar to isolate common features like networking, observability, and security.</p>
</li>
<li>
<p>Backend-for-Frontend<br />
build/customize back-end services for the specific front end (Mobile vs desktop), gateway can be used to do redirection based on user agent</p>
</li>
<li>
<p>Strangler<br />
creating a facade on top of your legacy and a new application, providing an abstracted view to the consumers so that cloud migration/moderniazation is easier.</p>
</li>
</ol>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-class="lead" data-theme="gaia" class="lead" data-marpit-pagination="9" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--class:lead;--theme:gaia;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>Classic Design Patterns:</h3>
<ol>
<li>
<p><strong>Creational</strong> patterns provide object creation mechanisms that increase flexibility and reuse of existing code.</p>
</li>
<li>
<p><strong>Structural</strong> patterns explain how to assemble objects and classes into larger structures, while keeping the structures flexible and efficient.</p>
</li>
<li>
<p><strong>Behavioral</strong> patterns take care of effective communication / assignment of responsibilities (algo) between objects.</p>
</li>
</ol>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="10" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://foxlearn.com/images/creation-design-pattern-4c0dd968-cb74-4340.png?ezimgfmt=rs:689x384/rscb4/ng:webp/ngcb4");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="10" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="content">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="10" data-marpit-pagination-total="19"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="11" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://foxlearn.com/images/structural-design-patterns-f4c5795f-4c2e-4b48.png?ezimgfmt=rs:769x434/rscb4/ng:webp/ngcb4");background-size:80%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="11" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="content">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="11" data-marpit-pagination-total="19"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="12" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://foxlearn.com/images/behavioral-design-patterns-36362633-221d-494c.png?ezimgfmt=rs:769x549/rscb4/ng:webp/ngcb4");background-size:70%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="12" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="12" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="content">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="12" data-marpit-pagination-total="19"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-marpit-scope-4b57jQt0="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-background-color="#123" data-color="#fff" data-marpit-pagination="13" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h2>Creational - Factory Method:</h2>
<p>Method, Provides an interface for creating objects in a superclass, but allows subclasses to alter the type of objects that will be created.</p>
<h3>Creational - Abstract Factory</h3>
<p>Object, a super-factory which creates other factories, is also called as factory of factories. lets you produce families of related objects without specifying their concrete classes.</p>
<h3>Creational - Builder</h3>
<p>Construct complex objects step by step (step-by-step initialization of many fields and nested objects). The pattern allows to produce different types and representations of an object using the same construction code.</p>
<h3>Creational - Prototype</h3>
<p>lets you copy existing objects without making your code dependent on their classes. declares a common interface for all objects that support cloning. This interface lets you clone an object without coupling your code to the class of that object.</p>
<h3>Creational - Singleton</h3>
<p>lets you ensure that a class has only one instance, while providing a global access point to this instance.</p>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-marpit-scope-KQ7YNUKL="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="14" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>Structural - Adapter</h3>
<p>allows objects with incompatible interfaces to collaborate (XML -> JSON Adaptor)</p>
<h3>Structural - Bridge</h3>
<p>lets you split a large class or a set of closely related classes into two separate hierarchies (abstraction and implementation) which can be developed independently of each other.</p>
<h3>Structural - Composite</h3>
<p>lets you compose objects into tree structures and then work with these structures as if they were individual objects. Composite class holds a collection of smaller/individual objects.</p>
<h3>Structural - Decorator</h3>
<p>lets you attach new behaviors to objects by placing these objects inside special wrapper objects that contain the old behaviors.</p>
<h3>Structural - Facade</h3>
<p>provides a simplified interface to a library, a framework, or any other complex set of classes. Having a facade is handy when you need to integrate your app with a sophisticated library that has dozens of features, but you just need a tiny bit of its functionality.</p>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="15" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>Structural - Flyweight</h3>
<p>lets you fit more objects into the available amount of RAM by sharing common parts (immutable) of state between multiple objects instead of keeping all of the data in each object.</p>
<h3>Structural - Proxy</h3>
<p>lets you provide a substitute or placeholder for another object. A proxy controls access to the original object, allowing you to perform something either before or after the request gets through to the original object.</p>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-marpit-scope-FxGh42xF="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-background-color="#123" data-color="#fff" data-marpit-pagination="16" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>Behavioral - Chain of Responsibility</h3>
<p>lets you pass requests along a chain of handlers. Upon receiving a request, each handler decides either to process the request or to pass it to the next handler in the chain.</p>
<h3>Behavioral - Command</h3>
<p>turns a request into a stand-alone object that contains all information about the request. This transformation lets you pass requests as a method arguments, delay or queue a request’s execution, and support undoable operations.</p>
<h3>Behavioral - Iterator</h3>
<p>lets you traverse elements of a collection without exposing its underlying representation (list, stack, tree, etc.), Iterators implement various traversal algorithms.</p>
<h3>Behavioral - Mediator/Controller/Gateway</h3>
<p>lets you reduce chaotic dependencies between objects. The pattern restricts direct communications between the objects and forces them to collaborate only via a mediator/controller/gateway object.</p>
<h3>Behavioral - Memento/Snapshot</h3>
<p>lets you save and restore the previous state of an object without revealing the details of its implementation (history of state).</p>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-marpit-scope-wrs65GrD="" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-background-color="#123" data-color="#fff" data-marpit-pagination="17" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h3>Behavioral - Observer/Event-Subscriber/Listener</h3>
<ul>
<li>lets you define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing.</li>
<li>The Observer pattern suggests that you add a subscription mechanism to the publisher class so individual objects can subscribe to or unsubscribe from a stream of events coming from that publisher.</li>
<li>this mechanism consists of 1) an array field for storing a list of references to subscriber objects and 2) several public methods which allow adding subscribers to and removing them from that list.</li>
</ul>
<h3>Behavioral - State</h3>
<p>lets an object alter its behavior when its internal state changes. It appears as if the object changed its class. extract all state-specific code into a set of distinct classes. As a result, you can add new states or change existing ones independently of each other, reducing the maintenance cost.</p>
<h3>Behavioral - Strategy</h3>
<p>lets you define a family of algorithms, put each of them into a separate class, and make their objects interchangeable. take a class that does something specific in a lot of different ways and extract all of these algorithms into separate classes called strategies.</p>
<h3>Behavioral - Template Method</h3>
<p>defines the skeleton of an algorithm in the superclass but lets subclasses override specific steps of the algorithm without changing its structure. break down an algorithm into a series of steps, turn these steps into methods, and put a series of calls to these methods inside a single template method. The steps may either be abstract, or have some default implementation. To use the algorithm, the client is supposed to provide its own subclass, implement all abstract steps, and override some of the optional ones if needed</p>
<h3>Behavioral - Visitor</h3>
<p>lets you separate algorithms from the objects on which they operate. The Visitor pattern suggests that you place the new behavior into a separate class called visitor, instead of trying to integrate it into existing classes. The original object that had to perform the behavior is now passed to one of the visitor’s methods as an argument, providing the method access to all necessary data contained within the object.</p>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-background-color="#123" data-color="#fff" data-marpit-pagination="18" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;--background-color:#123;--color:#fff;color:#fff;background-color:#123;background-image:none;">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<ul>
<li>
<h3>What do you guys think <img class="emoji" draggable="false" alt="👌" src="https://twemoji.maxcdn.com/2/svg/1f44c.svg" data-marp-twemoji=""/><img class="emoji" draggable="false" alt="😊" src="https://twemoji.maxcdn.com/2/svg/1f60a.svg" data-marp-twemoji=""/></h3>
</li>
<li>
<h3>Discussion <img class="emoji" draggable="false" alt="✋" src="https://twemoji.maxcdn.com/2/svg/270b.svg" data-marp-twemoji=""/><img class="emoji" draggable="false" alt="🔓" src="https://twemoji.maxcdn.com/2/svg/1f513.svg" data-marp-twemoji=""/></h3>
</li>
<li>
<h3>Questions <img class="emoji" draggable="false" alt="❓" src="https://twemoji.maxcdn.com/2/svg/2753.svg" data-marp-twemoji=""/><img class="emoji" draggable="false" alt="💡" src="https://twemoji.maxcdn.com/2/svg/1f4a1.svg" data-marp-twemoji=""/></h3>
</li>
</ul>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="19" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://avatars.githubusercontent.com/deanjain");background-size:40%;filter:opacity(.5) blur(10px);"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="19" data-paginate="true" data-header=":copyright: OSS" data-footer="PaaC Rocks :heart:" data-theme="gaia" data-marpit-pagination="19" data-marpit-pagination-total="19" style="--paginate:true;--header::copyright: OSS;--footer:PaaC Rocks :heart:;--theme:gaia;" data-marpit-advanced-background="content">
<header><img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> OSS</header>
<h5>Created by Dean Jain (<a href="https://github.com/deanjain">@dean.jain</a>)</h5>
<br />
<h5>References:</h5>
<ul>
<li><a href="https://refactoring.guru/design-patterns">https://refactoring.guru/design-patterns</a></li>
<li><a href="https://foxlearn.com/design-patterns/what-are-design-patterns-431.html">https://foxlearn.com/design-patterns/what-are-design-patterns-431.html</a></li>
<li><a href="https://en.wikipedia.org/wiki/Design_Patterns">https://en.wikipedia.org/wiki/Design_Patterns</a></li>
<li><a href="https://microservices.io/patterns/microservices.html">https://microservices.io/patterns/microservices.html</a></li>
</ul>
<p>Powered by PaaC (Presentation as a Code) <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/><img class="emoji" draggable="false" alt="💜" src="https://twemoji.maxcdn.com/2/svg/1f49c.svg" data-marp-twemoji=""/><img class="emoji" draggable="false" alt="💚" src="https://twemoji.maxcdn.com/2/svg/1f49a.svg" data-marp-twemoji=""/><img class="emoji" draggable="false" alt="💙" src="https://twemoji.maxcdn.com/2/svg/1f499.svg" data-marp-twemoji=""/></p>
<footer>PaaC Rocks <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/></footer>
</section>
<script>!function(){"use strict";const t="marpitSVGPolyfill:setZoomFactor,",e=Symbol();let r,o;function n(n){const i="object"==typeof n&&n.target||document,a="object"==typeof n?n.zoom:n;window[e]||(Object.defineProperty(window,e,{configurable:!0,value:!0}),window.addEventListener("message",(({data:e,origin:r})=>{if(r===window.origin)try{if(e&&"string"==typeof e&&e.startsWith(t)){const[,t]=e.split(","),r=Number.parseFloat(t);Number.isNaN(r)||(o=r)}}catch(t){console.error(t)}})));let l=!1;Array.from(i.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,n,i,s;t.style.transform||(t.style.transform="translateZ(0)");const c=a||o||t.currentScale||1;r!==c&&(r=c,l=c);const d=t.getBoundingClientRect(),{length:u}=t.children;for(let r=0;r<u;r+=1){const o=t.children[r],a=o.getScreenCTM();if(a){const t=null!==(n=null===(e=o.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==n?n:0,r=null!==(s=null===(i=o.y)||void 0===i?void 0:i.baseVal.value)&&void 0!==s?s:0,l=o.firstElementChild,{style:u}=l;u.transformOrigin||(u.transformOrigin=`${-t}px ${-r}px`),u.transform=`scale(${c}) matrix(${a.a}, ${a.b}, ${a.c}, ${a.d}, ${a.e-d.left}, ${a.f-d.top}) translateZ(0.0001px)`}}})),!1!==l&&Array.from(i.querySelectorAll("iframe"),(({contentWindow:e})=>{null==e||e.postMessage(`${t}${l}`,"null"===window.origin?"*":window.origin)}))}r=1,o=void 0;const i=(t,e,r)=>{if(t.getAttribute(e)!==r)return t.setAttribute(e,r),!0};function a({once:t=!1,target:e=document}={}){const r="Apple Computer, Inc."===navigator.vendor?[n]:[];let o=!t;const a=()=>{for(const t of r)t({target:e});!function(t=document){Array.from(t.querySelectorAll('svg[data-marp-fitting="svg"]'),(t=>{var e;const r=t.firstChild,o=r.firstChild,{scrollWidth:n,scrollHeight:a}=o;let l,s=1;if(t.hasAttribute("data-marp-fitting-code")&&(l=null===(e=t.parentElement)||void 0===e?void 0:e.parentElement),t.hasAttribute("data-marp-fitting-math")&&(l=t.parentElement),l){const t=getComputedStyle(l),e=Math.ceil(l.clientWidth-parseFloat(t.paddingLeft||"0")-parseFloat(t.paddingRight||"0"));e&&(s=e)}const c=Math.max(n,s),d=Math.max(a,1),u=`0 0 ${c} ${d}`;i(r,"width",`${c}`),i(r,"height",`${d}`),i(t,"preserveAspectRatio",getComputedStyle(t).getPropertyValue("--preserve-aspect-ratio")||"xMinYMin meet"),i(t,"viewBox",u)&&t.classList.toggle("__reflow__")}))}(e),o&&window.requestAnimationFrame(a)};return a(),()=>{o=!1}}const l=Symbol(),s=document.currentScript;((t=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(t[l])return t[l];const e=a({target:t}),r=()=>{e(),delete t[l]};Object.defineProperty(t,l,{configurable:!0,value:r})})(s?s.getRootNode():document)}();
</script></foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="19" data-marpit-pagination-total="19"></section></foreignObject></svg></div><div class="bespoke-marp-note" data-index="0" tabindex="0"><p>This is presenter note. You can write down notes through HTML comment.</p></div><div class="bespoke-marp-note" data-index="12" tabindex="0"><p>Scoped style</p></div><script>/*!! License: https://unpkg.com/@marp-team/[email protected]/lib/bespoke.js.LICENSE.txt */
!function(){"use strict";var e=function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),a=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),s={},i=function(e,t){return(t=t||{}).index=a.indexOf(e),t.slide=e,t},o=function(e,t){s[e]=(s[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(s[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){a[e]&&(n&&l("deactivate",i(n,t)),n=a[e],l("activate",i(n,t)))},d=function(e,t){var r=a.indexOf(n)+e;l(e>0?"next":"prev",i(n,t))&&c(r,t)},u={off:o,on:function(e,t){return(s[e]||(s[e]=[])).push(t),o.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return a.indexOf(n);l("slide",i(a[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:a,destroy:function(e){l("destroy",i(n,e)),s={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u};function t(e){e.parent.classList.add("bespoke-marp-parent"),e.slides.forEach((e=>e.classList.add("bespoke-marp-slide"))),e.on("activate",(t=>{const n=t.slide,r=!n.classList.contains("bespoke-marp-active");e.slides.forEach((e=>{e.classList.remove("bespoke-marp-active"),e.setAttribute("aria-hidden","true")})),n.classList.add("bespoke-marp-active"),n.removeAttribute("aria-hidden"),r&&(n.classList.add("bespoke-marp-active-ready"),document.body.clientHeight,n.classList.remove("bespoke-marp-active-ready"))}))}function n(e){let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],a=(r,a)=>{t=r,n=a,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const s=t<r||t===r&&n<=a;e.setAttribute("data-bespoke-marp-fragment",s?"active":"inactive"),t===r&&n===a?e.setAttribute("data-bespoke-marp-current-fragment","current"):e.removeAttribute("data-bespoke-marp-current-fragment")}))})),e.fragmentIndex=a;const s={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:a};e.fire("fragment",s)};e.on("next",(({fragment:s=!0})=>{if(s){if(r(1))return a(t,n+1),!1;const s=t+1;e.fragments[s]&&a(s,0)}else{const r=e.fragments[t].length;if(n+1<r)return a(t,r-1),!1;const s=e.fragments[t+1];s&&a(t+1,s.length-1)}})),e.on("prev",(({fragment:s=!0})=>{if(r(-1)&&s)return a(t,n-1),!1;const i=t-1;e.fragments[i]&&a(i,e.fragments[i].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const a=e.fragments[t];if(a){const{length:e}=a;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}a(t,r)})),a(0,0)}var r,a={exports:{}};r=a,function(){var e="undefined"!=typeof window&&void 0!==window.document?window.document:{},t=r.exports,n=function(){for(var t,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,a=n.length,s={};r<a;r++)if((t=n[r])&&t[1]in e){for(r=0;r<t.length;r++)s[n[0][r]]=t[r];return s}return!1}(),a={change:n.fullscreenchange,error:n.fullscreenerror},s={request:function(t,r){return new Promise(function(a,s){var i=function(){this.off("change",i),a()}.bind(this);this.on("change",i);var o=(t=t||e.documentElement)[n.requestFullscreen](r);o instanceof Promise&&o.then(i).catch(s)}.bind(this))},exit:function(){return new Promise(function(t,r){if(this.isFullscreen){var a=function(){this.off("change",a),t()}.bind(this);this.on("change",a);var s=e[n.exitFullscreen]();s instanceof Promise&&s.then(a).catch(r)}else t()}.bind(this))},toggle:function(e,t){return this.isFullscreen?this.exit():this.request(e,t)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(t,n){var r=a[t];r&&e.addEventListener(r,n,!1)},off:function(t,n){var r=a[t];r&&e.removeEventListener(r,n,!1)},raw:n};n?(Object.defineProperties(s,{isFullscreen:{get:function(){return Boolean(e[n.fullscreenElement])}},element:{enumerable:!0,get:function(){return e[n.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(e[n.fullscreenEnabled])}}}),t?r.exports=s:window.screenfull=s):t?r.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}();var s=a.exports;function i(e){e.fullscreen=()=>{s.isEnabled&&s.toggle(document.body)},document.addEventListener("keydown",(t=>{"f"!==t.key&&"F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!s.isEnabled||(e.fullscreen(),t.preventDefault())}))}function o(e=2e3){return t=>{let n;function r(){n&&clearTimeout(n),n=setTimeout((()=>{t.parent.classList.add("bespoke-marp-inactive"),t.fire("marp-inactive")}),e),t.parent.classList.contains("bespoke-marp-inactive")&&(t.parent.classList.remove("bespoke-marp-inactive"),t.fire("marp-active"))}document.addEventListener("mousedown",r),document.addEventListener("mousemove",r),document.addEventListener("touchend",r),setTimeout(r,0)}}const l=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"];function c(e){e.parent.addEventListener("keydown",(e=>{if(!e.target)return;const t=e.target;(l.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()}))}function d(e){window.addEventListener("load",(()=>{for(const t of e.slides){const e=t.querySelector("[data-marp-fitting]")?"":"hideable";t.setAttribute("data-bespoke-marp-load",e)}}))}var u;function f({interval:e=250}={}){return t=>{document.addEventListener("keydown",(e=>{if(" "===e.key&&e.shiftKey)t.prev();else if("ArrowLeft"===e.key||"ArrowUp"===e.key||"PageUp"===e.key)t.prev({fragment:!e.shiftKey});else if(" "!==e.key||e.shiftKey)if("ArrowRight"===e.key||"ArrowDown"===e.key||"PageDown"===e.key)t.next({fragment:!e.shiftKey});else if("End"===e.key)t.slide(t.slides.length-1,{fragment:-1});else{if("Home"!==e.key)return;t.slide(0)}else t.next();e.preventDefault()}));let n,r,a=0;t.parent.addEventListener("wheel",(s=>{let i=!1;const o=(e,t)=>{e&&(i=i||function(e,t){return function(e,t){const n=t===u.X?"Width":"Height";return e[`client${n}`]<e[`scroll${n}`]}(e,t)&&function(e,t){const{overflow:n}=e,r=e[`overflow${t}`];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r}(getComputedStyle(e),t)}(e,t)),(null==e?void 0:e.parentElement)&&o(e.parentElement,t)};if(0!==s.deltaX&&o(s.target,u.X),0!==s.deltaY&&o(s.target,u.Y),i)return;s.preventDefault();const l=Math.sqrt(Math.pow(s.deltaX,2)+Math.pow(s.deltaY,2));if(void 0!==s.wheelDelta){if(void 0===s.webkitForce&&Math.abs(s.wheelDelta)<40)return;if(s.deltaMode===s.DOM_DELTA_PIXEL&&l<4)return}else if(s.deltaMode===s.DOM_DELTA_PIXEL&&l<12)return;r&&clearTimeout(r),r=setTimeout((()=>{n=0}),e);const c=Date.now()-a<e,d=l<=n;if(n=l,c||d)return;let f;(s.deltaX>0||s.deltaY>0)&&(f="next"),(s.deltaX<0||s.deltaY<0)&&(f="prev"),f&&(t[f](),a=Date.now())}))}}!function(e){e.X="X",e.Y="Y"}(u||(u={}));const p=(...e)=>history.replaceState(...e),m="data-bespoke-view",g="presenter",h="next",v=["",g,h],b=(e,{protocol:t,host:n,pathname:r,hash:a}=location)=>{const s=e.toString();return`${t}//${n}${r}${s?"?":""}${s}${a}`},w=()=>{const e=document.body.getAttribute(m);if(v.includes(e))return e;throw new Error("View mode is not assigned.")},y=e=>new URLSearchParams(location.search).get(e),k=(e,t={})=>{var n;const r=Object.assign({location:location,setter:p},t),a=new URLSearchParams(r.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?a.set(t,n):a.delete(t)}try{r.setter(Object.assign({},null!==(n=window.history.state)&&void 0!==n?n:{}),"",b(a,r.location))}catch(e){console.error(e)}},E={available:(()=>{try{return localStorage.setItem("bespoke-marp","bespoke-marp"),localStorage.removeItem("bespoke-marp"),!0}catch(e){return console.warn("Warning: Using localStorage is restricted in the current host so some features may not work."),!1}})(),get:e=>{try{return localStorage.getItem(e)}catch(e){return null}},set:(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},remove:e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}}};function x(e=".bespoke-marp-osc"){const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[data-bespoke-marp-osc=${JSON.stringify(e)}]`).forEach(n)};return s.isEnabled||n("fullscreen",(e=>e.style.display="none")),E.available||n("presenter",(e=>{e.disabled=!0,e.title="Presenter view is disabled due to restricted localStorage."})),e=>{t.addEventListener("click",(t=>{if(t.target instanceof HTMLElement){const{bespokeMarpOsc:n}=t.target.dataset;switch(n&&t.target.blur(),n){case"next":e.next({fragment:!t.shiftKey});break;case"prev":e.prev({fragment:!t.shiftKey});break;case"fullscreen":"function"==typeof e.fullscreen&&s.isEnabled&&e.fullscreen();break;case"presenter":e.openPresenterView()}}})),e.parent.appendChild(t),e.on("activate",(({index:t})=>{n("page",(n=>n.textContent=`Page ${t+1} of ${e.slides.length}`))})),e.on("fragment",(({index:t,fragments:r,fragmentIndex:a})=>{n("prev",(e=>e.disabled=0===t&&0===a)),n("next",(n=>n.disabled=t===e.slides.length-1&&a===r.length-1))})),e.on("marp-active",(()=>t.removeAttribute("aria-hidden"))),e.on("marp-inactive",(()=>t.setAttribute("aria-hidden","true"))),s.isEnabled&&s.onchange((()=>n("fullscreen",(e=>e.classList.toggle("exit",s.isEnabled&&s.isFullscreen)))))}}function L(e){window.addEventListener("message",(t=>{if(t.origin!==window.origin)return;const[n,r]=t.data.split(":");if("navigate"===n){const[t,n]=r.split(",");let a=Number.parseInt(t,10),s=Number.parseInt(n,10)+1;s>=e.fragments[a].length&&(a+=1,s=0),e.slide(a,{fragment:s})}}))}function S(e){if(!(e=>e.syncKey&&"string"==typeof e.syncKey)(e))throw new Error("The current instance of Bespoke.js is invalid for Marp bespoke presenter plugin.");Object.defineProperties(e,{openPresenterView:{enumerable:!0,value:M},presenterUrl:{enumerable:!0,get:I}}),E.available&&document.addEventListener("keydown",(t=>{"p"!==t.key||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())}))}function M(){const e=Math.max(Math.floor(.85*window.innerWidth),640),t=Math.max(Math.floor(.85*window.innerHeight),360);return window.open(this.presenterUrl,`bespoke-marp-presenter-${this.syncKey}`,`width=${e},height=${t},menubar=no,toolbar=no`)}function I(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),b(e)}var P=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let O=e=>String(e).replace(/[&<>"']/g,(e=>`&${F[e]};`)),F={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},$="dangerouslySetInnerHTML",A={className:"class",htmlFor:"for"},T={};function q(e,t){let n=[],r="";t=t||{};for(let e=arguments.length;e-- >2;)n.push(arguments[e]);if("function"==typeof e)return t.children=n.reverse(),e(t);if(e){if(r+="<"+e,t)for(let e in t)!1!==t[e]&&null!=t[e]&&e!==$&&(r+=` ${A[e]?A[e]:O(e)}="${O(t[e])}"`);r+=">"}if(-1===P.indexOf(e)){if(t[$])r+=t[$].__html;else for(;n.length;){let e=n.pop();if(e)if(e.pop)for(let t=e.length;t--;)n.push(e[t]);else r+=!0===T[e]?e:O(e)}r+=e?`</${e}>`:""}return T[r]=!0,r}const K=({children:e})=>q(null,null,...e),N="bespoke-marp-presenter-container",C="bespoke-marp-presenter-next",D="bespoke-marp-presenter-next-container",j="bespoke-marp-presenter-note-container",X="bespoke-marp-presenter-info-container",R="bespoke-marp-presenter-info-page",U="bespoke-marp-presenter-info-page-text",B="bespoke-marp-presenter-info-page-prev",V="bespoke-marp-presenter-info-page-next",Y="bespoke-marp-presenter-info-time",H="bespoke-marp-presenter-info-timer";function z(e){const{title:t}=document;document.title="[Presenter view]"+(t?` - ${t}`:"");const n={},r=e=>(n[e]=n[e]||document.querySelector(`.${e}`),n[e]);document.body.appendChild((e=>{const t=document.createElement("div");return t.className=N,t.appendChild(e),t.insertAdjacentHTML("beforeend",q(K,null,q("div",{class:D},q("iframe",{class:C,src:"?view=next"})),q("div",{class:j}),q("div",{class:X},q("div",{class:R},q("button",{class:B,tabindex:"-1",title:"Previous"},"Previous"),q("span",{class:U}),q("button",{class:V,tabindex:"-1",title:"Next"},"Next")),q("time",{class:Y,title:"Current time"}),q("div",{class:H})))),t})(e.parent)),(e=>{r(D).addEventListener("click",(()=>e.next()));const t=r(C),n=(a=t,(e,t)=>{var n;return null===(n=a.contentWindow)||void 0===n?void 0:n.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin)});var a;t.addEventListener("load",(()=>{r(D).classList.add("active"),n(e.slide(),e.fragmentIndex),e.on("fragment",(({index:e,fragmentIndex:t})=>n(e,t)))}));const s=document.querySelectorAll(".bespoke-marp-note");s.forEach((e=>{e.addEventListener("keydown",(e=>e.stopPropagation())),r(j).appendChild(e)})),e.on("activate",(()=>s.forEach((t=>t.classList.toggle("active",t.dataset.index==e.slide()))))),e.on("activate",(({index:t})=>{r(U).textContent=`${t+1} / ${e.slides.length}`}));const i=r(B),o=r(V);i.addEventListener("click",(t=>{i.blur(),e.prev({fragment:!t.shiftKey})})),o.addEventListener("click",(t=>{o.blur(),e.next({fragment:!t.shiftKey})})),e.on("fragment",(({index:t,fragments:n,fragmentIndex:r})=>{i.disabled=0===t&&0===r,o.disabled=t===e.slides.length-1&&r===n.length-1}));const l=()=>r(Y).textContent=(new Date).toLocaleTimeString();l(),setInterval(l,250)})(e)}function _(e){const t=w();return t===h&&e.appendChild(document.createElement("span")),{"":S,[g]:z,[h]:L}[t]}function J(e){e.on("activate",(t=>{document.querySelectorAll(".bespoke-progress-parent > .bespoke-progress-bar").forEach((n=>{n.style.flexBasis=100*t.index/(e.slides.length-1)+"%"}))}))}const W=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t};function G(e={}){const t=Object.assign({history:!0},e);return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},a=(t={fragment:!0})=>{((t,n)=>{const{fragments:r,slides:a}=e,s=Math.max(0,Math.min(t,a.length-1)),i=Math.max(0,Math.min(n||0,r[s].length-1));s===e.slide()&&i===e.fragmentIndex||e.slide(s,{fragment:i})})((W(location.hash.slice(1))||1)-1,t.fragment?W(y("f")||""):null)};e.on("fragment",(({index:e,fragmentIndex:r})=>{n||k({f:0===r||r.toString()},{location:Object.assign(Object.assign({},location),{hash:`#${e+1}`}),setter:(...e)=>t.history?history.pushState(...e):history.replaceState(...e)})})),setTimeout((()=>{a(),window.addEventListener("hashchange",(()=>r((()=>{a({fragment:!1}),k({f:void 0})})))),window.addEventListener("popstate",(()=>{n||r((()=>a()))})),n=!1}),0)}}function Q(e={}){var t;const n=e.key||(null===(t=window.history.state)||void 0===t?void 0:t.marpBespokeSyncKey)||Math.random().toString(36).slice(2),r=`bespoke-marp-sync-${n}`;var a;a={marpBespokeSyncKey:n},k({},{setter:(e,...t)=>p(Object.assign(Object.assign({},e),a),...t)});const s=()=>{const e=E.get(r);return e?JSON.parse(e):Object.create(null)},i=e=>{const t=s(),n=Object.assign(Object.assign({},t),e(t));return E.set(r,JSON.stringify(n)),n},o=()=>{window.removeEventListener("pageshow",o),i((e=>({reference:(e.reference||0)+1})))};return e=>{o(),Object.defineProperty(e,"syncKey",{value:n,enumerable:!0});let t=!0;setTimeout((()=>{e.on("fragment",(e=>{t&&i((()=>({index:e.index,fragmentIndex:e.fragmentIndex})))}))}),0),window.addEventListener("storage",(n=>{if(n.key===r&&n.oldValue&&n.newValue){const r=JSON.parse(n.oldValue),a=JSON.parse(n.newValue);if(r.index!==a.index||r.fragmentIndex!==a.fragmentIndex)try{t=!1,e.slide(a.index,{fragment:a.fragmentIndex})}finally{t=!0}}}));const a=()=>{const{reference:e}=s();void 0===e||e<=1?E.remove(r):i((()=>({reference:e-1})))};window.addEventListener("pagehide",(e=>{e.persisted&&window.addEventListener("pageshow",o),a()})),e.on("destroy",a)}}function Z({slope:e=Math.tan(-35*Math.PI/180),swipeThreshold:t=30}={}){return n=>{let r;const a=n.parent,s=e=>{const t=a.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};a.addEventListener("touchstart",(e=>{r=1===e.touches.length?s(e.touches[0]):void 0}),{passive:!0}),a.addEventListener("touchmove",(e=>{if(r)if(1===e.touches.length){e.preventDefault();const t=s(e.touches[0]),n=t.x-r.x,a=t.y-r.y;r.delta=Math.sqrt(Math.pow(Math.abs(n),2)+Math.pow(Math.abs(a),2)),r.radian=Math.atan2(n,a)}else r=void 0})),a.addEventListener("touchend",(a=>{if(r){if(r.delta&&r.delta>=t&&r.radian){let t=r.radian-e;t=(t+Math.PI)%(2*Math.PI)-Math.PI,n[t<0?"next":"prev"](),a.stopPropagation()}r=void 0}}),{passive:!0})}}function ee(e,t,n,r){return new(n||(n=Promise))((function(a,s){function i(e){try{l(r.next(e))}catch(e){s(e)}}function o(e){try{l(r.throw(e))}catch(e){s(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,o)}l((r=r.apply(e,t||[])).next())}))}let te;const ne=()=>(void 0===te&&(te="wakeLock"in navigator&&navigator.wakeLock),te),re=()=>ee(void 0,void 0,void 0,(function*(){const e=ne();if(e)try{return yield e.request("screen")}catch(e){console.warn(e)}return null}));function ae(){return ee(this,void 0,void 0,(function*(){if(!ne())return;let e;const t=()=>{e&&"visible"===document.visibilityState&&re()};return document.addEventListener("visibilitychange",t),document.addEventListener("fullscreenchange",t),e=yield re(),e}))}!function(r=document.getElementById("p")){document.body.setAttribute(m,(()=>{const e=y("view");return e===h||e===g?e:""})());const a=(e=>{const t=y(e);return k({[e]:void 0}),t})("sync")||void 0,s=!1,l=!0;e(r,((...e)=>{const t=v.findIndex((e=>w()===e));if(t<0)throw new Error("Invalid view");return e.map((([e,n])=>e[t]&&n)).filter((e=>e))})([[l,l,s],Q({key:a})],[[l,l,l],_(r)],[[l,l,s],c],[[l,l,l],t],[[l,s,s],o()],[[l,l,l],d],[[l,l,l],G({history:!1})],[[l,l,s],f()],[[l,l,s],i],[[l,s,s],J],[[l,l,s],Z()],[[l,s,s],x()],[[l,l,l],n],[[l,l,s],ae]))}()}();</script><script>window.__marpCliWatchWS="ws://localhost:37717/a4bfc1633945a1053fe4d9b75cbf3fde8bbd485d46ca08d7e36003f5a5584ca7";!function(){"use strict";const e=(n,o=!1)=>{const t=new WebSocket(n);return t.addEventListener("open",(()=>{console.info("[Marp CLI] Observing the change of file..."),o&&location.reload()})),t.addEventListener("close",(()=>{console.warn("[Marp CLI] WebSocket for file watcher was disconnected. Try re-connecting in 5000ms..."),setTimeout((()=>e(n,!0)),5e3)})),t.addEventListener("message",(e=>{"reload"===e.data&&location.reload()})),t};!function(){const n=window.__marpCliWatchWS;if(n)e(n)}()}();</script></body></html>