Trainings Übersicht
Rabatte, Aktionen und Förderungen
English language trainings
Lighthouse Expert Series
Lernformen
Feedback
Garantie
Hotels
Restaurants
Seminarinhalt
Eine moderne Mobile Web App ist eine Anwendung, die über einen mobilen Webbrowser zugänglich ist und eine benutzerfreundliche, native-App ähnliche Erfahrung bietet, ohne dass sie aus einem App Store heruntergeladen werden muss.
Programm
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
- Beispiele: Arrow Functions, Callbacks, forEach(), map(), filter, reduce(), Spread Operator, Destructuring, Template Literals, Default Parameters, Promises
- Welche Rolle spielen Frameworks gegenwärtig?
- Was sind Web-App-Frameworks?
- Was sind Cross-Plattform-App-Frameworks?
- Vorteile von Frameworks
- Aktuell häufig verwendete Frameworks und deren Entwicklung zum Standard
- Entwicklung einer kleinen To-Do-App:
- Mit Plain JavaScript (ohne Framework)
- Mit React
- Theoretische Analyse einer To-Do-App in Angular
- Theoretische Analyse einer To-Do-App in Vue
- Vergleich der unterschiedlichen Framework-Konzepte
- Web-App Tooling:
- Visual Studio Code vs. WebStorm [derzeit das modernste Tool für Web-App-Entwicklung]
- 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)
- Projektmanagement für JS-Frameworks:
- Mit Node.js (npm – Node Package Manager)
- Mit Vite (neue Generation des Web-App-Toolings)
- Debugging:
- Web-App-Debugging mit Chrome Developer Tools
- Web-App-Debugging mit WebStorm Developer Tools
- Web-App-Debugging mit React Developer Tools
- anhand eines React-Beispiels
- Web-App-Profiling mit React Developer Tools
- anhand eines React-Beispiels
- IDE (Integrated Development Environment):
- WebStorm
- Kleine WebApp-Editoren:
- Visual Studio Code, Atom
- Online-Editoren:
- CodeSandbox ( für alle webFrameworks verwendbar)
- Expo Snack ( für React Native verwendbar )
- Testing-Frameworks für JavaScript:
- Jest
- Mocha
- Testing mit der Vite-Testumgebung für Frameworks
- anhand eine React-Samples
- Maui als Mobile-Crossplattform-Architektur, vergleichbar mit React Native
- Vor- und Nachteile der beiden Crossplattform-Architekturen
- Aktuelles Standing der Architekturen
- 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
- Responsive Design für mobile Apps ohne css Framework
- Responsive Design für mobile Apps mit css Framework
- mit Bootstrap-Gridsystem
- Bootstrap-Komponenten
- CSS-Frameworks im Vergleich:
- Bootstrap
- React-Bootstrap
- Material UI
- Web Worker:
- Web Worker Sample coden
- Service Worker (PWA = progressive webApps):
- Merkmale von PWAs (Offline-Fähigkeit, Caching-Strategien)
- Service Worker Sample Coden
- Cordova:
- Eine der ersten Crossplattform-Architekturen, heute veraltet
- Moderne Crossplattform-Frameworks:
- Flutter
- 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
- Flutter ( Für iOS, Android, Web, Desktop )
- Flutter-App programmieren
- Electron: (Crossplattform-Architektur für Desktop-Anwendungen)
- Konzepte einer Electron-App erörtern
- Kernkonzepte von React als Basis für React Native:
- Reuse von Komponenten, State und Props
- Entwicklung von Advanced Crossplattform-Apps
- mit React Native und Expo
- JQuery Konzepte wurden in modernes JavaScript integriert zB. bei Themen wie:
- DOM Manipulation
- Event Handling
- Ajax Anfragen
- CSS Manipulation
- 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
- ReactNative ( React Schiene )
- Ionic ( Angular Schiene )
- Flutter
- Progressive Web Apps ( PWAs ) => Service Worker
- Semantische HTML5-Elemente:
- z.B. header, footer, article, section
- HTML APIs:
- 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
- Unterschiedliche Backend-Technologien werden je nach Projektanforderungen und -größe eingesetzt. Sie bieten unterschiedliche Stärken in Bezug auf Skalierbarkeit, Performance und Entwicklungsaufwand.
- Node.js: Skalierbare I/O-intensive Anwendungen
- Sample Coden
- Express.js: Webanwendungen mit vereinfachtem Routing und Middleware
- Sample Coden
- 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
- PHP [ wird im Kurs nicht behandelt]
- Cloud-Dienste wie Firebase erleichtern die Entwicklung von
- skalierbaren, wartungsarmen Anwendungen:
- Einführung in Backend-as-a-Service (BaaS) mit Firebase
- 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.
- Microfrontend sample coden mit React
- Neue Konzepte für Mobile Native Entwicklung:
- Android JetPack (neues Android-Framework)
- Android Composable (neues Layout-Konzept)
Zielgruppen
Personen, die plattformunabhängige Apps für mobile Geräte wie iPhone, Android oder Windows Tablets entwickeln möchten
