HTML und CSS (ca. 1 Tag)
Web-Konzepte
Webbrowser und WebserverHTTPZustandslosigkeitHerausforderungen/Fallstricke bei der Entwicklung von WebanwendungenHypertext Markup Language 5.x (HTML 5.x)
HTML-KonzepteHTML-VersionenRegeln für HTML-Tags und HTML-AttributeDie wichtigsten HTML-TagsHTML-Werkzeuge * Editoren
* Validatoren
* Webbrowser
Praxis: HTML-Dokumente erstellenCascading Style Sheets (CSS) Version 3 (CSS3)
CSS-KonzepteCSS-VersionenCSS-Anweisung (CSS Rules)CSS-SelektorenCSS-KlassenLayout mit FlexboxCSS-Werkzeuge * Editoren
* Validatoren
* Webbrowser
Praxis: HTML-Dokumente mit CSS formatierenCSS-HacksCSS-Abstraktionen wie LESS, SASS und BootstrapWebserverprogrammierung mit ASP.NET oder ASP.NET Core (ca. 3 Tage)Konzepte ASP.NET und ASP.NET CoreUnterschiede zwischen ASP.NET und ASP.NET CoreWerkzeugeServer-Side-Rendering (SSR) mit ASP.NET (Core)
ASP.NET (Core) MVC: Model, View, Controller, ActionsASP.NET Core Razor Pages: View und PageModelRazor-SyntaxRoutingFormulare/MaskenParameterbindung und ValidierungModulariersierung und Wiederverwendbarkeit (HTML Helper, Tag Helper, Partielle Views, View Components, Areas usw).Sicherheit: Authentifizierung/Autorisierung/BenutzerverwaltungCachingFehlerbehandlungUnit Tests und UI-TestsREST-Dienste/HTTP Services/Microservices mit ASP.NET (Core) WebAPI
Controller und ActionsDatenformateParameterübergabeRoutingKontrolle über HTTP-NachrichtenFehlerbehandlungHilfeseitenAblaufverfolgung (Tracing)WebAPIs testen mit HTTP-Test-Werkzeugen wie Postman und FiddlerDatenbankzugriffeDeployment
KonfigurationsdatenLokale und entfernte Internet Information Services (IIS)Deployment über Fileshares, FTP und MSDeploy/WebdeployDeployment in Azure als Azure WebApps oder Azure Cloud ServiceOptional: Deployment in Docker-ContainerOptional: Deployment in andere Webserver wie nginx oder ApacheOptiional: Self-HostingWebclientprogrammierung mit ASP.NET Core Blazor (ca. 3 Tage)Optional: Einführung in die notwendigen Grundlagen von .NET und C# sowie HTML, CSS und JavaScript/TypeScript
Blazor-Arten: Architektur, Vor- und Nachteile
Blazor Server Side Rendering (Blazor SSR)Blazor Server (Server Side Blazor) Blazor Webassembly (Client Side Blazor)Blazor Web Apps (Blazor United)Blazor Hybrid mit Blazor Desktop und Blazor MAUI Basistechniken von ASP.NET Core Blazor
.NET WebAssembly (WASM)ASP.NET SignalRDOM und virtual DOMWerkzeuge für Blazor
.NET SDK/.NET CLIVisual Studiooptional: Visual Studio CodeProjektvorlagenWebanwendungen mit Blazor
Projekte und Webseiten anlegenRazor ComponentsTemplates mit HTML, CSS und Razor-SyntaxCode-Behind-Dateien (Trennung von Layout und Logik)Datenbindung und Anpassung der DatenbindungEreignisseZustandsverwaltungLebenszyklus-MethodenRouting/Navigation im Browser Layoutvorlagen (Masterpages)Dependency InjectionKommunikation und Datenbankanbindung
REST APIs aufrufen mit HttpClient und JSON-SerialisierungGoogle RPC-Dienste aufrufenBidirektionale Kommunikation / Echtzeitanwendungen mit ASP.NET Core SignalRAbruf und Änderung von Daten aus SQL-Datenbanken mit Entity Framework CoreJavaScript-Interoperabilität
Aufruf von JavaScript aus .NETAufruf von .NET aus JavaScriptEinbindung bestehender JavaScript-BibliothekenAufbauwissen
Wiederwendbare Bibliotheken (Component Library/Component Packages/Razor Class Libraries sowie .NET Standard-Bibliotheken)Eigene Basisklassen für Blazor-PagesRealisierung von Schnittstellen wie IdisposableVerwendung von TimernTriggern von UI-AktualisierungenLocal Browser StorageAuthentifizierung und AutorisierungDeploymentOptional: Profiwissen
Templated ComponentsLeistungsoptimierung/Performance TuningTesten von Blazor-Anwendungen (Unit Test, Integrationstests, Razor Component Tests mit bUnit, UI Tests)Optional: Blazor Hybrid (Blazor Desktop/Blazor MAUI)
Einbetten von Blazor-Anwendungen in Windows Forms und/oder WPF und/oder .NET MAUIPlattformspezifischer CodeShared StateDeploymentOptional: Erweiterungen
Überblick über die verfügbaren Blazor-Erweiterungen (Community und Drittanbieter)Optional: Besprechung ausgewählter Erweiterungen (nach Absprache)Optional: WebAssembly außerhalb von Blazor
Webclientprogrammierung mit JavaScript/TypeScript (ca. 2 Tage)# 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
Webclient-FrameworksAngular oder React oder ein anderes Framework nach Ihrer Wahl (z.B. Vue.js oder Svelte) (ca. 3 Tage)
KonzepteArchitekturProjektaufbauKomponentenbildungVorlagen/TemplatesDatenbindungFormulare/Masken/ValidierungModularisierung/Services/Dependency InjectionNavigation/RoutingSteuerelementeWerkzeugeFehlersucheAuslieferung/DeploymentWeitere Konzepte des gewählten FrameworksTipps & Tricks