Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
modul:m290:learningunits:lu08:theorie:01 [2024/10/29 13:24] – [1. Presentation Layer (Frontend)] vdemir | modul:m290:learningunits:lu08:theorie:01 [2024/11/18 06:13] (aktuell) – kdemirci | ||
---|---|---|---|
Zeile 3: | Zeile 3: | ||
===== Learning Objectives ===== | ===== Learning Objectives ===== | ||
- Describe the 3 tiers of a typical web communication | - Describe the 3 tiers of a typical web communication | ||
- | - Name the languages or softwsre, which are used on each tier | + | - Name the languages or software, which are used on each tier |
===== WHAT is a 3 tiers web architecture? | ===== WHAT is a 3 tiers web architecture? | ||
The 3-tier web architecture is a way of structuring a website or application to make it more organized, secure, and easy to manage. It splits everything into three main layers: | The 3-tier web architecture is a way of structuring a website or application to make it more organized, secure, and easy to manage. It splits everything into three main layers: | ||
- | {{: | + | {{: |
- | + | ||
- | {{ : | + | |
Each layer has a specific job and only communicates with the layer directly next to it. This separation helps improve security (each layer only does what it's supposed to), makes it easier to update or fix issues, and allows each layer to be scaled independently if the app grows. | Each layer has a specific job and only communicates with the layer directly next to it. This separation helps improve security (each layer only does what it's supposed to), makes it easier to update or fix issues, and allows each layer to be scaled independently if the app grows. | ||
- | ==== 1. Presentation Layer (Frontend) ==== | + | {{ : |
+ | |||
+ | ==== 1. Presentation Layer/Tier (Frontend) ==== | ||
* This is the layer that users see and interact with, like a website or app screen. | * This is the layer that users see and interact with, like a website or app screen. | ||
* It’s built with HTML, CSS, and JavaScript to show things like buttons, text, images, and form fields. | * It’s built with HTML, CSS, and JavaScript to show things like buttons, text, images, and form fields. | ||
* For example, on a social media app, the Presentation Layer is the feed where you see posts and pictures. | * For example, on a social media app, the Presentation Layer is the feed where you see posts and pictures. | ||
- | **Popular programming languages on that layer** | + | **Popular programming languages on the 1st layer** |
* HTML: For structuring web content. | * HTML: For structuring web content. | ||
* CSS: For styling and layout. | * CSS: For styling and layout. | ||
Zeile 26: | Zeile 26: | ||
* Frameworks: React, Angular, and Vue are popular frontend frameworks built on JavaScript. | * Frameworks: React, Angular, and Vue are popular frontend frameworks built on JavaScript. | ||
- | ==== 2. Application Layer (Backend) ==== | + | ==== 2. Application Layer/Tier (Backend) ==== |
* This layer handles the " | * This layer handles the " | ||
* When you enter your login info, the Application Layer checks if it’s correct and decides what happens next. | * When you enter your login info, the Application Layer checks if it’s correct and decides what happens next. | ||
* It’s built with programming languages like Python, Java, PHP, or frameworks like Node.js. | * It’s built with programming languages like Python, Java, PHP, or frameworks like Node.js. | ||
- | ==== 3. Data Layer ==== | + | **Popular programming languages on 2nd layer** |
+ | * JavaScript/ | ||
+ | * Python: Common for web development with frameworks like Django and Flask. | ||
+ | * Java: Widely used in large-scale applications, | ||
+ | * Ruby: Often used with Ruby on Rails for rapid development. | ||
+ | * PHP: Common in web development, | ||
+ | ==== 3. Data Layer/Tier ==== | ||
* This layer stores all the data the app needs, like user accounts, messages, or posts. | * This layer stores all the data the app needs, like user accounts, messages, or posts. | ||
* When you log in, this layer is where your username and password are checked against stored data. | * When you log in, this layer is where your username and password are checked against stored data. | ||
* It’s often managed with a database system like MySQL, PostgreSQL, or MongoDB. | * It’s often managed with a database system like MySQL, PostgreSQL, or MongoDB. | ||
+ | **Popular programming languages on 3rd layer** | ||
+ | * SQL-Based: Languages like SQL work with relational databases like MySQL, PostgreSQL, and Oracle. | ||
+ | * NoSQL-Based: | ||
+ | * Other Database Languages: PL/pgSQL for PostgreSQL and PL/SQL for Oracle are specialized SQL extensions that add procedural elements. | ||
+ | ===== The winner is .... JavaScript ===== | ||
+ | As you can see, the programm language JavaScript is used on both layers, presentation and logic layer. It is thereforeclear that we will also program our server in JavaScript in this Module 290. As we are already familiar with JavaScript, we do not have to explicitely learn a new programm language, but simply use the old one for a new purpose. The relevant JavaScript components are | ||
+ | |||
+ | * **Node.js: | ||
+ | |||
+ | * **NPM:** NPM, or Node Package Manager, is a package manager specifically designed for JavaScript. It is an essential part of the Node.js ecosystem and is used by developers to manage dependencies and libraries in their projects. | ||
+ | |||
+ | * **Express: **Express is a popular web application framework for Node.js. It was developed to facilitate the creation and management of server-side applications and APIs in JavaScript. It is also known as // | ||
+ | | ||
==== Vocabulary ==== | ==== Vocabulary ==== | ||
^English ^ Deutsch ^ | ^English ^ Deutsch ^ | ||
| ... | ... | | | ... | ... | | ||
- | | ... | ... | | + | |
---- | ---- | ||
[[https:// | [[https:// | ||