- Grundlegendes HTML, CSS, JavaScript – vergleichbar mit Programming HTML5, JavaScript and CSS3
In dem Training „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 Trainings haben die Teilnehmer*innen einen guten Überblick über modernes „Full-Stack-Web-Development“
l Studio Code effektiv einsetzen und Developer Toolchain Setup
Github: Source Control, Markdown, Issues & Pull Requests
torientiertes JavaScript & TypeScript schreiben
js verstehen und einsetzen
mentieren eines Resposive User Interfaces mit CSS Grid & Flexbox
nden von Bootstrap 5 und SaSS
ning & Implementing Api’s mit .Net Core, Node.js & Graph QL
n von aktuellen Single Page Aplication Frameworks: Angular, React, Blazor
ckeln von Containeriserten WebApps mit Windows Subsystem for Linux 2 (WSL 2)
mentieren von Real Time Anwendungen & Offlineverfügbarkeit
nden von Tokenbasierender Authentifizierung
duction 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
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
https://www.etc.at/seminare/webADV