SlideShare ist ein Scribd-Unternehmen logo

JavaScript-Erweiterungen für UI und UX

K
Kai Donato

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

1 von 17
Downloaden Sie, um offline zu lesen
JavaScript-Erweiterungen
für UI und UX
Autor: Kai Donato
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
• 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
▪ 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
Visuelle Einflüsse mit JavaScript
6
Loading… Please Wait!
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
Funktionale Erweiterung
durch JavaScript
Frameworks
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
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
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
Mobile Entwicklung
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
Entwicklungsressource
n
▪ 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
Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | 16
http://tinyurl.com/modernappdev12c
Vielen Dank!
@_KaiDonato
https://de.linkedin.com/in/KaiDonato

Recomendados

Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and PollingKai Donato
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!Kai Donato
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzKai Donato
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoOliver Lemm
 
Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...
Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...
Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...DevDay Dresden
 
Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Kai Donato
 
Scala.js at code.talks 2014, Hamburg
Scala.js at code.talks 2014, HamburgScala.js at code.talks 2014, Hamburg
Scala.js at code.talks 2014, HamburgLutz Hühnken
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 

Más contenido relacionado

Was ist angesagt?

OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars MichaelsenOSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars MichaelsenNETWAYS
 
Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Lennart Passig
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...LeanIX GmbH
 
Heroku – Eine Cloud Application Platform
Heroku – Eine Cloud Application PlatformHeroku – Eine Cloud Application Platform
Heroku – Eine Cloud Application PlatformOnCommerce
 
Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)
Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)
Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)NETWAYS
 
WebGIS versus DesktopGIS
WebGIS versus DesktopGISWebGIS versus DesktopGIS
WebGIS versus DesktopGISUli Müller
 
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Manfred Steyer
 
2010 - Basta!: REST mit WCF 4, Silverlight und AJAX
2010 - Basta!: REST mit WCF 4, Silverlight und AJAX2010 - Basta!: REST mit WCF 4, Silverlight und AJAX
2010 - Basta!: REST mit WCF 4, Silverlight und AJAXDaniel Fisher
 
Basta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauen
Basta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauenBasta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauen
Basta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauenMarc Müller
 

Was ist angesagt? (11)

OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars MichaelsenOSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
OSMC 2009 | NagVis 1.4 - What´s new by Lars Michaelsen
 
Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Azure Bootcamp Hamburg
Azure Bootcamp Hamburg
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
 
Heroku – Eine Cloud Application Platform
Heroku – Eine Cloud Application PlatformHeroku – Eine Cloud Application Platform
Heroku – Eine Cloud Application Platform
 
Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)
Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)
Icinga 2: Grundaufbau einer Monitoring Umgebung (Webinar vom 01. August 2018)
 
WebGIS versus DesktopGIS
WebGIS versus DesktopGISWebGIS versus DesktopGIS
WebGIS versus DesktopGIS
 
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
 
2010 - Basta!: REST mit WCF 4, Silverlight und AJAX
2010 - Basta!: REST mit WCF 4, Silverlight und AJAX2010 - Basta!: REST mit WCF 4, Silverlight und AJAX
2010 - Basta!: REST mit WCF 4, Silverlight und AJAX
 
Azure de szenarien-v2-eshelter
Azure de szenarien-v2-eshelterAzure de szenarien-v2-eshelter
Azure de szenarien-v2-eshelter
 
Basta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauen
Basta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauenBasta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauen
Basta Spring 2017 - TFS/VSTS nach meinem Geschmack – eigene Extensions bauen
 

Ähnlich wie JavaScript-Erweiterungen für UI und UX

Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationGWAVA
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
AwareIM - Low-Code Entwicklungsplattform
AwareIM - Low-Code EntwicklungsplattformAwareIM - Low-Code Entwicklungsplattform
AwareIM - Low-Code EntwicklungsplattformJiri Kaufhold
 
Boost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with DockerBoost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with DockerSteven Grzbielok
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps PresentationSteffen Wagner
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Niels de Bruijn
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsPatric Dahse
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT Group
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UIgedoplan
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit AngularJens Binfet
 
Webcast Nr. 3 - Java Entwicklung mit der SAP Cloud Platform
Webcast Nr. 3 - Java Entwicklung mit der SAP Cloud PlatformWebcast Nr. 3 - Java Entwicklung mit der SAP Cloud Platform
Webcast Nr. 3 - Java Entwicklung mit der SAP Cloud PlatformPatric Dahse
 
Cloud-Native experience mit einer Container-Plattform im eigenen Rechenzentrum
Cloud-Native experience mit einer Container-Plattform im eigenen RechenzentrumCloud-Native experience mit einer Container-Plattform im eigenen Rechenzentrum
Cloud-Native experience mit einer Container-Plattform im eigenen RechenzentrumTEC Campus
 
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...Niels de Bruijn
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDNUG e.V.
 
fn project serverless computing
fn project serverless computingfn project serverless computing
fn project serverless computingWolfgang Weigend
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Jens Küsters
 
WorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsWorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsDirk Steinkopf
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellenMichael Kühnel
 

Ähnlich wie JavaScript-Erweiterungen für UI und UX (20)

Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
AwareIM - Low-Code Entwicklungsplattform
AwareIM - Low-Code EntwicklungsplattformAwareIM - Low-Code Entwicklungsplattform
AwareIM - Low-Code Entwicklungsplattform
 
Boost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with DockerBoost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with Docker
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Progressive Web Apps Presentation
Progressive Web Apps PresentationProgressive Web Apps Presentation
Progressive Web Apps Presentation
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
 
Webcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing ToolsWebcast SAP Cloud Platform 2 - Developing Tools
Webcast SAP Cloud Platform 2 - Developing Tools
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Webcast Nr. 3 - Java Entwicklung mit der SAP Cloud Platform
Webcast Nr. 3 - Java Entwicklung mit der SAP Cloud PlatformWebcast Nr. 3 - Java Entwicklung mit der SAP Cloud Platform
Webcast Nr. 3 - Java Entwicklung mit der SAP Cloud Platform
 
Cloud-Native experience mit einer Container-Plattform im eigenen Rechenzentrum
Cloud-Native experience mit einer Container-Plattform im eigenen RechenzentrumCloud-Native experience mit einer Container-Plattform im eigenen Rechenzentrum
Cloud-Native experience mit einer Container-Plattform im eigenen Rechenzentrum
 
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
 
Nefos: Nefos Mobile iPad App
Nefos: Nefos Mobile iPad AppNefos: Nefos Mobile iPad App
Nefos: Nefos Mobile iPad App
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
fn project serverless computing
fn project serverless computingfn project serverless computing
fn project serverless computing
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
WorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsWorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-Tools
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 

Mehr von Kai Donato

Testing APEX apps At A Glance
Testing APEX apps At A GlanceTesting APEX apps At A Glance
Testing APEX apps At A GlanceKai Donato
 
APEX Offline – The missing Link
APEX Offline – The missing LinkAPEX Offline – The missing Link
APEX Offline – The missing LinkKai Donato
 
>> How toTech-Forward >>
>> How toTech-Forward >>>> How toTech-Forward >>
>> How toTech-Forward >>Kai Donato
 
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenKai Donato
 
Click, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX ApplicationsClick, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX ApplicationsKai Donato
 
Full Stack Development mit JavaScript
Full Stack Development mit JavaScriptFull Stack Development mit JavaScript
Full Stack Development mit JavaScriptKai Donato
 
APEX and additional Templating Engines
APEX and additional Templating EnginesAPEX and additional Templating Engines
APEX and additional Templating EnginesKai Donato
 
Professional JavaScript Error-Logging
Professional JavaScript Error-LoggingProfessional JavaScript Error-Logging
Professional JavaScript Error-LoggingKai Donato
 
Managing Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEXManaging Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEXKai Donato
 

Mehr von Kai Donato (9)

Testing APEX apps At A Glance
Testing APEX apps At A GlanceTesting APEX apps At A Glance
Testing APEX apps At A Glance
 
APEX Offline – The missing Link
APEX Offline – The missing LinkAPEX Offline – The missing Link
APEX Offline – The missing Link
 
>> How toTech-Forward >>
>> How toTech-Forward >>>> How toTech-Forward >>
>> How toTech-Forward >>
 
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
 
Click, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX ApplicationsClick, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX Applications
 
Full Stack Development mit JavaScript
Full Stack Development mit JavaScriptFull Stack Development mit JavaScript
Full Stack Development mit JavaScript
 
APEX and additional Templating Engines
APEX and additional Templating EnginesAPEX and additional Templating Engines
APEX and additional Templating Engines
 
Professional JavaScript Error-Logging
Professional JavaScript Error-LoggingProfessional JavaScript Error-Logging
Professional JavaScript Error-Logging
 
Managing Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEXManaging Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEX
 

JavaScript-Erweiterungen für UI und UX

  • 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
  • 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
  • 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
  • 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
  • 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