Geschäftsanwendungen auf der Basis von Web-Technologien, allen voran HTML und JavaScript, sind derzeit äußerst beliebt, zumal damit sämtliche klassischen und mobilen Plattformen adressiert werden können. Doch bevor Entwicklungs-Teams ausgeklügelte JavaScript-Frameworks, wie Angular 2, nutzen können, müssen Sie sich im Bereich der Grundlagen fit machen. Dazu gehört neben der Sprache JavaScript auch das Document Object Model zur Interaktion mit dem Browser aber auch das JavaScript-Eco-System mit seinen Build-Tools und Packagemanagern. Dieses Seminar gibt anhand eines durchgängigen Beispiels einen Überblick zu diesen Technologien. Dazu wird nicht nur JavaScript, das in seiner neuesten Version „ECMAScript 6“ auch Klassen und Module unterstützt, sondern auch TypeScript, welches zusätzlich ein statisches Typsystem bringt, betrachtet. Im Rahmen der Übungen haben Sie selbst die Gelegenheit, die gewonnen Erkenntnisse anhand einer eigenen Anwendung zu erproben.
- Dieses Schulungsmodul kann mit allen aktuellen JavaScript-Versionen (z.B. 14.0, 13.0, 12.0, 11.0) entsprechend Ihren Wünschen durchgeführt werden.
- Dieses Schulungsmodul kann mit allen aktuellen TypeScript-Versionen (z.B. 5.6, 5.5, 5.7, 5.4) entsprechend Ihren Wünschen durchgeführt werden.
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 JavaScriptGrundkonzepte: Sprachmerkmale und Paradigmen in JavaScriptUnterschiede zu C#/C++/Visual Basic/Java u.a.Datentypen, Literale, Variablen, Konstanten, Gültigkeitsbereichevar vs. let vs. constTemplate StringsErmittlung von Typen und TypkonvertierungKontrollstrukturen (Schleifen, Bedingungen etc.)Truthy und FalsyBooleans, truthy und falsy und der VergleichsoperatorFunktionen, Parameter, RückgabewerteLambdas (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 ThrowObjektorientierte Programmierung mit Objektliteralen, Konstruktorfunktionen und PrototypenKlassen, Konstruktoren, Properties und VererbungWeakRef, ProxyDas Function-Objekt und thisHilfsfunktionen und eingebaute Objekte (z.B. JSON, Math)Asychrone Programmierung: async, await, Callback-Funktionen, PromisesIteratoren und GeneratorenDestructuringModuleSonderfälle und besondere KonstrukteJavaScript-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 TypeScriptTranspilation nach JavaScript Einrichtung der TypeScript-EntwicklungsumgebungKonfiguration des TypeScript-Compilers (tsconfig.json)DatenTypen in TypeScript, Statische Typisierung vs. dynamische Typisierung, Typaliase Typisierte Funktionen und ParameterErweitertes Klassenbasiertes Programmieren: Klassen, Vererbung und InterfacesDuck TypingGenericsAmbiente DeklarationenDekoratoren (Annotationen)# Best Practices für JavaScript und TypeScript
Zu vermeidende SprachkonstrukteWartbaren Code schreibenCoding Styles# Werkzeuge
Web-Editoren wie Visual Studio, Visual Studio Code (VSCode), Webstorm/IntelliJ und EclipseSinnvolle 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 CLIAusführungsumgebungen: node.js und BrowserTranspilation, z.B. von TypeScript zu JavaScriptPräprozessoren, z.B. SASS/SCSS/LESS/Stylus für CSSDebugger z.B. in Visual Studio, VSCode, Webstorm, EclipseDebugger in Browsern z.B. in ChromePaketmanager, z.B. NPM, Yarn bower und nugetBundling, Lazy Loading und Hot Reloading mit Vite, Webpack, RequireJS oder SystemJSStatische-Codeananalyse mit Lintern, z.B. ESLint, JSLint, JSHint, TSLintBuild-Automatisierung mit NPM-Skripten, gulp und gruntBundling mit Vite, Webpack, Parcel oder BrowsifyTestautomatisierung, 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 DevOpsOptional: 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 PolyfillsJavaScript 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-FrameworksOptional: 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.)
