updated presentation

The slide show in the `./page` direcotry can be rendered to the `./page` direcotry using,

```bash

pandoc -t revealjs -s aidatho_tc_web_app_presentation.md -o aidatho_tc_web_app_presentation.html --include-in-header=header.html --slide-level=2 --citeproc --csl=apa-5th-edition.csl --bibliography=references.bib --verbose

pandoc -t revealjs aidatho_tc_web_app_presentation.md \

  --slide-level=2 \

  --include-in-header=header.html \

  <meta charset="utf-8">

  <meta name="generator" content="pandoc">

  <meta name="author" content="Markus Mößler">

  <meta name="dcterms.date" content="2025-12-20">

  <meta name="dcterms.date" content="2025-04-15">

  <title>AIDAHO Tinkering Club: Web App</title>

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<section id="title-slide">

  <h1 class="title">AIDAHO Tinkering Club:<br>Web App</h1>

  <p class="author">Markus Mößler</p>

  <p class="date">December 20, 2025</p>

  <p class="date">April 15, 2025</p>

</section>

<section>

<h2 class="small-header">What is a Web Application?</h2>

<div style="font-size: 20pt">

<ul>

<li>A <strong>web application</strong> is an application software that

runs on a web server and is accessed via a web browser.</li>

<li>“A <strong>web application</strong> (or <strong>web app</strong>) is

application software that is created with web technologies and runs via

a web browser.” <span class="citation"

data-cites="wikipedia2025WebApp">(Wikipedia contributors,

2025)</span></li>

<li>Web application structure:

<ul>

<li><strong>Frontend</strong>: Client-side interface (HTML, CSS,

JavaScript, frameworks like React, Angular, or Vue.js).</li>

JavaScript, and/or <a

href="https://en.wikipedia.org/wiki/List_of_JavaScript_libraries">JavaScript

libraries</a> like React, Angular, or Vue.js, <a

href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries">see

also</a>)</li>

<li><strong>Backend</strong>: Server-side logic (e.g., Python Tornado,

Node.js, Django).</li>

Node.js with Express, Django).</li>

<li><strong>Database</strong>: Stores and retrieves data (e.g.,

PostgreSQL, MySQL, MongoDB). <!-- - Common use cases:

- Social media platforms (e.g., Facebook, Twitter)

- E-commerce websites (e.g., Amazon)

- SaaS tools (e.g., Google Docs, Slack) --></li>

PostgreSQL, MySQL, MongoDB).</li>

</ul></li>

<li>Key Components:

<ol type="1">

</ul>

</div>

</section>

<section id="selectedcommon-approaches-to-building-web-applications"

<section id="two-approaches-for-building-web-applications"

class="slide level2 small-header">

<h2 class="small-header">Selected/Common Approaches to Building Web

<h2 class="small-header">Two Approaches for Building Web

Applications</h2>

<div style="font-size: 20pt">

<ol type="1">

<li><strong>Monolithic Architecture</strong>

<ul>

<li>Single, unified codebase for frontend, backend, and database.</li>

<li>E.g., Flask (Python) + Jinja Templates + PostgreSQL.

<!-- - Pros: Simplicity, easy deployment for small projects.

- Cons: Harder to scale; maintenance can become complex as the project grows. --></li>

<li>E.g., Flask (Python) with Jinja templates and PostgreSQL.</li>

<li>🙂: Simplicity, easy deployment for small projects.</li>

<li>😐: Harder to scale; maintenance can become complex as the project

grows.</li>

</ul></li>

<li><strong>Frontend/Backend Separation</strong>

<ul>

<li>Frontend and backend are decoupled, communicating via APIs (e.g.,

REST).

<!-- - - Frontend and backend are decoupled, communicating via APIs (e.g., REST, GraphQL). --></li>

<li>Frontend and backend are decoupled and communicate via APIs (e.g.,

REST or GraphQL).</li>

<li>E.g., React or Vue.js for frontend, Tornado or FastAPI (Python) for

backend

<!-- - Pros: Scalability, flexible tech stack, improved performance.

- Cons: Requires API design and coordination. --></li>

backend.</li>

<li>🙂: Scalability, flexible tech stack, improved performance.

<ul>

<li>👉 Suits well with containerization.</li>

</ul></li>

<li>😐: Requires API design and coordination.</li>

</ul></li>

</ol>

<!-- 3. **Microservices Architecture**  

   - Application divided into smaller, independent services.

   - Services communicate via APIs or message queues. -->

<p><!-- - Pros: Scalability, fault isolation, easy to maintain large systems.

   - Cons: More complex to develop and deploy. --></p>

<!-- 4. **Serverless/WebAssembly (Modern Trends)**  

   - Serverless: Focuses on code execution without managing infrastructure.  

   - E.g. AWS Lambda, Azure Functions.   -->

<p><!-- - WebAssembly: Run languages like C++ or Rust directly in the browser.   -->

<!-- - Pros: Lower infrastructure overhead, improved performance for specific tasks.  

   - Cons: Requires learning modern paradigms. --></p>

</div>

</section>

<section id="visualization" class="slide level2 very-small-header">

    style Database fill:#ff9,stroke:#333,stroke-width:2px

    style ExternalAPI fill:#bff,stroke:#333,stroke-width:2px

</pre>

</section>

<section class="slide level2">

</section></section>

<section>

<section id="a-simple-tornado-wep-app" class="title-slide slide level1">

<h2 class="small-header">Background</h2>

<div style="font-size: 20pt">

<ul>

<li><p><span class="citation"

data-cites="wikipedia2024TornadoWeb">Wikipedia contributors

(2024)</span></p>

<ul>

<li>“Tornado is a scalable, non-blocking web server and web application

framework written in Python.[2] It was developed for use by FriendFeed;

the company was acquired by Facebook in 2009 and Tornado was

open-sourced soon after.”</li>

<li>“Tornado is noted for its high performance. Its design enables

handling a large number of concurrent connections (i.e., tries to solve

the”C10k problem”).”</li>

</ul></li>

<li><p>In principle, Tornado is a web server and a web framework,

i.e,</p>

<li><strong>What is it?</strong> “Tornado is a scalable, non-blocking

web server and web application framework written in Python.[2] It was

developed for use by FriendFeed; the company was acquired by Facebook in

2009 and Tornado was open-sourced soon after.” <span class="citation"

data-cites="wikipedia2024TornadoWeb">(Wikipedia contributors,

2024)</span></li>

<li><strong>What can it do?</strong> “Tornado is noted for its high

performance. Its design enables handling a large number of concurrent

connections (i.e., tries to solve the”C10k problem”).” <span

class="citation" data-cites="wikipedia2024TornadoWeb">(Wikipedia

contributors, 2024)</span></li>

<li><strong>In principle</strong>, Tornado is a web server and a web

framework,

<ul>

<li>it can be used to connect to backend services and to…</li>

<li>build user interfaces, i.e., the frontend</li>

<li>render HTML templates, enabling basic UI rendering</li>

<li>👉 <a

href="https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py">See:

Tornado blog demo on GitHub</a></li>

</ul></li>

<li><p>An example for such a “full-stack” web application is the <a

href="https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py">Tornado

blog demo on GitHub</a></p>

<!-- - [GitHub: Tornado blog demo](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

- Go to the `tornado-backend-stage-01` branch of the [`aidaho-tinkering-club-web-app`](https://aidaho-edu.uni-hohenheim.de/gitlab/mmoessler/aidaho-tinkering-club-web-app) repository --></li>

</ul>

<!-- - **Tornado** (Python) is both a **web server** and a **web framework**, making it ideal for:

  - Connecting to backend services

  - Building user interfaces (frontend)

- **Use Case**: Full-stack web applications

  - [Tornado Blog Demo on GitHub](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

  - See the `tornado-backend-stage-01` branch of the [Aidaho Tinkering Club Web App Repository](https://aidaho-edu.uni-hohenheim.de/gitlab/mmoessler/aidaho-tinkering-club-web-app) -->

</div>

<!-- ---

## Start Application {.very-small-header}

<div style="font-size: 20pt; text-align: left;">

Move to `tornado-backend` directory

```bash

cd ./tornado-backend

```

Start multi container application

```bash

docker-compose up --build

```

Check whter the individual container are up

```bash

docker-compose ps

```

Potentially restart `blog` service

```bash

docker-compose restart blog

```

</div>

--- -->

</section>

<section id="ressources" class="slide level2 small-header">

<h2 class="small-header">Ressources</h2>

<div style="font-size: 24pt">

<li><strong>Resources</strong>:

<ul>

<li>There aren’t that many resources about Tornado, but since it’s

written in Python, i.e. a comparatively easy to implement</li>

<li>The most interesting ressources for learning/referencing Tornado:

<li>The most interesting resources for learning/referencing Tornado:

<ul>

<li><a

href="https://www.tornadoweb.org/en/stable/">https://www.tornadoweb.org/en/stable/</a></li>

data-cites="Dory2012Introduction">Dory, Parrish, & Berg

(2012)</span></li>

</ul></li>

<li>As already mentioned, there is also a GitHub repository:

<ul>

<li><a

href="https://github.com/tornadoweb/tornado">https://github.com/tornadoweb/tornado</a></li>

<li><a href="https://github.com/tornadoweb/tornado">See also the tornado

GitHub</a></li>

</ul></li>

</ul>

</div>

    TornadoServer -->|Serves| StaticAssets

    TornadoServer -->|Async Queries<br>Port 5432| PostgreSQL

</pre>

<!-- --- -->

</section></section>

<section>

<section id="a-simple-react-frontend-on-top-of-a-tornado-backend"

<section id="background-1" class="slide level2 small-header">

<h2 class="small-header">Background</h2>

<div style="font-size: 20pt">

<!-- * Advantage:

  * ...

* Disadvantage:

  * Settingup and handling of dependencies sucks!

  * Thus, we will try to run everythin in docker contaienr without any local installations -->

<ul>

<li><strong>Introduction</strong>:

<ul>

developers to build reusable UI components. <!-- - **Key Features**:

- **Declarative**: Simplifies UI design with a declarative programming model.

- **Component-Based**: Build reusable, encapsulated components for complex UIs.

- **Virtual DOM**: Optimizes updates for high performance.

- **Unidirectional Data Flow**: Predictable state management through single-direction data flow. --></li>

- **Virtual DOM**: Optimizes updates for high performance. --></li>

</ul></li>

<li><strong>React for Frontend Development</strong>:

<ul>

dashboards or real-time data visualizations.</li>

<li>Suitable for building <strong>Single Page Applications

(SPAs)</strong>, where content updates dynamically without full page

reloads. <!-- - **Popular Use Cases**:

- Web apps like social networks, e-commerce platforms, and SaaS tools.

- Mobile apps using **React Native**. --></li>

reloads.</li>

</ul></li>

<li><strong>Integration with Backends</strong>:

<ul>

<li>Communicates with backends (e.g., Tornado) via APIs like REST or

GraphQL.</li>

<li>Use libraries like Axios or Fetch for data fetching.

<!-- - **Learning Curve**:

- Easy to start with basic JavaScript, HTML, and CSS.

- Advanced features include state management (e.g., Context API, Redux) and routing (e.g., React Router). --></li>

<li>Use libraries like Axios or Fetch for data fetching.</li>

</ul></li>

</ul>

</div>

</section>

<section id="ressources-1" class="slide level2 small-header">

<h2 class="small-header">Ressources</h2>

<section id="resources" class="slide level2 small-header">

<h2 class="small-header">Resources</h2>

<div style="font-size: 20pt">

<ul>

<li>There is a wealth of resources about React!</li>

        api.js

    end

</pre>

</section>

<section class="slide level2">

</section></section>

<section id="references" class="title-slide slide level1">

<h1>References</h1>

Retrieved from <a

href="https://en.wikipedia.org/wiki/Tornado_(web_server)">https://en.wikipedia.org/wiki/Tornado_(web_server)</a>

</div>

<div id="ref-wikipedia2025WebApp" class="csl-entry" role="listitem">

Wikipedia contributors. (2025). <span class="nocase">Web application —

Wikipedia<span>,</span> the free encyclopedia</span>. Retrieved from <a

href="https://en.wikipedia.org/wiki/Web_application">https://en.wikipedia.org/wiki/Web_application</a>

</div>

</div>

<script src="script.js"></script>

</section>

---

title: "AIDAHO Tinkering Club:<br>Web App"

author: "Markus Mößler"

date: "December 20, 2025"

date: "April 15, 2025"

# date: "December 20, 2024"

---

# Overview

<div style="font-size: 20pt">

- A **web application** is an application software that runs on a web server and is accessed via a web browser.

- "A **web application** (or **web app**) is application software that is created with web technologies and runs via a web browser." [@wikipedia2025WebApp]

- Web application structure:

  - **Frontend**: Client-side interface (HTML, CSS, JavaScript, frameworks like React, Angular, or Vue.js).

  - **Backend**: Server-side logic (e.g., Python Tornado, Node.js, Django).

  - **Frontend**: Client-side interface (HTML, CSS, JavaScript, and/or [JavaScript libraries](https://en.wikipedia.org/wiki/List_of_JavaScript_libraries) like React, Angular, or Vue.js, [see also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries))

  - **Backend**: Server-side logic (e.g., Python Tornado, Node.js with Express, Django).

  - **Database**: Stores and retrieves data (e.g., PostgreSQL, MySQL, MongoDB).

<!-- - Common use cases:

  - Social media platforms (e.g., Facebook, Twitter)

  - E-commerce websites (e.g., Amazon)

  - SaaS tools (e.g., Google Docs, Slack) -->

- Key Components:

  1. **Client-Side**: Handles UI and user interactions.

  2. **Server-Side**: Processes business logic and interacts with the database.

---

## Selected/Common Approaches to Building Web Applications {.small-header}

## Two Approaches for Building Web Applications {.small-header}

<div style="font-size: 20pt">

1. **Monolithic Architecture**  

   - Single, unified codebase for frontend, backend, and database.

   - E.g., Flask (Python) + Jinja Templates + PostgreSQL.

   <!-- - Pros: Simplicity, easy deployment for small projects.

   - Cons: Harder to scale; maintenance can become complex as the project grows. -->

   - E.g., Flask (Python) with Jinja templates and PostgreSQL.

   - 🙂: Simplicity, easy deployment for small projects.

   - 😐: Harder to scale; maintenance can become complex as the project grows.

2. **Frontend/Backend Separation**  

   - Frontend and backend are decoupled, communicating via APIs (e.g., REST).

   <!-- - - Frontend and backend are decoupled, communicating via APIs (e.g., REST, GraphQL). -->

   - E.g., React or Vue.js for frontend, Tornado or FastAPI (Python) for backend

   <!-- - Pros: Scalability, flexible tech stack, improved performance.

   - Cons: Requires API design and coordination. -->

<!-- 3. **Microservices Architecture**  

   - Application divided into smaller, independent services.

   - Services communicate via APIs or message queues. -->

   <!-- - Pros: Scalability, fault isolation, easy to maintain large systems.

   - Cons: More complex to develop and deploy. -->

<!-- 4. **Serverless/WebAssembly (Modern Trends)**  

   - Serverless: Focuses on code execution without managing infrastructure.  

   - E.g. AWS Lambda, Azure Functions.   -->

   <!-- - WebAssembly: Run languages like C++ or Rust directly in the browser.   -->

   <!-- - Pros: Lower infrastructure overhead, improved performance for specific tasks.  

   - Cons: Requires learning modern paradigms. -->

   - Frontend and backend are decoupled and communicate via APIs (e.g., REST or GraphQL).

   - E.g., React or Vue.js for frontend, Tornado or FastAPI (Python) for backend.

   - 🙂: Scalability, flexible tech stack, improved performance.  

     - 👉 Suits well with containerization.

   - 😐: Requires API design and coordination.

</div>

    style ExternalAPI fill:#bff,stroke:#333,stroke-width:2px

</pre>

---

# A Simple Tornado Wep App

---

## Background {.small-header}

<div style="font-size: 20pt">

- @wikipedia2024TornadoWeb

  - "Tornado is a scalable, non-blocking web server and web application framework written in Python.[2] It was developed for use by FriendFeed; the company was acquired by Facebook in 2009 and Tornado was open-sourced soon after."

  - "Tornado is noted for its high performance. Its design enables handling a large number of concurrent connections (i.e., tries to solve the "C10k problem")."

- In principle, Tornado is a web server and a web framework, i.e,

- **What is it?** "Tornado is a scalable, non-blocking web server and web application framework written in Python.[2] It was developed for use by FriendFeed; the company was acquired by Facebook in 2009 and Tornado was open-sourced soon after." [@wikipedia2024TornadoWeb]

- **What can it do?** "Tornado is noted for its high performance. Its design enables handling a large number of concurrent connections (i.e., tries to solve the "C10k problem")." [@wikipedia2024TornadoWeb]

- **In principle**, Tornado is a web server and a web framework,

    - it can be used to connect to backend services and to...

  - build user interfaces, i.e., the frontend

- An example for such a "full-stack" web application is the [Tornado blog demo on GitHub](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

  <!-- - [GitHub: Tornado blog demo](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

  - Go to the `tornado-backend-stage-01` branch of the [`aidaho-tinkering-club-web-app`](https://aidaho-edu.uni-hohenheim.de/gitlab/mmoessler/aidaho-tinkering-club-web-app) repository -->

<!-- - **Tornado** (Python) is both a **web server** and a **web framework**, making it ideal for:

  - Connecting to backend services

  - Building user interfaces (frontend)

- **Use Case**: Full-stack web applications

  - [Tornado Blog Demo on GitHub](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

  - See the `tornado-backend-stage-01` branch of the [Aidaho Tinkering Club Web App Repository](https://aidaho-edu.uni-hohenheim.de/gitlab/mmoessler/aidaho-tinkering-club-web-app) -->

</div>

<!-- ---

## Start Application {.very-small-header}

<div style="font-size: 20pt; text-align: left;">

Move to `tornado-backend` directory

```bash

cd ./tornado-backend

```

Start multi container application

```bash

docker-compose up --build

```

Check whter the individual container are up

```bash

docker-compose ps

```

Potentially restart `blog` service

```bash

docker-compose restart blog

```

    - render HTML templates, enabling basic UI rendering

  - 👉 [See: Tornado blog demo on GitHub](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

- **Resources**:

  - The most interesting resources for learning/referencing Tornado:

    - [https://www.tornadoweb.org/en/stable/](https://www.tornadoweb.org/en/stable/)

    - Textbook: @Dory2012Introduction

  - [See also the tornado GitHub](https://github.com/tornadoweb/tornado)

</div>

--- -->

## Ressources {.small-header}

<div style="font-size: 24pt">

* There aren't that many resources about Tornado, but since it's written in Python, i.e. a comparatively easy to implement

* The most interesting ressources for learning/referencing Tornado:

  * [https://www.tornadoweb.org/en/stable/](https://www.tornadoweb.org/en/stable/)

  * Textbook: @Dory2012Introduction

* As already mentioned, there is also a GitHub repository:

  * [https://github.com/tornadoweb/tornado](https://github.com/tornadoweb/tornado)

</div>

---

## Visualization {.very-small-header}

    TornadoServer -->|Async Queries<br>Port 5432| PostgreSQL

</pre>

<!-- --- -->

# A Simple React Frontend on top of a Tornado Backend

---

## Background {.small-header}

<div style="font-size: 20pt">

<!-- * Advantage:

  * ...

* Disadvantage:

  * Settingup and handling of dependencies sucks!

  * Thus, we will try to run everythin in docker contaienr without any local installations -->

- **Introduction**:

  - React is a **JavaScript library** developed by Facebook for building fast and interactive **user interfaces** (UIs) for web and mobile applications.

  - It follows a **component-based architecture**, enabling developers to build reusable UI components.

<!-- - **Key Features**:

  - **Declarative**: Simplifies UI design with a declarative programming model.

  - **Component-Based**: Build reusable, encapsulated components for complex UIs.

  - **Virtual DOM**: Optimizes updates for high performance.

  - **Unidirectional Data Flow**: Predictable state management through single-direction data flow. -->

  - **Virtual DOM**: Optimizes updates for high performance. -->

- **React for Frontend Development**:

  - Ideal for **dynamic and interactive UIs**, such as dashboards or real-time data visualizations.

  - Suitable for building **Single Page Applications (SPAs)**, where content updates dynamically without full page reloads.

<!-- - **Popular Use Cases**:

  - Web apps like social networks, e-commerce platforms, and SaaS tools.

  - Mobile apps using **React Native**. -->

- **Integration with Backends**:

  - Communicates with backends (e.g., Tornado) via APIs like REST or GraphQL.

  - Use libraries like Axios or Fetch for data fetching.

<!-- - **Learning Curve**:

  - Easy to start with basic JavaScript, HTML, and CSS.

  - Advanced features include state management (e.g., Context API, Redux) and routing (e.g., React Router). -->

</div>

---

## Ressources {.small-header}

## Resources {.small-header}

<div style="font-size: 20pt">

    end

</pre>

---

# References

::: {#refs}

@comment{x-kbibtex-encoding=utf-8}

@misc{wikipedia2025WebApp,

	author = {{Wikipedia contributors}},

	note = {Accessed: 2025-04-15},

	title = {{Web application — Wikipedia{,} the free encyclopedia}},

	url = {https://en.wikipedia.org/wiki/Web_application},

	year = {2025}

}

@misc{wikipedia2024TornadoWeb,

	author = {{Wikipedia contributors}},

	note = {Accessed: 2024-12-20},