Advanced Web Technologies

In dem Seminar „Advanced Web Technologies“ lernen Sie aktuelle Werkzeuge für die Webentwicklung zu nutzen. Wir lernen 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 und TypeScript, legen wir Wert darauf, modernen Syntax zu verwenden und vermitteln aktuelle Konzepte wir Reactive Programming, sowie modulares, und funktionales Programmieren. Wir vermitteln die neuesten Skills im Bereich responsive UI Design, auch am Beispiel von Bootstrap 4, und stellen aktuelle JavaScript Frameworks wie Angular, Vue.js und React vor. Wir behandeln die Themen Real Time Applications, Offline Verfügbarkeit und Nutzung von HTML APIs wie Gelolocation, Gerätezugriff.

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

• VS Code und Github nutzen
• Node.js verstehen und einsetzen
• Modernes JavaScript & TypeScript schreiben
• Bundling & Compiling using Webpack
• Verstehen des Reactiv Programmierpatterns mit RxJS
• Implementieren eines Resposive User Interfaces mit CSS Grid & Flexbox
• Verwenden von Bootstrap 4
• Designing & Implementing Api’s & Graphs
• Kennen von aktuellen JavaScript Frameworks: Angular, Vue.js, React
• Implementieren von Real Time Anwendungen
• Unterstützen von Offlineverfügbarkeit
• HTML 5 APi’s & Device Access
• Verwenden von Tokenbasierender Authentifizierung
• Integration Sozialer Netzwerke und Dienste: Facebook & Paypal

Neue Themengebiete werden anhand von Folien, Demos und durchgängigen Beispielen erarbeitet. Am Ende jedes Tages gibt es ca. 2 Std „Lab of the day“ mit Aufgabenstellung, dazugehöriger Lösung und der Möglichkeit, diese zu diskutieren. 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.

Inhalte

Using VS Code

• Visual Studio Code Essentials (Settings, Keybinding, ...)
• Useful Extensions Visual Studio Code
• Using Online Editors: Stackblitz

Introduction to Git & GitHub

• Git's Role in modern CI / CD
• Using GitHub – Repos, Basic Commands, Branching & History
• Forking, Pull Requests & Git Flow
• Repo Documentation using Markdown

Node.js

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

Using modern JavaScript

• History of ECMA Script Standards
• ES6 Array Helpers & Utility Functions
• Classes, Inheritance
• Global Scope, Modules, Exports- und Imports
• Async Operations using Fetch Api, Promises & Async Await

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 TSLint & Prettier

Packaging & Reusing Code using Webpack & NPM

• Creating Webpack Bundles
• Ensuring Browser Compatibility using Polyfills & Shims
• Creating & Publishing NPM Packages

Designing & Implementing Api’s & Graphs

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

Implementing a Responsive User Interface

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

Overview current JavaScript Frameworks

• Angular Introduction
• Angular - Hello World
• React Introduction
• React – Hello World
• Vue.js Introduction
• Vue.js –Hello World

Understanding Reactive Extensions for JavaScript – RxJS

• Understanding & using the Benefits of Reactive Programming
• Functional Programming & Immutability
• Observer, Observable, Subject
• Observable Operators

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
• What are Progressive Web Apps (PWA)
• Progressive Web Apps Hello World

HTML 5 APi’s & Device Access

• Overview Device Access & HTML Apis
• Geolocation & Media Capture
• Device Orientation Events
• Other APIs (Battery Status, Vibration, Bluetooth ...)

Introduction to Token Based Authentication

• Classic vs Token Based Authentication
• OpenID Connect, JSON Web Tokens (Jwt) & oAuth
• Using Social Authentication

Consuming Common Social Services

• Facebook Introduction
• Consuming Facebook Graph
• Using the Paypal SDK