JavaScript und TypeScript für die moderne Web- und App-Entwicklung

Optional vorab: HTML und CSS als Basistechniken moderner Web- und Mobilanwendung (werden geschult, sofern noch nicht bekannt)

Konzepte und Softwarearchitektur moderner Web- und Mobilanwendungen

• Moderne Webarchitekturen
  Single-Page-Web-Applications (SPAs) vs. Multi-Page-Web-Applications (MPAs)
  Server-Side-Pre-Rendering
  Aufbau von Client und Server
  Mobile Apps mit Webtechniken
  Cross-Platform-Apps mit Webtechniken
  Pattern für die Benutzeroberfläche (MVVM, MVC, MVP)
• Kommunikation
  REST-Kommunikation mit HTTP-Diensten/Web-APIs (XML, JSON)
  Benachrichtigungen/Push ("Echtzeitfähigkeit") mit Websockets
• User Experience
  Usability ähnlich wie bei Desktop-Anwendungen
  Responsive Web Design (RWD)
  Offline-Fähigkeit
  Progressive Web Apps (PWA)
  Progressive Enhancement

Die Skriptsprache JavaScript

• Einsatzgebiete von JavaScript (Browser, Server, Cloud, Konsole, Anwendungserweiterungen)
• Entwicklungsumgebungen für JavaScript
• Grundkonzepte: Sprachmerkmale und Paradigmen in JavaScript
• Unterschiede zu C#/C++/Visual Basic/Java u.a.
• Datentypen, Literale, Variablen, Konstanten, Gültigkeitsbereiche
• var vs. let vs. const
• Template Strings
• Ermittlung von Typen und Typkonvertierung
• Kontrollstrukturen (Schleifen, Bedingungen etc.)
• Truthy und Falsy
• Booleans, truthy und falsy und der Vergleichsoperator
• Funktionen, Parameter, Rückgabewerte
• Lambdas (Arrow-Functions)
• Funktionale Programmierung und Closures, Immediately Invoked Function Expression (IIFE)
• Verwatung von Objekten und Objektmengen (Array, ArrayBuffer, Set, Map, WeakMap, WeakSet, Int8Array, Float64Array u.a.)
• Iteration und Manipulation von Mengen, Spread-Operator
• Fehlerbehandlung mit Try-Catch und Throw
• Objektorientierte Programmierung mit Objektliteralen, Konstruktorfunktionen und Prototypen
• Klassen, Konstruktoren, Properties und Vererbung
• WeakRef, Proxy
• Das Function-Objekt und this
• Hilfsfunktionen und eingebaute Objekte (z.B. JSON, Math)
• Asychrone Programmierung: async, await, Callback-Funktionen, Promises
• Iteratoren und Generatoren
• Destructuring
• Module
• Sonderfälle und besondere Konstrukte
• JavaScript-Patterns und Best Practices
• Codequalität und Lesbarkeit

TypeScript als Erweiterung zu JavaScript

• Unterschiede zwischen TypeScript und JavaScript
• Gründe für die Verwendung von TypeScript
• Transpilation nach JavaScript
• Einrichtung der TypeScript-Entwicklungsumgebung
• Konfiguration des TypeScript-Compilers (tsconfig.json)
• DatenTypen in TypeScript, Statische Typisierung vs. dynamische Typisierung, Typaliase
• Typisierte Funktionen und Parameter
• Erweitertes Klassenbasiertes Programmieren: Klassen, Vererbung und Interfaces
• Duck Typing
• Generics
• Ambiente Deklarationen
• Dekoratoren (Annotationen)

Best Practices für JavaScript und TypeScript

• Zu vermeidende Sprachkonstrukte
• Wartbaren Code schreiben
• Coding Styles

Werkzeuge

• Web-Editoren wie Visual Studio, Visual Studio Code (VSCode), Webstorm/IntelliJ und Eclipse
• Sinnvolle Erweiterungen des Webeditors (z.B. Plug-Ins für VSCode, Web Essentials für Visual Studio)
• Aufbau eines Projekts/Projektstruktur mit Projekt-Scaffoldung-Werkzeugen, z.B. Yeoman oder Framework-spezifische CLI
• Ausführungsumgebungen: node.js und Browser
• Transpilation, z.B. von TypeScript zu JavaScript
• Präprozessoren, z.B. SASS/SCSS/LESS/Stylus für CSS
• Debugger z.B. in Visual Studio, VSCode, Webstorm, Eclipse
• Debugger in Browsern z.B. in Chrome
• Paketmanager, z.B. NPM, Yarn, bower und nuget
• Bundling, Tree Shaking und Hot Reloading/Hot Module Replacement mit Vite, esbuild, Turbopack, Rspack, Webpack
• Statische-Codeananalyse mit Lintern, z.B. ESLint, JSLint, JSHint, TSLint
• Build-Automatisierung mit NPM-Skripten, gulp und grunt
• Bundling mit Vite, Webpack, Parcel oder Browsify
• Testautomatisierung, z.B. Jest, Mocha, Qunit, Cypress, Selenium, Nightwatch, WebdriverIO, Protractor, TestCafe, Playwright, Puppeteer, Chai, Expect.js, Code Coverage mit "Istanbul"
• Continuous Integration / Continuous Delivery, z.B. mit GitHub, GitLab, Azure DevOps

Optional: Framework-spezifische CLI-Werkzeuge wie z.B. Angular CLI, Vue CLI, React CLI oder Cordova CLI

Programmierschnittstellen des Browsers

• Browser Object Model (BOM)
• Document Object Model (DOM)
• Programmierschnittstellen moderner Browser (z.B. Local Storage, IndexedDB, Websockets, Service Worker, Animations, Push, Promises)
• Verfügbarkeit moderner Programmierschnittstellen und Polyfills
• JavaScript Object Notation (JSON)
• REST-/JSON-Webservices aufrufen (Fetch-API, XHR-Objekt)
• Cross-Origin Resource Sharing (CORS)
• Sinnvolle JavaScript-Bibliotheken
• Überblick über JavaScript-Frontend-Frameworks und JavaScript-Backend-Frameworks

Optional: Besprechung eines JavaScript-Frontend-Frameworks (z.B. React, Angular, Vue.js, Svelte etc) und/oder eines JavaScript-Backend-Frameworks (z.B. Node.js, Express, Deno, Bun etc.)