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

Transcription

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

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

3 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 CaptainCasa

5 Motivation

6 Developers: Eat you own Dog Food!

7 Developers: Eat you own Dog Food! Reisekostenabrechnung Eclipse Powerpoint Projektrückmeldung spiegel.de Stack Overflow Mail

8 Developers: Eat you own Dog Food! Stack Overflow Reisekostenabrechnung Projektrückmeldung spiegel.de WEB Eclipse Mail Powerpoint Native

9 it y ie nc y fi r fi r st! st! Developers: Eat you own Dog Food! Reisekostenabrechnung Projektrückmeldung spiegel.de WEB ic Eclipse Mail Ef f Si m pl ic Stack Overflow Powerpoint Native

10 Developers: Eat you own Dog Food!

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

12 Developers: Eat you own Dog Food! spiegel.de Bank Anwendung Recherche Reisekostenabrechnung Zeit erfassung WEB Business Intelligence Mail Native

13 fi r fi r st! st! Developers: Eat you own Dog Food! it y ie nc y spiegel.de ic Ef f Si m pl ic Bank Anwendung Recherche Reisekostenabrechnung Zeit erfassung WEB Business Intelligence Mail Native

14 Motivation extern intern extern intern

15 Motivation HTML Durchdringung Cloud extern intern extern intern

16 Motivation HTML Durchdringung Cloud extern intern extern intern

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

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

19 Bus. Application Life cycle Web UI Hypes Wichtige Folie!

20 Demo Demo Swing JavaFX

21 Back to the 80s/90s

22 Back to the 80s/90s # Instructions

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

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

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

26 Browser History

27 Browser History #Elements #Attributes #CSS

28 Browser History #Elements #Attributes #CSS

29 Browser History Suffering Zero Installation!...endless Maintenance #Elements #Attributes #CSS

30 Traditional Framework Approach Your Frontend App Framework #Elements #Attributes #CSS

31 Traditional Framework Approach Your Frontend App Still: Suffering Framework #Elements #Attributes #CSS

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

33 Traditional Framework Approach Your Frontend App Still:=Suffering Komplexitätgesamt KomplexitätHTML5 + KomplexitätFramework Framework Komplexität #Elements gesamt #Attributes #CSS = KomplexitätHTML5 * KomplexitätFramework

34 What's about...

35 What's about......a Change of Paradigm?

36 Which are the basic elements that any user interface can be built with?

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

38 RISC Browser Architecture Rectangles Text Input Micro Kernel 2 El.

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

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

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

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

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

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

45 RISC Browser Architecture CHALLENGES Adaptations required UI Elements Based On Nucleus Elements Micro Kernel #... Accessibility support Testing frameworks

46 Big(ger) Picture

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

48

49

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

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

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

53 Ist Server-UI old school? Client UI Fat Client JavaScript Mainframe Server UI Web-HTML

54 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

55 Summary

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

58 Summary HTML Durchdringung Cloud extern intern extern intern

59 Summary HTML Durchdringung RISC HTML extern intern extern intern

60 Last but not least Download (Free Usage) Demos Doku