From 74417c272335e262c0bbab6d97c246c98e345e65 Mon Sep 17 00:00:00 2001
From: Alexander Dorn <alexander.dorn@capgemini.com>
Date: Fri, 31 Jan 2025 13:57:39 +0100
Subject: [PATCH] start introducing new lecture approach

---
 common/css/common.css           |   4 +
 ngrx/intro.html                 | 159 +++++++++++++++++++-------------
 web-app-architecture/index.html |   2 +-
 3 files changed, 100 insertions(+), 65 deletions(-)

diff --git a/common/css/common.css b/common/css/common.css
index 00221e5e..d72b8efa 100644
--- a/common/css/common.css
+++ b/common/css/common.css
@@ -32,6 +32,10 @@
     border: 0;
 }
 
+.reveal .progress {
+    height: 10px;
+}
+
 .devon.reveal section img.reset {
     background: none;
     border: 0;
diff --git a/ngrx/intro.html b/ngrx/intro.html
index 68b49cdc..1257cd66 100644
--- a/ngrx/intro.html
+++ b/ngrx/intro.html
@@ -45,19 +45,6 @@ <h2>Introduction to</h2>
                 <section>
                     <h3>Reactive Architecture</h3>
                 </section>
-                <section>
-                    <h2>Scaling MVC Applications</h2>
-                    <div class="image-box">
-                        <img width="400px" style="margin-right: 50px" src="img/ng-state-everwhere.png">
-                        <ul style="width: 500px">
-                            <li>Debugging?</li>
-                            <li>Testing?</li>
-                            <li>Understanding?</li>
-                            <li>Server Side Rendering?</li>
-                        </ul>
-                    </div>
-                    <p style="font-size: 18px; display:flex"><a href="http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/">http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/</a></p>
-                </section>
                 <section>
                     <p style="font-style: italic">UI = f ( State )</p>
                 </section>
@@ -77,29 +64,6 @@ <h2>Scaling MVC Applications</h2>
                     data-background-image="img/state-example-3.png"
                     data-background-size="40%">
                 </section>
-                <section>
-                    <h2>Which Libraries To Know?</h2>
-                    <div style="display:flex; justify-content: space-around;">
-                        <div class="image-box">
-                            <img width="150px" src="img/react.png" style="margin-right: 20px">
-                            <p class="fragment" data-fragment-index="0" style="font-size: 30px; display:flex"><a href="https://facebook.github.io/react/">React</a></p>
-                        </div>
-                        <div class="image-box">
-                            <img width="150px" src="img/flux.png" style="margin-right: 20px">
-                            <p class="fragment" data-fragment-index="1" style="font-size: 30px; display:flex"><a href="https://facebookarchive.github.io/flux/">Flux</a></p>
-                        </div>
-                    </div>
-                    <div style="display:flex; justify-content: space-around;">
-                        <div class="image-box">
-                            <img width="150px" src="img/redux.png" style="margin-right: 20px">
-                            <p class="fragment" data-fragment-index="2" style="font-size: 30px; display:flex"><a href="http://redux.js.org/">Redux</a></p>
-                        </div>
-                        <div class="image-box">
-                            <img width="150px" src="img/ngrx.png" style="margin-right: 20px">
-                            <p class="fragment" data-fragment-index="3" style="font-size: 30px; display:flex"><a href="https://github.com/ngrx">ngrx</a></p>
-                        </div>
-                    </div>
-                </section>
                 <section
                     data-background-image="img/store-view-actions.png"
                     data-background-size="40%">
@@ -128,37 +92,10 @@ <h2>Reducer Function</h2>
                     <h2>Store - Tree Of Reducers</h2>
                     <img src="img/reducer-composite.png">
                 </section>
-                <section>
-                    <h2>State goes down</h2>
-                    <p>... using Angular <code>@Input</code> syntax.</p>
-                    <img src="img/state-goes-down.png">
-                </section>
-                <section>
-                    <h2>Events go up</h2>
-                    <p>... using Angular <code>@Output</code> syntax.</p>
-                    <img src="img/events-go-up.png">
-                </section>
                 <section>
                     <h2>HTTP Request (XHR)</h2>
                     <img src="img/xhr.png">
                 </section>
-                <section>
-                    <h2>Websockets Push</h2>
-                    <img src="img/websockets-push.png">
-                </section>
-                <section>
-                    <h2>Websockets Pull</h2>
-                    <img src="img/websockets-pull.png">
-                </section>
-                <section>
-                    <h2>Forget Everything And Go Reactive?</h2>
-                    <p>Abstraction is the tradeoff which is not always worth it.</p>
-                    <ul>
-                        <li>For small applications it's simply overkill.</li>
-                        <li>Lack of know how.</li>
-                        <li>Use it when you need it.</li>
-                    </ul>
-                </section>
             </section>
             <section>
                 <section>ngrx in Angular</section>
@@ -229,7 +166,101 @@ <h2>Forget Everything And Go Reactive?</h2>
                     <p>Let's try this out and feel the power of reactive architecture!</p>
                 </section>
             </section>
-
+			<section>
+				<section>
+					<h2>Best practice</h2>
+					<p class="hint center">Checkout <a target="_blank" href="../web-app-architecture/index.html#/smart-vs-dumb-components">dumb vs smart components</a></p>
+				</section>
+				<section>
+                    <h2>State goes down</h2>
+                    <p>... using Angular <code>@Input</code> syntax.</p>
+                    <img src="img/state-goes-down.png">
+                </section>
+                <section>
+                    <h2>Events go up</h2>
+                    <p>... using Angular <code>@Output</code> syntax.</p>
+                    <img src="img/events-go-up.png">
+                </section>
+			</section>
+		  <section>
+		   <section id="summary">
+			<h2>Summary</h2>
+			<ul>
+			 <li>First ...<br>
+			  <ul class="ul-small">
+			   <li>First detail...</li>
+			   <li>Another detail ...</li>
+			  </ul>
+			 </li>
+			 <li>Second ..</li>
+			</ul>
+			<p class="hint center">Live Code Examples & Backup slides below</p>
+		   </section>
+		   <section id="examples" data-visibility="uncounted">
+			<h2>Live Code Examples</h2>
+			<ul>
+			 <li><a href=https://stackblitz.com/edit/stackblitz-starters-ls7pdf?file=src%2Fbook-details.component.ts target="_blank">A link to stackblitz ...</a> Example in Stackblitz</li>
+			 <li><a href=https://stackblitz.com/edit/stackblitz-starters-ls7pdf?file=src%2Fbook-details.component.ts target="_blank">Another example</a> Example somewhere else</li>
+			</ul>
+		   </section>
+		   <section id="backup" data-visibility="uncounted">
+			<h2>Backup slides</h2>
+			<p>Following slides are not subject of the lecture.<br>Ask trainers in case of questions.</p>
+		   </section>
+			<section data-visibility="uncounted">
+				<h2>Scaling MVC Applications</h2>
+				<div class="image-box">
+					<img width="400px" style="margin-right: 50px" src="img/ng-state-everwhere.png">
+					<ul style="width: 500px">
+						<li>Debugging?</li>
+						<li>Testing?</li>
+						<li>Understanding?</li>
+						<li>Server Side Rendering?</li>
+					</ul>
+				</div>
+				<p style="font-size: 18px; display:flex"><a href="http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/">http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/</a></p>
+			</section>
+			<section data-visibility="uncounted">
+				<h2>Which Libraries To Know?</h2>
+				<div style="display:flex; justify-content: space-around;">
+					<div class="image-box">
+						<img width="150px" src="img/react.png" style="margin-right: 20px">
+						<p class="fragment" data-fragment-index="0" style="font-size: 30px; display:flex"><a href="https://facebook.github.io/react/">React</a></p>
+					</div>
+					<div class="image-box">
+						<img width="150px" src="img/flux.png" style="margin-right: 20px">
+						<p class="fragment" data-fragment-index="1" style="font-size: 30px; display:flex"><a href="https://facebookarchive.github.io/flux/">Flux</a></p>
+					</div>
+				</div>
+				<div style="display:flex; justify-content: space-around;">
+					<div class="image-box">
+						<img width="150px" src="img/redux.png" style="margin-right: 20px">
+						<p class="fragment" data-fragment-index="2" style="font-size: 30px; display:flex"><a href="http://redux.js.org/">Redux</a></p>
+					</div>
+					<div class="image-box">
+						<img width="150px" src="img/ngrx.png" style="margin-right: 20px">
+						<p class="fragment" data-fragment-index="3" style="font-size: 30px; display:flex"><a href="https://github.com/ngrx">ngrx</a></p>
+					</div>
+				</div>
+			</section>
+			<section data-visibility="uncounted">
+				<h2>Websockets Push</h2>
+				<img src="img/websockets-push.png">
+			</section>
+			<section data-visibility="uncounted">
+				<h2>Websockets Pull</h2>
+				<img src="img/websockets-pull.png">
+			</section>
+			<section data-visibility="uncounted">
+				<h2>Forget Everything And Go Reactive?</h2>
+				<p>Abstraction is the tradeoff which is not always worth it.</p>
+				<ul>
+					<li>For small applications it's simply overkill.</li>
+					<li>Lack of know how.</li>
+					<li>Use it when you need it.</li>
+				</ul>
+			</section>
+		  </section>
         </div>
     </div>
 
diff --git a/web-app-architecture/index.html b/web-app-architecture/index.html
index 423b20de..18fc8bf8 100644
--- a/web-app-architecture/index.html
+++ b/web-app-architecture/index.html
@@ -383,7 +383,7 @@ <h3>The Angular Component Tree</h3>
                 <h3>Dialog Components</h3>
                 <img class="no-border" src="img/component-tree-highlight.svg">
             </section>
-            <section>
+            <section id="smart-vs-dumb-components">
                 <img style="border: none; box-shadow: none" src="./img/smart-dumb-components-interaction.svg">
                 <p>A <strong>must-know</strong> pattern: Smart vs Dumb Components</p>
             </section>