Humla build 20240226085127812Z

lecture1.html

@@ -26,7 +26,8 @@
 
 	<footer>
 		<p><b>#META_LECTURE#: #TITLE#</b>,&nbsp;<span class="meta_semester" />,&nbsp;
-			<span class="meta_twitter" /></p>
+			<span class="meta_twitter" />
+		</p>
 		<p><b>&#8210; #SLIDE_NO# &#8210;</b></p>
 	</footer>
 
@@ -38,7 +39,8 @@ <h2>#META_LECTURE#: #TITLE#</h2>
 		<div class="author">
 			<p class="meta_author" />
 			<p><span class="meta_email" /> &bull; <span class="meta_twitter" /> &bull;
-				<span class="meta_web" /></p>
+				<span class="meta_web" />
+			</p>
 		</div>
 		<center>
 			<div class="meta_logo"></div>
@@ -100,7 +102,7 @@ <h1>Recall: Application Server</h1>
 			<hgroup>
 				<h1>Programming Models</h1>
 			</hgroup>
-						
+
 			<ul class="small">
 				<li>Concurrency</li>
 				<ul>
@@ -124,14 +126,14 @@ <h1>Programming Models</h1>
 					</ul>
 					<li>Threads can access shared memory; you need to controll this</li>
 				</ul>
-			</ul>			
+			</ul>
 		</div>
-		
+
 		<div class="slide">
 			<hgroup>
 				<h1>Asynchronous I/O</h1>
 			</hgroup>
-		
+
 			<ul class="small">
 				<li>Asynchronous I/O</li>
 				<ul>
@@ -143,16 +145,16 @@ <h1>Asynchronous I/O</h1>
 				<ul>
 					<li>Tasks are running in so called <b>event loop</b></li>
 					<li>A task is able to "pause" when they wait for some result</li>
-					<ul>						
+					<ul>
 						<li>A task let other tasks to run</li>
 					</ul>
 					<li>Asynchronous code faciliates concurrent execution</li>
 					<ul>
 						<li>It gives the "look and feel" of concurrent execution</li>
 					</ul>
-			  </ul>			
-	  </div>
-		
+				</ul>
+		</div>
+
 	</section>
 
 	<div class="slide outline"></div>
@@ -164,7 +166,8 @@ <h1>Asynchronous I/O</h1>
 			<hgroup>
 				<h1>Web 2.0 Application Architecture</h1>
 			</hgroup>
-			<div id="1MXZwvAJA_NKdUnVm-1DNBtgFdCsoYSNIjkfaP2Q4TlY" class="h-drawing" style="height: 470px; margin-top: 20px"></div>
+			<div id="1MXZwvAJA_NKdUnVm-1DNBtgFdCsoYSNIjkfaP2Q4TlY" class="h-drawing"
+				style="height: 470px; margin-top: 20px"></div>
 		</div>
 
 		<div class="slide">
@@ -176,7 +179,7 @@ <h1>JavaScript</h1>
 				<li>Client-side (browser) and server-side (node.js, AppsScript)</li>
 				<li>Standard</li>
 				<ul>
-					<li>Current stable release is ECMAScript 2020</li>
+					<li>Current stable release is ECMAScript 2021/June 2021</li>
 				</ul>
 				<li>Major characteristics</li>
 				<ul>
@@ -200,8 +203,9 @@ <h1>JavaScript</h1>
 			<hgroup>
 				<h1>Javascript Runtime</h1>
 			</hgroup>
-			<div id="1kfGhsbXThWPmWqMx6-Y8UkBUlgoaCbiJCFQ7qIIcddQ" format="png" class="h-drawing" style="height: 270px; margin-top: 20px"></div>
-			<ul class="xx-small">	
+			<div id="1kfGhsbXThWPmWqMx6-Y8UkBUlgoaCbiJCFQ7qIIcddQ" format="png" class="h-drawing"
+				style="height: 270px; margin-top: 20px"></div>
+			<ul class="xx-small">
 				<li>Stack</li>
 				<ul>
 					<li>Contains frames, i.e. function parameters and local variables</li>
@@ -222,7 +226,7 @@ <h1>Javascript Runtime</h1>
 			<hgroup>
 				<h1>Stack</h1>
 			</hgroup>
-			<ul class="xx-small">	
+			<ul class="xx-small">
 				<li>When running a program...</li>
 				<pre class="brush: js; class-name: ''">
 					function foo(b) {
@@ -235,7 +239,7 @@ <h1>Stack</h1>
 					  return foo(x * y)
 					}
 
-					console.log(bar(7)) //returns 42</pre>	
+					console.log(bar(7)) //returns 42</pre>
 				<ol style="margin-left: -40px">
 					<li>calling <code>bar</code>: a frame is created with bar's arguments and variables.</li>
 					<li><code>bar</code> calls <code>foo</code>: a new frame with foo's args and vars is created.</li>
@@ -249,20 +253,20 @@ <h1>Stack</h1>
 			<hgroup>
 				<h1>Event Loop</h1>
 			</hgroup>
-			<ul class="xx-small">	
+			<ul class="xx-small">
 				<li>Event loop</li>
 				<pre class="brush: js; class-name: ''">
 	      while (queue.waitForMessage()) {
 	        queue.processNextMessage()
-	      }</pre>	
+	      }</pre>
 				<ul>
 					<li>Message = data + callback to be processed</li>
 					<li>Messages are process completely one by one</li>
 					<ul>
 						<li>No "clashes" across messages' processing</li>
 						<li>Processing should not block for a long time &ndash; Workers</li>
 					</ul>
-					<li>Brwoser adds a new message when an event occurs and there is an event listener</li>			
+					<li>Brwoser adds a new message when an event occurs and there is an event listener</li>
 				</ul>
 				<li>Run-to-completion</li>
 				<ul>
@@ -280,19 +284,20 @@ <h1>Event Loop</h1>
 			<hgroup>
 				<h1>Handling Request</h1>
 			</hgroup>
-			<div class="h-drawing" style="text-align: left; height: 425px" id="1aenRIcg3RqexY-9a1i0Bu2yWKzpSe0j9ULQ9u-gxNis"></div>
+			<div class="h-drawing" style="text-align: left; height: 425px"
+				id="1aenRIcg3RqexY-9a1i0Bu2yWKzpSe0j9ULQ9u-gxNis"></div>
 		</div>
 
 		<div class="slide">
 			<hgroup>
 				<h1>Multiple Runtimes</h1>
 			</hgroup>
-			<ul class="x-small">					
+			<ul class="x-small">
 				<li>Runtime</li>
-					<ul>
-						<li>Stack, Heap, Message Queue</li>
-						<li><code>iframe</code> and a Web worker has its own runtimes</li>
-					</ul>
+				<ul>
+					<li>Stack, Heap, Message Queue</li>
+					<li><code>iframe</code> and a Web worker has its own runtimes</li>
+				</ul>
 				<li>Communication between runtimes</li>
 				<ul>
 					<li>Runtimes communicate via <code>postMessage</code></li>
@@ -336,7 +341,7 @@ <h1>Web Workers</h1>
 				}
 
 				// ... and terminate
-				myWorker.terminate()</pre>	
+				myWorker.terminate()</pre>
 			</ul>
 		</div>
 
@@ -357,7 +362,8 @@ <h1>Node.js</h1>
 						<li>You do not need to deal with concurrency issues</li>
 					</ul>
 					<li>More threads to realize I/O</li>
-					<li>Open sourced, <span id="nodejs-github" class="h-ref">@GitHub</span>, many <span id="nodejs-libs" class="h-ref">libraries</span></li>
+					<li>Open sourced, <span id="nodejs-github" class="h-ref">@GitHub</span>, many <span id="nodejs-libs"
+							class="h-ref">libraries</span></li>
 					<li>Future platform for Web 2.0 apps</li>
 				</ul>
 				<li>Every I/O as an event</li>
@@ -403,7 +409,9 @@ <h1>Node.js Event Loop</h1>
 				<ul>
 					<li>Six phases, each phase has a FIFO queue of callbacks to execute.</li>
 					<ul>
-						<li><b>timers</b> &ndash; executes callbacks sheduled by <code>setTimeout()</code> and <code>setInterval()</code></li>
+						<li><b>timers</b> &ndash; executes callbacks sheduled by <code>setTimeout()</code> and
+							<code>setInterval()</code>
+						</li>
 						<li><b>I/O callbacks</b> &ndash; executes all I/O callbacks except close callbacks.</li>
 						<li><b>idle/prepare</b> &ndash; used internally</li>
 						<li><b>poll</b> &ndash; retrieve new I/O events</li>

toc.json

@@ -1,5 +1,5 @@
 { "lectures" : [
-{"title":"Motivation and Course Overview","slide-url":"lecture0.html#/1","slides":[],"sections":[{"title":"Motivation","slide-url":"lecture0.html#/2","slides":[{"title":"Web 2.0","slide-url":"lecture0.html#/3"},{"title":"Motivation in Brief","slide-url":"lecture0.html#/4"},{"title":"AM2 and AM1 Courses","slide-url":"lecture0.html#/5"}],"sections":[]},{"title":"Scope, Requirements, Learnings","slide-url":"lecture0.html#/6","slides":[{"title":"Scope","slide-url":"lecture0.html#/scope"},{"title":"Organization of Lectures","slide-url":"lecture0.html#/plan"},{"title":"Organization of Practicals","slide-url":"lecture0.html#/9"}],"sections":[]},{"title":"Assessment, Resources, Communication","slide-url":"lecture0.html#/10","slides":[{"title":"Assessment","slide-url":"lecture0.html#/assessment"},{"title":"Assessment – Final Marks","slide-url":"lecture0.html#/12"},{"title":"Resources","slide-url":"lecture0.html#/resources"},{"title":"About Slides","slide-url":"lecture0.html#/humla"}],"sections":[]}],"lastModified":"Mon Feb 19 2024, 08:07:19","slidesCount":14}
+{"title":"Motivation and Course Overview","slide-url":"lecture0.html#/1","slides":[],"sections":[{"title":"Motivation","slide-url":"lecture0.html#/2","slides":[{"title":"Web 2.0","slide-url":"lecture0.html#/3"},{"title":"Motivation in Brief","slide-url":"lecture0.html#/4"},{"title":"AM2 and AM1 Courses","slide-url":"lecture0.html#/5"}],"sections":[]},{"title":"Scope, Requirements, Learnings","slide-url":"lecture0.html#/6","slides":[{"title":"Scope","slide-url":"lecture0.html#/scope"},{"title":"Organization of Lectures","slide-url":"lecture0.html#/plan"},{"title":"Organization of Practicals","slide-url":"lecture0.html#/9"}],"sections":[]},{"title":"Assessment, Resources, Communication","slide-url":"lecture0.html#/10","slides":[{"title":"Assessment","slide-url":"lecture0.html#/assessment"},{"title":"Assessment – Final Marks","slide-url":"lecture0.html#/12"},{"title":"Resources","slide-url":"lecture0.html#/resources"},{"title":"About Slides","slide-url":"lecture0.html#/humla"}],"sections":[]}],"lastModified":"Mon Feb 19 2024, 09:03:51","slidesCount":14}
 ,
 {"title":"Asynchronous I/O","slide-url":"lecture1.html#/1","slides":[],"sections":[{"title":"Asynchronous I/O Overview","slide-url":"lecture1.html#/2","slides":[{"title":"Recall: Application Server","slide-url":"lecture1.html#/3"},{"title":"Programming Models","slide-url":"lecture1.html#/4"},{"title":"Asynchronous I/O","slide-url":"lecture1.html#/5"}],"sections":[]},{"title":"Asynchronous I/O in JavaScript","slide-url":"lecture1.html#/6","slides":[{"title":"Web 2.0 Application Architecture","slide-url":"lecture1.html#/7"},{"title":"JavaScript","slide-url":"lecture1.html#/8"},{"title":"Javascript Runtime","slide-url":"lecture1.html#/9"},{"title":"Stack","slide-url":"lecture1.html#/10"},{"title":"Event Loop","slide-url":"lecture1.html#/11"},{"title":"Handling Request","slide-url":"lecture1.html#/12"},{"title":"Multiple Runtimes","slide-url":"lecture1.html#/13"},{"title":"Web Workers","slide-url":"lecture1.html#/14"},{"title":"Node.js","slide-url":"lecture1.html#/15"},{"title":"Node.js Event Loop","slide-url":"lecture1.html#/16"},{"title":"HTTP Server in Node.js","slide-url":"lecture1.html#/17"},{"title":"Google Apps Script","slide-url":"lecture1.html#/18"}],"sections":[]},{"title":"JavaScript Language Overview","slide-url":"lecture1.html#/19","slides":[{"title":"Objects and Arrays","slide-url":"lecture1.html#/20"},{"title":"Functions","slide-url":"lecture1.html#/21"},{"title":"Closures","slide-url":"lecture1.html#/22"},{"title":"Objects","slide-url":"lecture1.html#/23"},{"title":"Arrow Functions","slide-url":"lecture1.html#/24"},{"title":"Callback Hell","slide-url":"lecture1.html#/25"},{"title":"Promise Object","slide-url":"lecture1.html#/26"},{"title":"Callback Hell Example","slide-url":"lecture1.html#/27"},{"title":"Promise Example","slide-url":"lecture1.html#/28"},{"title":"async/await","slide-url":"lecture1.html#/29"}],"sections":[]}],"lastModified":"Sun Mar 14 2021, 11:18:53","slidesCount":29}
 ,