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

Beschreibung/Inhalt

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.3, 5.2, 5.1, 5.0) 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 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, Lazy Loading und Hot Reloading mit Vite, Webpack, RequireJS oder SystemJS
  • 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.)

    Dauer
    Auf Wunsch. Gerne geben wir Ihnen eine Empfehlung zur notwendigen Schulungsdauer, wenn Sie uns in der Anfrage Ihre Vorkenntnisse und Ziele nennen.
    Ort
    Online oder in Deutschland, Österreich und der Schweiz an Ihrem Firmensitz
    Schulungsdidaktik
    Nach Ihrer Wahl: Klassische Schulung mit PC-Übungen, reine Präsentation ohne PC-Übungen oder interaktiver Workshop mit Beratungsanteil