Advanced Web Technologies - Tools & Frameworks

In dem Training "Advanced Web Technologies - Tools & Frameworks" machen wir sie mit der aktuellen Developer Fullstack-Toolchain vertraut. AI Assisted Development mit Copilots, Git basierend und mit VS Code lernen wir Typescript und Node.js gezielt als Runtime unseres Developer Toolset einzusetzen, Pakete dynamisch über NPM zu laden, und Lösungen zu bündeln. Sie bekommen einen Überblick über die zwei populären Single Page Application Frameworks Angular und React, und impmplementieren eine Responsive User Interfaces mit CSS Grid & Flexbox, Bootstrap 5 und SaSS. Effizientes Arbeiten mit auf Windows Subsystem Linux basierende Container und tokenbasierende Authentifizierung sowie publizierung von Lösungen in die Cloud runden die vermittelten Themen ab. Nach Abschluss dieses Seminars haben Sie einen guten Überblick über eine moderne Full-Stack-Development Toolchain.
 
Nach Abschluss dieses Trainings erhalten die Teilnehmer einen guten Überblick über eine moderne Full-Stack-Development Toolchain: 

• Visual Studio Code & Erweiterungen effektiv einsetzen und konfigurieren
• AI Assisted Development using Copilots
• Git & GitHub: Source Control, Markdown, Issues, Branching-Strategien und Pull Requests
• Verwenden Sie Typescript und Node.js für Ihre Projekte
• Implementieren eines Responsive User Interfaces mit CSS Grid & Flexbox, Bootstrap 5 und SaSS
• Designing & Implementing APIs mit .Net, Node.js & GraphQL
• Kennen von aktuellen Single Page Application Frameworks: Angular, React
• Containerisierten Apps mit Windows Subsystem for Linux 2 (WSL 2) entwickeln
• Verwenden von tokenbasierender Authentifizierung
• Veröffentlichen von Apps nach Azure

 
Zusätzlich werden neue Themengebiete anhand von Folien, Demos und Beispielen erarbeitet. Nach jedem Modul erhalten die Teilnehmer eine Auswahl an freien Übungen mit Lösungen oder alternative Self-Learning-Labs zur Vertiefung.
 
 

• Web-Entwickler*innen, die ihr Wissen vertiefen und sich mit den aktuellen Webtechnologien vertraut machen wollen

• Grundlegendes HTML, CSS, JavaScript - vergleichbar mit Programming HTML5, JavaScript and CSS3

Visual Studio Code and Developer Toolchain Setup

• Visual Studio Code Essentials (Settings, Keybinding, ...)
• Useful Extensions for Visual Studio Code
• GitHub Codespaces & DevContainers
• Fast HTML Coding using Emmet
• AI Driven Development using Copilots

 
Zusammenarbeiten mit Git & GitHub

• Git's Role in modern Development & DevOps
• Repo Documentation using Markdown
• Using GitHub – Repos, Basic Commands, Branching & History
• Branching Strategies, Pull Requests & Forks
• Using Tags & Releases
• Creating Issues and Linking them to Code
• Understanding Continuous Integration and Deployment using GitHub Actions

 
Node Based Development Basics

• Node.js Role in modern Web Development
• Node Basics & Configuration
• Package Management using NPM & Yarn
• Using global node tools: json-server, http-server, ...
• Task Automation using NPM- & Gulp Scripts
• Compilation & Bundling using Webpack & Vite

 
Using TypeScript

• History of ECMA Script Standards
• TypeScript Overview & Language
• Debugging using Source Maps
• Types, Functions & Enums
• Using 3rd Party Libraries & Type Definitions
• Objects, Classes, Interfaces, Enums
• Ensuring Code Quality using ESLint & Prettier
• Object Orientation, Classes, Constructor Functions
• Immutability, Pure Functions and Object Cloning
• ES6 Array Helpers & Utility Functions (Destructuring assignments, Spread, ...)
• REST, Http Verbs, fetch and axios
• Promises & Async Await

 
Data Access with Api’s & Graphs 

• REST Api’s Overview
• Relational vs NoSQL Databases: Use Cases & Examples
• Client Side & Server Side Data Models
• OpenAPI & Swagger
• Implementing Api’s using Common Frameworks (Node Express, .NET, ...)
• Providing View Models using GraphQL

 
Implementing a Responsive User Interface

• Effective HTML using Emmet
• Understanding Media Queries and Responsive Breakpoints
• Units: px, % versus rem, em, vh
• Syntactically Awesome Style Sheets Basics (Sass)
• Style Isolation using Shadow Dom & Web Components
• Understanding & and using Flexbox & CSS Grid
• Introduction to Bootstrap 5
• Web Fonts & Icons

 
Single Page Application Frameworks 

• Angular Introduction
• Angular Components, Services & Dependency Injection
• React Introduction
• Using React Functional Components & Hooks
• Reacts Role in Extending Microsoft 365:  Teams, SharePoint, and Office-AddIns

 
Developing Containerized Web Apps with Windows Subsystem for Linux 2

• Windows Subsystem for Linux 2 Introduction & Setup
• Benefits of using WSL
• Setup frameworks & tools in WSL
• Configure Docker Desktop
• Hosting web apps in Containers using NGINX
• Building & Publishing Docker Images
• Using docker-compose to build & run multi-container applications
• Run SQL Server Linux container images with Docker
• Using devcontainer.json to provide container as a full-featured development environment

 
Understanding and using Token Based Authentication

• Common Identity Providers: Azure AD, Firebase, Social
• OpenID Connect, JSON Web Tokens (Jwt) & oAuth
• Implementing Token based Authentication for Single Page Apps

 
Introduction to Cloud Publishing

• Introduction to Azure
• Introduction to [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/reference-index?view=azure-cli-latest)
• Publish Apps to Azure Static Web Apps & Azure Container Apps