Advanced Web Technologies

In dem Seminar „Advanced Web Technologies“ lernen Sie die aktuelle Fullstack Toolchain für die Webentwicklung zu nutzen. Git basierend und mit VS Code lernen wir Node.js gezielt als Runtime unseres Developer Toolset einzusetzen, Pakete dynamisch über NPM zu laden, und unsere Lösungen, auch für ältere Browser kompatibel, mit Webpack zu bündeln. Bei den eingesetzten Sprachen, JavaScript / TypeScript und C#, legen wir Wert darauf, modernen Syntax zu verwenden. Wir vermitteln die neuesten Skills im Bereich responsive UI Design, auch am Beispiel von Bootstrap 5, und stellen aktuelle Single Page Application Frameworks wie Angular, React und Blazor vor. Container basierendes Development, Real-Time Anwendungen und tokenbasierende Authentifizierung runden die vermittelten Themen ab.

Nach Abschluss dieses Seminars haben die Teilnehmer*innen einen guten Überblick über modernes "Full-Stack-Web-Development"
 

• Visual Studio Code effektiv einsetzen und Developer Toolchain Setup
• Git & Github: Source Control, Markdown, Issues & Pull Requests
• Objektorientiertes JavaScript & TypeScript schreiben
• Node.js verstehen und einsetzen
• Implementieren eines Resposive User Interfaces mit CSS Grid & Flexbox
• Verwenden von Bootstrap 5 und SaSS
• Designing & Implementing Api’s mit .Net Core, Node.js & Graph QL
• Kennen von aktuellen Single Page Aplication Frameworks: Angular, React, Blazor
• Entwickeln von Containeriserten WebApps mit Windows Subsystem for Linux 2 (WSL 2)
• Implementieren von Real Time Anwendungen & Offlineverfügbarkeit
• Verwenden von Tokenbasierender Authentifizierung
• Introduction to Cloud Publishing

Neue Themengebiete werden anhand von Folien, Demos und Beispielen erarbeitet. Nach jedem Module werden den Teilnehmern eine Auswahl von freien Übungen mit Lösung oder Alternativen Self Learning Labs zur Vertiefung angeboten. Alle Beispiele werden über Github verteilt – als Editor setzen wir Visual Studio Code ein. Wir verwenden Branches, um schnell, und vor Allem übersichtlich zwischen den verschiedenen Entwicklungsstadien wechseln zu können.
 

• 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

Using Visual Studio Code and Developer Toolchain Setup

• Visual Studio Code Essentials (Settings, Keybinding, ...)
• Organizing Monorepos (multible projectes) using VS Code Workspaces
• Useful Extensions for Visual Studio Code
• Using Online Editors: Stackblitz, GitHub Codespaces
• Setup a modern Developer Workspace and Toolchain using Scripts

Introduction to Git & GitHub

• Git's Role in modern Development & DevOps
• Repo Documentation using Markdown
• Using GitHub – Repos, Basic Commands, Branching & History
• Creating Issues and Linking them to Code
• Forking, Pull Requests & Git Flow
• Updating Feature Branches using pulls and rebase
• Understanding Continuous Integration and Deployment using GitHub Actions

Writing Object Oriented JavaScript

• History of ECMA Script Standards
• Object Orientation, Classes, Constructor Functions
• Immutability, Pure Functions and Object Cloning
• ES6 Array Helpers & Utility Functions (Desctructuring Assignments, Spread, REST Param,...)
• ES6 Array Helpers & Utility Functions (Destructuring assignments, Spread, ...)
• REST, Http Verbs, fetch and axios
• Promises & Async Await
• Introduchtion to Observables

Introduction to TypeScript

• 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

Node Based Development Basics

• Node.js Role in modern Web Development
• Node Basics & Configuration
• Package Management using NPM & Yarn
• Task Automation using NPM- & Gulp Scripts
• Creating Webpack Bundles

Designing & Implementing Api’s & Graphs

• Rest Api’s Overview
• Client Side & Server Side Data Models
• Using Swagger to Design / Document the Api
• Implementing Api’s using Common Frameworks (Node.js, .NET Core)
• Implementing Graphs using GraphQL & Appllo Server

Implementing a Responsive User Interface

• Effective HTML using Emmet
• Understanding Media Queries and Responsive Breakpoints
• CSS Container Queries mit @container
• 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 Injecction
• React Introduction
• Using React Functional Components & Hooks
• Reacts Role in Extending Microsoft 365:  Teams, SharePoint, and Office-AddIns
• Blazor Introduction
• Blazor Server & Blazor Web Assembly

Developing Containerized Web Apps with Windows Subsystem for Linux 2

• WSL Introduction & Setup
• Benefits of using WSL
• WSL 2 & Docker Desktop Configuration
• Creating and Executing Docker Containers for Web Apps
• Using Containers to provide a development environment
• Hosting Single Page Applications in Containers using NGINX
• Using Environment Variables to provide Configuration
• Using Docker Compose
• Local Kubernetes with Docker Desktop

Introduction to Real Time- & Offline Apps

• Use Cases for Real Time Apps
• Common Real Time Libraries
• Implementing Real Time Apps using SignalR
• Understanding Offline First
• Local Storage, Indexed DB & Web SQL
• Progressive Web Apps (PWA) Frameworks
• Overview Device Access & HTML Apis

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 CLI (https://docs.microsoft.com/en-us/cli/azure/reference-index?view=azure-cli-latest)
• Publish App to Cloud Services
• Publish Containers