Inhalt
1. Moderne JavaScript-Features
• Moderne JavaScript-Elemente haben das Programmieren in dieser Sprache erheblich verbessert, indem sie die Lesbarkeit, Wartbarkeit und Leistung des Codes optimiert haben
o Beispiele: Arrow Functions, Callbacks, forEach(), map(), filter, reduce(), Spread Operator, Destructuring, Template Literals, Default Parameters, Promises
2. JavaScript-Frameworks im Vergleich (React, React Native, Angular, Vue etc.)
• Welche Rolle spielen Frameworks gegenwärtig?
o Was sind Web-App-Frameworks?
o Was sind Cross-Plattform-App-Frameworks?
o Vorteile von Frameworks
o Aktuell häufig verwendete Frameworks und deren Entwicklung zum Standard
3. Von Plain JavaScript zu JS-Frameworks
• Entwicklung einer kleinen To-Do-App:
o Mit Plain JavaScript (ohne Framework)
o Mit React
o Theoretische Analyse einer To-Do-App in Angular
o Theoretische Analyse einer To-Do-App in Vue
o Vergleich der unterschiedlichen Framework-Konzepte
4. Web-App Tooling und Debugging
• Web-App Tooling:
o Visual Studio Code vs. WebStorm [derzeit das modernste Tool für Web-App-Entwicklung]
o Warum gilt WebStorm als das modernste Tool für die Web-App-Entwicklung?
- Integrierter Debugger
- IntelliSense (Unterstützung während des Codens)
- Integrierte KI-Unterstützung (standardmäßig enthalten)
- WebStorm AI-Assistent (Plugin-basiert)
o Projektmanagement für JS-Frameworks:
- Mit Node.js (npm – Node Package Manager)
- Mit Vite (neue Generation des Web-App-Toolings)
• Debugging:
o Web-App-Debugging mit Chrome Developer Tools
o Web-App-Debugging mit WebStorm Developer Tools
o Web-App-Debugging mit React Developer Tools
- anhand eines React-Beispiels
o Web-App-Profiling mit React Developer Tools
- anhand eines React-Beispiels
5. IDE-Überblick
• IDE (Integrated Development Environment):
o WebStorm
• Kleine WebApp-Editoren:
o Visual Studio Code, Atom
• Online-Editoren:
o CodeSandbox ( für alle webFrameworks verwendbar)
o Expo Snack ( für React Native verwendbar )
6. JavaScript-Tests
• Testing-Frameworks für JavaScript:
o Jest
o Mocha
• Testing mit der Vite-Testumgebung für Frameworks
o anhand eine React-Samples
7. Architekturen-Überblick (Maui)
• Maui als Mobile-Crossplattform-Architektur, vergleichbar mit React Native
o Vor- und Nachteile der beiden Crossplattform-Architekturen
o Aktuelles Standing der Architekturen
o Hinweis: Maui erfordert Visual Studio, das nicht mit Visual Studio Code zu verwechseln ist. Im Kurs werden Maui-Konzepte/Beispiele nur auf theoretischer Basis besprochen
8. CSS-Framework: Bootstrap
• Responsive Design für mobile Apps ohne css Framework
• Responsive Design für mobile Apps mit css Framework
o mit Bootstrap-Gridsystem
• Bootstrap-Komponenten
• CSS-Frameworks im Vergleich:
o Bootstrap
o React-Bootstrap
o Material UI
9. Web Worker vs. Service Worker (PWA = progressive webApps)
• Web Worker:
o Web Worker Sample coden
• Service Worker (PWA = progressive webApps):
o Merkmale von PWAs (Offline-Fähigkeit, Caching-Strategien)
o Service Worker Sample Coden
10. Web-App vs. Crossplattform-App – Cordova, Electron
• Cordova:
o Eine der ersten Crossplattform-Architekturen, heute veraltet
• Moderne Crossplattform-Frameworks:
o Flutter
o React Native:
- Ist heute der modernste Mobile-App-Ansatz für Crossplattform-Architektur
- React Native-App entwickeln
- React Native-App mit Expo-Modul für Hardware-Zugriff entwickeln
o Flutter ( Für iOS, Android, Web, Desktop )
- Flutter-App programmieren
o Electron: (Crossplattform-Architektur für Desktop-Anwendungen)
- Konzepte einer Electron-App erörtern
11. Crossplattform-App mit React Native
• Kernkonzepte von React als Basis für React Native:
o Reuse von Komponenten, State und Props
• Entwicklung von Advanced Crossplattform-Apps
o mit React Native und Expo
12. jQuery/jQuery Mobile Konzepte und Alternativen
• JQuery Konzepte wurden in modernes JavaScript integriert zB. bei Themen wie:
o DOM Manipulation
o Event Handling
o Ajax Anfragen
o CSS Manipulation
o Klassen hinzufügen und entfernen
• jQuery Mobile wurde durch modernere Frameworks und Technologien ersetzt, die besser auf die heutigen Anforderungen an mobile und webbasierte Anwendungen zugeschnitten sind
o ReactNative ( React Schiene )
o Ionic ( Angular Schiene )
o Flutter
o Progressive Web Apps ( PWAs ) => Service Worker
13. HTML5-Konzepte / APIs
• Semantische HTML5-Elemente:
o z.B. header, footer, article, section
• HTML APIs:
o Canvas API, Geolocation API, Web Storage API, WebSockets API, History API, IndexedDB API, WebWorker API
- Geolocation API Sample coden:
- Mit plain JavaScript
- Mit React und React Native
- WebSocket API Sample coden:
- Mit plain JavaScript
14. Backend-Technologien (Node.js, Spring, JEE)
• Unterschiedliche Backend-Technologien werden je nach Projektanforderungen und -größe eingesetzt. Sie bieten unterschiedliche Stärken in Bezug auf Skalierbarkeit, Performance und Entwicklungsaufwand.
o Node.js: Skalierbare I/O-intensive Anwendungen
- Sample Coden
o Express.js: Webanwendungen mit vereinfachtem Routing und Middleware
- Sample Coden
o Spring/Spring Boot: ist der De-facto-Standard für die Entwicklung von Enterprise-Applikationen in großen Unternehmen. Es bietet eine robuste Infrastruktur für den Aufbau von komplexen, sicherheitskritischen und hochskalierbaren Anwendungen
- Sample Coden
o PHP [ wird im Kurs nicht behandelt]
15. Cloud-basierte App-Entwicklung
• Cloud-Dienste wie Firebase erleichtern die Entwicklung von
skalierbaren, wartungsarmen Anwendungen:
o Einführung in Backend-as-a-Service (BaaS) mit Firebase
17. Microfrontends für WebApps
• Microfrontends: teilen monolithische Frontend-Anwendungen in kleinere, eigenständige Einheiten auf. Sie bieten Flexibilität und ermöglichen es mehreren Teams, gleichzeitig an verschiedenen Teilen der Anwendung zu arbeiten.
o Microfrontend sample coden mit React
18. Von WebApp zur Crossplattform-App zur Mobile Native App
• Neue Konzepte für Mobile Native Entwicklung:
o Android JetPack (neues Android-Framework)
o Android Composable (neues Layout-Konzept)