Logo Microsoft Windows

Web-App mobile

Trainings-ID:
WebAppm

Inhalt des Trainings

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.

Zielgruppen

Personen, die plattformunabhängige Apps für mobile Geräte wie iPhone, Android oder Windows Tablets entwickeln möchten

Detail-Inhalte

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
2. JavaScript-Frameworks im Vergleich (React, React Native, Angular, Vue etc.)
  • 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
3. Von Plain JavaScript zu JS-Frameworks
  • 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
4. Web-App Tooling und Debugging
  • 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
5. IDE-Überblick
  • 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 )
6. JavaScript-Tests
  • Testing-Frameworks für JavaScript:
  •  Jest
  • Mocha
  • Testing mit der Vite-Testumgebung für Frameworks
  • anhand eine React-Samples
7. Architekturen-Überblick (Maui)
  • 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
8. CSS-Framework: Bootstrap
  • 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
9. Web Worker vs. Service Worker (PWA = progressive webApps)
  • Web Worker:
  • Web Worker Sample coden
  • Service Worker (PWA = progressive webApps):
  • Merkmale von PWAs (Offline-Fähigkeit, Caching-Strategien)
  • Service Worker Sample Coden
10. Web-App vs. Crossplattform-App – Cordova, Electron
  • 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
11. Crossplattform-App mit React Native
  • 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
12. jQuery/jQuery Mobile Konzepte und Alternativen
  • 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
13. HTML5-Konzepte / APIs
  • 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
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.
  • 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]
15. Cloud-basierte App-Entwicklung
  • Cloud-Dienste wie Firebase erleichtern die Entwicklung von
  • skalierbaren, wartungsarmen Anwendungen:
  • 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.
  • Microfrontend sample coden mit React
18. Von WebApp zur Crossplattform-App zur Mobile Native App
  • Neue Konzepte für Mobile Native Entwicklung:
  • Android JetPack (neues Android-Framework)
  • Android Composable (neues Layout-Konzept)

Downloads

Jetzt online buchen

  • 23.04.-25.04.2025 23.04.2025 3T 3 Tage Wien OnlinePräsenz
    Mühlehner & Tavolato · Waidhausenstraße 13/5, 1140 Wien Uhrzeiten
    • Trainingspreis € 1.690,-
      • Vor Ort
      • Online
  • 10.06.-12.06.2025 10.06.2025 3T 3 Tage Wien OnlinePräsenz
    Mühlehner & Tavolato · Waidhausenstraße 13/5, 1140 Wien Uhrzeiten
    • Trainingspreis € 1.690,-
      • Vor Ort
      • Online

Preise exkl. MwSt.

Sie haben Fragen?

Ihr ETC Support

Kontaktieren Sie uns!

+43 1 533 1777-99
E-Mail

Wir rufen Sie gerne an.
Datenschutz*
This field is hidden when viewing the form
This field is hidden when viewing the form
This field is hidden when viewing the form

Lernformen im Überblick

Mehr darüber