Vortrag auf dem Experetnkreis Java, 16.02.2017, GEDOPLAN GmbH Bielefeld

1. „Take the RISC!“
Von Java Swing über JavaFX
nach HTML.
UI Strategien für operativ genutzte
Geschäftsanwendungen.

2. CaptainCasaEnterpriseClientRISC
Björn Müller
• 1991-2001: SAP
– Anwendungsentwicklung
– Basis-Java-Architekturentwicklung
– J2EE Server Entwicklung
• Seit 2001:
– Entwicklung von Frontendframeworks für
umfangreiche, operativ genutzte, serverbasierte
Unternehmensanwendungen
– 2001-2007: Casabac Technologies GmbH
– „AJAX“ Pionier
– 2005 Übernahme durch Software AG
– 2007–heute: CaptainCasa GmbH + Community
– Java Swing, Java FX, RISC-HTML, (SAP UI5)

3. CaptainCasaEnterpriseClientRISC
CaptainCasa
• 2007 Gründung CaptainCasa
– Corporate Community
– GmbH
• 2008 Java Swing basierter Client
• 2014 JavaFX basierter Client
• 2016 Entwicklung der RISC-HTML Methode
• 2016 HTML basierter Client

4. CaptainCasaEnterpriseClientRISC
CaptainCasa

5. CaptainCasaEnterpriseClientRISC
Motivation

6. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!

7. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!
EclipseReisekosten-
abrechnung
Projekt-
rückmeldung
Powerpoint
Mail
Stack
Overflow
spiegel.de

8. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!
Eclipse
Reisekosten-
abrechnung
Projekt-
rückmeldung
Powerpoint
Mail
Stack
Overflow
spiegel.de
WEB Native

9. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!
Eclipse
Reisekosten-
abrechnung
Projekt-
rückmeldung
Powerpoint
Mail
Stack
Overflow
spiegel.de
WEB Native
Sim
plicity
first!
Efficiency
first!

10. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!

11. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!
Bank
Anwendung
Reisekosten-
abrechnung
Recherche
Business
Intelligence
Mail
Zeit
erfassung
spiegel.de

12. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!
Bank
Anwendung
Reisekosten-
abrechnung
Recherche
Business
Intelligence
MailZeit
erfassung
spiegel.de
WEB Native

13. CaptainCasaEnterpriseClientRISC
Developers: Eat you own Dog Food!
Reisekosten-
abrechnung
Recherche
Zeit
erfassung
spiegel.de
WEB Native
Sim
plicity
first!
Bank
Anwendung
Business
Intelligence
Mail
Efficiency
first!

14. CaptainCasaEnterpriseClientRISC
Motivation
extern intern
extern intern

15. CaptainCasaEnterpriseClientRISC
Motivation
HTML
Durchdringung
Cloud
extern intern
extern intern

16. CaptainCasaEnterpriseClientRISC
Motivation
HTML
Durchdringung
Cloud
extern intern
extern intern

17. CaptainCasaEnterpriseClientRISC
Motivation
HTML
Durchdringung
Cloud
extern intern
extern intern
UNBEHAGEN:
Browser/Devicekompatibilität
Performance
Layouting Restrictions
Langfristige Stabilität / Investitionssicherheit
Entwicklungskosten
Wartungskosten
KONTROLLVERLUST

18. CaptainCasaEnterpriseClientRISC
Motivation
HTML
Durchdringung
Cloud
extern intern
extern intern
UNBEHAGEN:
Browser/Devicekompatibilität
Performance
Layouting Restrictions
Langfristige Stabilität / Investitionssicherheit
Entwicklungskosten
Wartungskosten
KONTROLLVERLUST

19. CaptainCasaEnterpriseClientRISC
Wichtige Folie!
WebUIHypes
Bus.Application
Lifecycle

20. CaptainCasaEnterpriseClientRISC
Back to the
80s/90s

21. CaptainCasaEnterpriseClientRISC
Back to the 80s/90s
#
Instructions

22. CaptainCasaEnterpriseClientRISC
Back to the 80s/90s
#
Instructions
Change of Paradigm
Algorithmic
in front
of processor
# Inst.

23. CaptainCasaEnterpriseClientRISC
Back to the 80s/90s
#
Instructions
Complex Instruction Set
Computers
CISC
Change of Paradigm
Algorithmic
in front
of processor
# Inst.
Reduced Instruction Set
Computers
RISC

24. CaptainCasaEnterpriseClientRISC
Back to the 80s/90s
#
Instructions
Complex Instruction Set
Computers
CISC
Change of Paradigm
Algorithmic
in front
of processor
# Inst.
Reduced Instruction Set
Computers
RISC
Algorithmic
Execution

25. CaptainCasaEnterpriseClientRISC
Browser History

26. CaptainCasaEnterpriseClientRISC
Browser History
#Elements
#Attributes
#CSS

27. CaptainCasaEnterpriseClientRISC
Browser History
#Elements
#Attributes
#CSS

28. CaptainCasaEnterpriseClientRISC
Browser History
#Elements
#Attributes
#CSS
Suffering
„Zero Installation!“
„...endless Maintenance“

29. CaptainCasaEnterpriseClientRISC
Traditional Framework Approach
Framework
#Elements
#Attributes
#CSS
Your Frontend App

30. CaptainCasaEnterpriseClientRISC
Traditional Framework Approach
Framework
#Elements
#Attributes
#CSS
Your Frontend App
Still: Suffering

31. CaptainCasaEnterpriseClientRISC
Traditional Framework Approach
Framework
#Elements
#Attributes
#CSS
Your Frontend App
Still: SufferingKomplexitätgesamt = KomplexitätHTML5
+ KomplexitätFramework

32. CaptainCasaEnterpriseClientRISC
Traditional Framework Approach
Framework
#Elements
#Attributes
#CSS
Your Frontend App
Still: SufferingKomplexitätgesamt = KomplexitätHTML5
+ KomplexitätFramework
Komplexitätgesamt = KomplexitätHTML5
* KomplexitätFramework

33. CaptainCasaEnterpriseClientRISC
What's about...

34. CaptainCasaEnterpriseClientRISC
What's about...
...a Change of Paradigm?

35. CaptainCasaEnterpriseClientRISC
Which are the basic elements that „any“
user interface can be built with?

36. CaptainCasaEnterpriseClientRISC
What are the basic elements which
of even complex user interfaces?
1. Rectangles
- with/without text
- with/without background styling
2. Textinput
- single line
- multi line
(3. Graphics)
...and the possibility to
A. position them absolutely (x,y,width,height(,z))
B. compose them

37. CaptainCasaEnterpriseClientRISC
Micro Kernel
RISC Browser Architecture
„2“ El.
Rectangles
Text Input

38. CaptainCasaEnterpriseClientRISC
Micro Kernel
RISC Browser Architecture
„2“ El.
UI Elements
Based
On
Nucleus Elements
Rectangles
Text Input
Reduced Instruction Set
Client
RISC

39. CaptainCasaEnterpriseClientRISC
Micro Kernel
RISC Browser Architecture
„2“ El.
UI Elements
Based
On
Nucleus Elements
Rectangles
Text Input
Reduced Instruction Set
Client
RISC
Button
ComboBox
Grid
Dialog

40. CaptainCasaEnterpriseClientRISC
Framework
Micro Kernel
RISC Browser Architecture
#Elements
#Attributes
#CSS
„2“ El.
UI Elements
Based
On
Nucleus Elements
Complex Instruction Set
Client
CISC
Reduced Instruction Set
Client
RISC
Change of Paradigm

41. CaptainCasaEnterpriseClientRISC
Framework
Micro Kernel
RISC Browser Architecture
#Elements
#Attributes
#CSS
„2“ El.
UI Elements
Based
On
Nucleus Elements
Complex Instruction Set
Client
CISC
Reduced Instruction Set
Client
RISC
Rendering
„Algorithmic“
Rendering „Execution“

42. CaptainCasaEnterpriseClientRISC
RISC Browser Architecture
Micro Kernel
#...
UI Elements
Based
On
Nucleus Elements
ADVANTAGES
• Browser Incompatibility is no
issue.
– The nucleus' size is 1000 lines of
Javascript, currently!
• Performance on current
browsers is excellent.
• Layouting is not bound to
HTML limits.

43. CaptainCasaEnterpriseClientRISC
RISC Browser Architecture
Micro Kernel
#...
UI Elements
Based
On
Nucleus Elements
ADVANTAGES
• Decoupling from HTML
• Regain of Control

44. CaptainCasaEnterpriseClientRISC
RISC Browser Architecture
Micro Kernel
#...
UI Elements
Based
On
Nucleus Elements
CHALLENGES
• Adaptations required
– Accessibility support
– Testing frameworks

45. CaptainCasaEnterpriseClientRISC
Big(ger) Picture

46. CaptainCasaEnterpriseClientRISC
Browser
JS Component
Library
Big(ger) Picture
Nucleus Library
#...
UI Elements
Based
On
Nucleus Elements

47. CaptainCasaEnterpriseClientRISC

48. CaptainCasaEnterpriseClientRISC

49. CaptainCasaEnterpriseClientRISC
Browser
JS Component
Library
Big(ger) Picture
Nucleus Library
#...
UI Elements
Based
On
Nucleus Elements
Frontend
Logic
Backend
Logic
Binding
Concept
Binding
Concept

50. CaptainCasaEnterpriseClientRISC
Browser
JS Component
Library
Big(ger) Picture
Nucleus Library
#...
UI Elements
Based
On
Nucleus Elements
Frontend
Logic
Backend
Logic
Binding
Concept
Binding
Concept
Outside frameworks
must not influence
UI Component Library
-
and vice versa

51. CaptainCasaEnterpriseClientRISC
Browser
JS Component
Library
Example: CaptainCasa Enterprise
Client
Nucleus Library
#...
UI Elements
Based
On
Nucleus Elements
Backend
Logic
Dialog
Processing
Frontend
Rendering
Engine
Layout
XML
Data
Events
Rendering
Events
Filter & Queue

52. CaptainCasaEnterpriseClientRISC
Ist „Server-UI“ old school?
Client UI
Server UI
Mainframe
Fat Client
Web-HTML
JavaScript

53. CaptainCasaEnterpriseClientRISC
Ist „Server-UI“ old school?
• Server-centric UI
– Server state!
– Große Nähe zur Logik
– Effiziente Entwicklung auch komplexer Szenarien
– Function / Data driven
– ==> Sachbearbeiter
• Client-centric UI
– Server stateless
– Kernlogik nur remote erreichbar
– Aufwendige Entwicklung
– Design driven
– ==> Endkonsumenten

54. CaptainCasaEnterpriseClientRISC
Summary

55. CaptainCasaEnterpriseClientRISC
Summary
• The RISC Browser Architecture is a paradigm shift
for using HTML.
• Compatibility by design
– and not: Compatibility by test / resources
• Regain of Control!
– Robustness
– Performance
– Layouting

56. CaptainCasaEnterpriseClientRISC
Summary
• The RISC Browser Architecture is a paradigm shift
for using HTML.
• Compatibility by design
– and not: Compatibility by test / resources
• Regain of Control!
– Robustness
– Performance
– Layouting

57. CaptainCasaEnterpriseClientRISC
Summary
HTML
Durchdringung
Cloud
extern intern
extern intern

58. CaptainCasaEnterpriseClientRISC
HTML
Durchdringung
extern intern
extern intern
Summary
RISC HTML

59. CaptainCasaEnterpriseClientRISC
CaptainCasa Services
• „Druckbetankung“
– Kosten: 2.500 EUR pauschal
3-4 Screen
Scenario Presentable
Prototype
Tag 1 Tag 2

60. CaptainCasaEnterpriseClientRISC
CaptainCasa Services
• Projektbegleitung
– CaptainCasa
– Architektur“setup“
– Erweiterungen
– Krisen
– Community Partner
– Anwendungsentwicklung
– Projektbetreuung

61. CaptainCasaEnterpriseClientRISC
Last but not least
• http://www.CaptainCasa.com
– Download (Free Usage)
– Demos
– Doku