Eine Präsentation über die Erweiterung einer Oracle APEX 5.0 Anwendung um verschiedene JavaScript Frameworks

1. JavaScript-Erweiterungen
für UI und UX
Autor: Kai Donato

2. Facts & Figures
Technologie-orientiert
Branchen-unabhängig
Hauptsitz
Ratingen
240
Beschäftigte
Gründung
1994
Niederlassung
Frankfurt am Main
Ausbildungs-
betrieb
Inhabergeführt
Zertifizierter
Partner von
Oracle,
Microsoft
und SAP
24 Mio. Euro
Umsatz
2

3. • Kai Donato
• Seit Januar 2014 bei der MT AG in Ratingen
• Berater APEX Development
• Fachinformatiker für Systemintegration
• UNIX-Server und Netzwerkadministration
• Seit über 10 Jahren in der Web-Entwicklung
Twitter: https://twitter.com/_KaiDonato
LinkedIn: https://de.linkedin.com/in/KaiDonato
3
Über mich

4. ▪ Visuelle Einflüsse mit JavaScript
▪ Verbesserung der User Experience
▪ Funktionale Erweiterung durch JavaScript Frameworks
▪ Formularoptimierung
▪ Fokus auf Tastatursteuerung
▪ Datei-Upload per Drag&Drop
▪ Mobile Anwendungen
▪ Ressourcen für Entwickler
4
Agenda

5. Visuelle Einflüsse mit JavaScript

6. 6
Loading… Please Wait!

7. 7
Pace.js
▪ Pace.js ist in der minimierten Version nur 13KB groß
▪ Mit nur wenig Aufwand zu implementieren
▪ Reagiert in der Standardkonfiguration auf jegliche AJAX-Vorgänge
▪ Lässt sich auf bestimmte Ereignisse einschränken
▪ Es gibt keine Abhängigkeiten zu beachten
▪ 14 Themes können direkt per CSS hinzugefügt/ausgewählt werden
▪ Manuelle Anpassung der Funktionsweise und der visuellen Darstellung einfach
möglich

8. Funktionale Erweiterung
durch JavaScript
Frameworks

9. 9
▪ Mousetrap erleichtert die Implementation von Tastaturkürzeln in einer Applikation
▪ Unterstützt internationale Tastatur-Layouts
▪ Kann mit wenigen Codezeilen implementiert werden
▪ Anwendungen, die aus Gewohnheit mit der Tastatur bedient werden, können einfach um
Features erweitert werden
▪ Events, die üblicherweise auf „onclick“-Events basieren, können auch per Tastaturkürzel
aufgerufen werden
▪ 2kb (minified) und keine Abhängigkeiten
▪ Potential für Barrierefreiheit

10. 10
VanillaMasker
▪ Vordefinierte Regeln verhindern „falsche“ Eingaben
▪ Beliebig viele Input-Elemente können mit einer Maske versehen werden
▪ vanilla-masker.js ist mit 8KB kein Performancedämpfer

11. 11
DropzoneJS
▪ Ermöglicht den Upload von Dateien per Drag&Drop in den Browser
▪ Es können mehrere Uploads parallel durchgeführt werden
▪ Mehrere Uploads sind parallel möglich (inklusive Fortschrittsanzeige)
▪ Für ältere Browser ist ein Failsafe-Modus integriert, der den herkömmlichen File-
Upload (Browse…) ermöglicht

12. Mobile Entwicklung

13. 13
Mobile Anwendungen mit Hilfe von JS-Frameworks
▪ Apache Cordova (auch als PhoneGap bekannt)
▪ HTML UI mit API für Sensoren und OS-relevante Funktionen
▪ Onlineservice zum kompilieren für verschiedene Plattformen (PhoneGap Build)
▪ Bereits 644 Plugins (Stand: Oktober 2015)
▪ Tabris.js
▪ Native Elemente des OS mit JavaScript erstellt
▪ Verwendung von Cordova-Plugins zur Nutzung von OS-relevanten Funktionen
▪ jQuery Mobile
▪ Webanwendungen mit dem Look&Feel einer nativen App

14. Entwicklungsressource
n

15. ▪ Einfache Implementation durch Hinzufügen der JS-Library in den Footer
▪ Hilft dem Entwickler bei der Performanceanalyse
▪ PerfBar ist individuell anpassbar (Metriken lassen sich hinzufügen und entfernen
▪ Diverse Informationen über Ladezeit, Latenz und Request- und Response-Zeiten
▪ Anzahl der geladenen Skripte und Stylesheets
▪ Anzahl von Grafiken
15
Performanceinformationen für die Web-Applikation
PerfBar

16. Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 16
http://tinyurl.com/modernappdev12c

17. Vielen Dank!
@_KaiDonato
https://de.linkedin.com/in/KaiDonato