„take the risc!“ · • 1991-2001: sap – ... complex instruction set computers cisc change of...

„Take the RISC!“

Von Java Swing über JavaFXnach HTML.

UI Strategien für operativ genutzteGeschäftsanwendungen.

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

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)

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

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

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

CaptainCasa

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Motivation

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Developers: Eat you own Dog Food!

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


EclipseReisekosten-abrechnung

Projekt-rückmeldung

Powerpoint

MailStack

Overflow

spiegel.de

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC




Powerpoint

Mail

StackOverflow

spiegel.de

WEB Native

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC




Powerpoint

Mail

StackOverflow

spiegel.de

WEB Native

Simpl

icity

firs

t!

Effic

ienc

y fir

st!

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


BankAnwendung

Reisekosten-abrechnung

Recherche

BusinessIntelligence

MailZeit

erfassung

spiegel.de

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


BankAnwendung


Recherche


MailZeiterfassung

spiegel.de

WEB Native

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC



Recherche

Zeiterfassung

spiegel.de

WEB Native

Simpl

icity

firs

t!

BankAnwendung


Mail

Effic

ienc

y fir

st!

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Motivation

extern intern

extern intern

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Motivation

HTMLDurchdringung

Cloud

extern intern

extern intern

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Motivation

HTMLDurchdringung

Cloud

extern intern

extern intern

UNBEHAGEN:

Browser/DevicekompatibilitätPerformance

Layouting Restrictions

Langfristige Stabilität / InvestitionssicherheitEntwicklungskosten

Wartungskosten

KONTROLLVERLUST

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Wichtige Folie!

Web

UI H

ypes

Bu

s. A

ppli

cati

onLi

fe c

ycle

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Demo

• Demo– Swing– JavaFX

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Back to the80s/90s

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Back to the 80s/90s

#Instructions

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Back to the 80s/90s

#Instructions

Change of Paradigm

Algorithmicin front

of processor

# Inst.

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Back to the 80s/90s

#Instructions

Complex Instruction SetComputers

CISC

Change of Paradigm

Algorithmicin front

of processor

# Inst.

Reduced Instruction SetComputers

RISC

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Back to the 80s/90s

#Instructions

Complex Instruction SetComputers

CISC

Change of Paradigm

Algorithmicin front

of processor

# Inst.

Reduced Instruction SetComputers

RISC

Algorithmic

Execution

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Browser History

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Browser History

#Elements#Attributes

#CSS

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Browser History


#CSS

Suffering

„Zero Installation!“„...endless Maintenance“

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Traditional Framework Approach

Framework


#CSS

Your Frontend App

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Framework


#CSS

Your Frontend AppStill: Suffering

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Framework


#CSS

Your Frontend AppStill: SufferingKomplexitätgesamt = KomplexitätHTML5

+ KomplexitätFramework

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Framework


#CSS

Your Frontend AppStill: SufferingKomplexitätgesamt = KomplexitätHTML5

+ KomplexitätFramework

Komplexitätgesamt = KomplexitätHTML5

* KomplexitätFramework

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC What's about...

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC What's about...

...a Change of Paradigm?

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

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

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

What are the basic elements whichof 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

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Micro Kernel

RISC Browser Architecture

„2“ El.

Rectangles

Text Input

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Micro Kernel


„2“ El.

UI ElementsBased

OnNucleus Elements

Rectangles

Text Input

Reduced Instruction SetClientRISC

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Micro Kernel


„2“ El.

UI ElementsBased

OnNucleus Elements

Rectangles

Text Input


Button

ComboBox

Grid

Dialog

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Framework

Micro Kernel



#CSS

„2“ El.

UI ElementsBased

OnNucleus Elements

Complex Instruction SetClientCISC


Change of Paradigm

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Framework

Micro Kernel



#CSS

„2“ El.

UI ElementsBased

OnNucleus Elements

Complex Instruction SetClientCISC


Rendering„Algorithmic“

Rendering „Execution“

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Micro Kernel

#...

UI ElementsBased

OnNucleus 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.

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Micro Kernel

#...

UI ElementsBased

OnNucleus Elements

ADVANTAGES

• Decoupling from HTML

• Regain of Control

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Micro Kernel

#...

UI ElementsBased

OnNucleus Elements

CHALLENGES

• Adaptations required– Accessibility support– Testing frameworks

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Big(ger) Picture

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

BrowserJS ComponentLibrary

Big(ger) Picture

Nucleus Library

#...

UI ElementsBased

OnNucleus Elements

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Big(ger) Picture

Nucleus Library

#...

UI ElementsBased

OnNucleus Elements

FrontendLogic

BackendLogic

BindingConcept

BindingConcept

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Big(ger) Picture

Nucleus Library

#...

UI ElementsBased

OnNucleus Elements

FrontendLogic

BackendLogic

BindingConcept

BindingConcept

Outside frameworksmust not influence

UI Component Library-

and vice versa

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC


Example: CaptainCasa Enterprise Client

Nucleus Library

#...

UI ElementsBased

OnNucleus Elements

BackendLogic

DialogProcessing

FrontendRendering

Engine

Layout XML

DataEvents

Rendering

Events

Filter & Queue

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Ist „Server-UI“ old school?

Client UI

Server UI

Mainframe

Fat Client

Web-HTML

JavaScript

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

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

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Summary

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

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

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Summary

HTMLDurchdringung

Cloud

extern intern

extern intern

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

HTMLDurchdringung

extern intern

extern intern

Summary

RISC HTML

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Last but not least

• http://www.CaptainCasa.com– Download (Free Usage)– Demos– Doku

http://www.CaptainCasa.com/

„take the risc!“ · • 1991-2001: sap – ... complex instruction set computers cisc change of...

Documents