-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlecture0.html
378 lines (347 loc) · 10.2 KB
/
lecture0.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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
<!DOCTYPE html>
<!--
Web 2.0, CTU course slides
(cc) 2010-2014 Tomas Vitvar, [email protected]
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="course" content="Web 2.0" />
<meta name="lecture" content="Lecture 00" />
<meta name="keywords" content="motivation, scope, requirements, labs, resources" />
<link type="text/css" rel="stylesheet" href="css/meta.css">
</link>
<link type="text/css" rel="stylesheet" href="css/ctu-fit.css">
</link>
<link type="text/css" rel="stylesheet" href="humla/lib/core/humla.css">
</link>
<script type="text/javascript" src="humla/lib/humla.js"></script>
<title>Motivation and Course Overview</title>
</head>
<body>
<footer>
<p><b>#TITLE#</b>, <span class="meta_semester" />,
<span class="meta_twitter" />
</p>
<p><b>‒ #SLIDE_NO# ‒</b></p>
</footer>
<div class="slide intro">
<hgroup>
<h1><span class="meta_course" /></h1>
<h2>#TITLE#</h2>
</hgroup>
<div class="author">
<p class="meta_author" />
<p><span class="meta_email" /> • <span class="meta_twitter" /> •
<span class="meta_web" />
</p>
</div>
<center>
<div class="meta_logo"></div>
</center>
<div class="org">
<p class="meta_org" />
<p><span class="meta_orgfac" /> • <span class="meta_field" />
• <span class="meta_orgweb" /></p>
</div>
<div class="etc">
<div class="text-info">
Modified: #LAST_MODIFIED#<br />
Humla v#HUMLA_VERSION#
</div>
<a href="http://creativecommons.org/licenses/by-sa/3.0/">
<div class="license"></div>
</a>
<div class="oppa"></div>
</div>
</div>
<div class="slide outline"></div>
<section>
<header>Motivation</header>
<div class="slide">
<hgroup>
<h1>Web 2.0</h1>
</hgroup>
<ul>
<li>A new version of the Web?</li>
<li>Principles</li>
<ul>
<li>Read-Write Web</li>
<li><b>Programmable Web</b></li>
<li><b>Realtime Web</b></li>
<li>Social Web</li>
</ul>
</ul>
</div>
<div class="slide">
<hgroup>
<h1>Motivation in Brief</h1>
</hgroup>
<ul>
<li>Need for highly performant and scalable apps</li>
<ul>
<li>Sudden increase in traffic</li>
<li>Slashdot effect</li>
</ul>
<li>The Web is programmable</li>
<ul>
<li>Applications provide <b>data</b> and <b>functionality</b></li>
<li>Users – end-users (GUI) and programmers (API)</li>
<li>Any company with a Web presence has an API</li>
<ul>
<li>Google, Amazon, LinkedIn, Facebook, ...</li>
</ul>
</ul>
</ul>
</div>
<div class="slide">
<hgroup>
<h1>AM2 and AM1 Courses</h1>
</hgroup>
<ul class="x-small">
<li><b>AM2 builds on AM1</b></li>
<li>Application Architecture</li>
<ul>
<li>Multi-tier client-server architecture</li>
<li>Cloud native and microservices</li>
<li>Interface of the app, REST</li>
<li>Client side of the architecture, JavaScript, AJAX</li>
<li>Infrastructure empowered by cloud technologies</li>
</ul>
<li>Technology, Platform</li>
<ul>
<li>JavaScript</li>
<ul>
<li>client-side + related technologies</li>
<li>server-side – asynchronous I/O, node.js</li>
</ul>
<li>It does not mean you cannot combine technologies</li>
<ul>
<li>Node.js as a Web server, ESB for proxy services with back-end systems,
all running in a cloud environment (auto scaling, load balancers, message queues, etc.)</li>
</ul>
</ul>
</ul>
</div>
</section>
<div class="slide outline"></div>
<section>
<header>Scope, Requirements, Learnings</header>
<div class="slide" id="scope">
<hgroup>
<h1>Scope</h1>
</hgroup>
<ul class="small">
<li>Advanced HTTP</li>
<ul>
<li>Same origin policy, cross-origin</li>
<li>OAuth, Open ID, JWT</li>
<li>Realtime Web protocols</li>
</ul>
<li>Cloud Architectures</li>
<ul>
<li>Details of some IaaS and PaaS services</li>
<li>Cloud Native, Microservice Architecture</li>
<li>Containers</li>
<li>Docker, Kubernetes</li>
</ul>
</ul>
</div>
<div class="slide" id="plan">
<hgroup>
<h1>Organization of Lectures</h1>
</hgroup>
<ul class="x-small">
<li>12 Lectures</li>
<ul>
<li>Czech: <a href="https://timetable.fit.cvut.cz/new/courses/NI-AM2">Mon 11:00-12:30</a>, TH:A-s134
</li>
</ul>
<li>Plan</li>
<ul class="xx-small">
<li>19.02.2024 – Motivation and Course Overview</li>
<li>26.02.2024 – Asynchronous I/O</li>
<li>04.03.2024 – Browser Networking (SOP, CORS)</li>
<li>11.03.2024 – Security (concepts, TLS, JWT)</li>
<li>18.03.2024 – Security (OAuth, OpenID)</li>
<li>25.03.2024 – Protocols for the Realtime Web (streaming, SSE)</li>
<li>01.04.2024 – Easters</li>
<li>08.04.2024 – Protocols for the Realtime Web (WebSocket)</li>
<li>15.04.2024 – Cloud Architectures (introduction, IaaS)</li>
<li>22.04.2024 – Microservices design patterns</li>
<li>29.04.2024 – Containers and Docker</li>
<li>06.05.2024 – Kubernetes 1</li>
<li>13.05.2024 – Kubernetes 2</li>
</ul>
</ul>
</div>
<div class="slide">
<hgroup>
<h1>Organization of Practicals</h1>
</hgroup>
<ul class="x-small">
<li>Work alone, you can collaborate</li>
<li>Practicals every second week</li>
<li>Number of sessions: 6-7, 5 major tasks</li>
<ol>
<li>Introduction, JavaScript</li>
<li>CORS/JSONP</li>
<li>OAuth (JWT)</li>
<li>Realtime Web</li>
<li>TBD</li>
</ol>
<li>Plus a number of tasks to complete at home</li>
</ul>
</div>
</section>
<div class="slide outline">
</div>
<section>
<header>Assessment, Resources, Communication</header>
<div class="slide" id="assessment">
<hgroup>
<h1>Assessment</h1>
</hgroup>
<ul class="small">
<li>Labs</li>
<ul>
<li>Presence is mandatory</li>
<ul>
<li>You can miss up to 1 lab without sending regrets</li>
</ul>
<li>Total maximum points: P=40</span></li>
<ul>
<li>exercises for labs + your activity + your homeworks</li>
</ul>
<li><b>to pass</b>:
P >= 20</li>
</ul>
<li>Final exam</li>
<ul class="x-small">
<li>Mandatory written test: 3 parts, ~1 hour</li>
<ul>
<li>each gives you a max. of 20 points, the total
E = 60</span> points</li>
<li>you must have at least 50% of points from each theme covered by a test part and 50%
of points in total</li>
</ul>
<li>Final score:</li>
<ul>
<li>P + E = 100</span> maximum points</li>
<li>The more points you have from labs, the better for the exam!</li>
</ul>
</ul>
</ul>
</div>
<div class="slide">
<hgroup>
<h1>Assessment – Final Marks</h1>
</hgroup>
<center>
<table class="prettytable" style="margin-top: 30px; margin-bottom: 30px; width: 450px">
<caption>Source:
http://www.cvut.cz/pracoviste/pravni-odbor/dokumenty/studijni-predpisy/studijnirad.pdf</caption>
<thead>
<tr>
<th>Mark</th>
<th>Points</th>
<th>In words</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>100–90</td>
<td>výborně</td>
</tr>
<tr>
<td>B</td>
<td>89–80</td>
<td>velmi dobře</td>
</tr>
<tr>
<td>C</td>
<td>79–70</td>
<td>dobře</td>
</tr>
<tr>
<td>D</td>
<td>69–60</td>
<td>uspokojivě</td>
</tr>
<tr>
<td>E</td>
<td>59–50</td>
<td>dostatečně</td>
</tr>
<tr>
<td>F</td>
<td>49–0</td>
<td>nedostatečně</td>
</tr>
</tbody>
</table>
</center>
<ul>
<li>Everything good and bad will count</li>
<ul>
<li>practicals, coding, (pro-)activity, passiveness, <br />
hacking, lectures, exam, cheating, ...</li>
</ul>
</ul>
</div>
<div class="slide" id="resources">
<hgroup>
<h1>Resources</h1>
</hgroup>
<ul class="small">
<li>Online sources</li>
<ul class="x-small">
<li><a href="https://courses.fit.cvut.cz/NI-AM2/">https://courses.fit.cvut.cz/NI-AM2/</a> –
lectures and labs information</li>
<li><a href="http://w20.vitvar.com">http://w20.vitvar.com</a> – both html and pdf (1 and 2
slides per page)</li>
</ul>
<li>Books</li>
<ul class="xx-small">
<li>I. Grikorik: <i>High Performance Browser Networking</i>, O'Reily 2013</li>
<li>B. Burns: <i>Designing Distributed Systems</i>, O'Reily 2018</li>
<li>L. Richardson, M. Amundsen: <i>RESTful Web APIs</i>, O'Reilly Media, May 2015,
ISBN 978-1-449-35806-8.</li>
</ul>
<li>Other</li>
<ul>
<li>Many sources on the Web, to be listed throughout the course</li>
<li>A lot of W3C sources, Web architecture, HTTP</li>
</ul>
</ul>
</div>
<div class="slide" id="humla">
<hgroup>
<h1>About Slides</h1>
</hgroup>
<ul class="x-small">
<li>Humla – Open Source HTML5 Presentation Environment</li>
<ul>
<li>every slide has a unique URL</li>
<li>all figures linked with Google drawings</li>
<li>possible to format and print in PDF</li>
<li>running local, with back-end NodeJS support, and offline</li>
<li>Fork it at <a href="https://github.com/tomvit/humla">Humla github repo</a></li>
</ul>
<li>Keys</li>
<ul class="no-bullet spacing xx-small">
<li><span class="key">1</span>  default browsing mode</li>
<li><span class="key">2</span>  slideshow mode (automatically scales to full screen)</li>
<li><span class="key">3</span>  grid (overview) mode</li>
<li><span class="key">4</span>  print mode, 2 slides per page</li>
<li><span class="key">←</span>  slide left</li>
<li><span class="key">→</span>  slide right</li>
<li><span class="key">d</span>  debug mode</li>
<li><span class="key">e</span>  toggle last error messages on/off</li>
</ul>
</ul>
</div>
</section>
</body>
</html>