51
JavaFX im UI-Technologiedschungel

JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

JavaFX im

UI-Technologiedschungel

Page 2: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Guten Tag, Hallo, Servus!

• Björn Müller● SAP, AJAX, Swing, JavaFX

• Seit 2007 CaptainCasa Community– Swing für Unternehmensanwendungen– Seit 2012: JavaFX für Unternehmens-

anwendungen

Page 3: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

© Karsten Lentzsch

JAVA Swing JAVA FX HTML5

Page 4: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Im Jahre 2007

JAVA Swing JAVA FX HTML5

Wahl von Java Swingfür

Unternehmensanwendungen

Page 5: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

JA

X 2015

WJA

X 2015

JAX 2016

Java Swing

Java FX

HTML

Page 6: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library
Page 7: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

CaptainCasa Architektur

Rendering Engine

ApplicationInteraction Logic

Business Logic

„Server Side UI“

Data, EventsLayoutFr

onte

ndSe

rver

Page 8: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

CaptainCasa Framework Focus

• ...UI Framework für umfangreiche, langlebige Unternehmensanwendungen...

• ...Sachbearbeiter-Frontends...

Page 9: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

!

Page 10: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

And the winner is...

Client side Development ComfortH

TML5

/Jav

aScr

ipt

Java

Sw

ing

Java

FX

Page 11: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

And the winner is...

Client Performance

HTM

L5/J

avaS

crip

t

Java

Sw

ing

Java

FX

Page 12: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

And the winner is...

Installation Effort on Client Side

HTM

L5/J

avaS

crip

t

Java

Sw

ing

Java

FX

Page 13: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

And the winner is...

Cross Device

HTM

L5/J

avaS

crip

t

Java

Sw

ing

Java

FX

Page 14: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

And the winner is...

Mainstream

HTM

L5/J

avaS

crip

t

Java

Sw

ing

Java

FX

Page 15: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

And the winner is...

Long Term Maintenance Effort

HTM

L5/J

avaS

crip

t

Java

Sw

ing

Java

FX

Page 16: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Web

UI H

ype

sB

us.

Ap

pli

cati

onLi

fe c

ycle

Page 17: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Web

UI H

ype

sB

us.

Ap

pli

cati

onLi

fe c

ycle

Page 18: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Back to the 80s/90s

#Instructions

Page 19: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Back to the 80s/90s

#Instructions

Change of Paradigm

Algorithmicin front

of processor

# Inst.

Page 20: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Back to the 80s/90s

#Instructions

Complex Instruction SetComputers

CISC

Change of Paradigm

Algorithmicin front

of processor

# Inst.

Reduced Instruction SetComputers

RISC

Page 21: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Browser History

#Elements#Attributes

#CSS

Page 22: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Browser History

#Elements#Attributes

#CSS

Page 23: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Browser History

#Elements#Attributes

#CSS

Suffering

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

Page 24: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Traditional Framework Approach

Framework

#Elements#Attributes

#CSS

Your Frontend App

Page 25: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Traditional Framework Approach

Framework

#Elements#Attributes

#CSS

Your Frontend AppStill: Suffering

Page 26: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Traditional Framework Approach

Framework

#Elements#Attributes

#CSS

Your Frontend AppStill: Suffering

KONTR

OLLVE

RLUST

!

Page 27: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

What's about ...

Page 28: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

What's about ...

...a Change of Paradigm?

Take theRISC!

Page 29: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

What are the basic elements that anyuser interface can be built with?

Page 30: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

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

Page 31: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Nucleus Library

RISC Browser Architecture

2 El.

DIV

INPU

T

Page 32: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Nucleus Library

RISC Browser Architecture

2 El.

UI Element LibraryBased

OnNucleus Elements

Reduced Instruction SetClientRISC

DIV

INPU

T

Page 33: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Framework

Nucleus Library

RISC Browser Architecture

#Elements#Attributes

#CSS

2 El.

UI Element LibraryBased

OnNucleus Elements

Complex Instruction SetClientCISC

Reduced Instruction SetClientRISC

Change of Paradigm

DIV

INPU

T

Page 34: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Framework

Nucleus Library

RISC Browser Architecture

#Elements#Attributes

#CSS

2 El.

UI Element LibraryBased

OnNucleus Elements

Complex Instruction SetClientCISC

Reduced Instruction SetClientRISC

Change of Paradigm

DIV

INPU

T

Page 35: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Framework

Nucleus Library

RISC Browser Architecture

#Elements#Attributes

#CSS

2 El.

UI Element LibraryBased

OnNucleus Elements

Complex Instruction SetClientCISC

Reduced Instruction SetClientRISC

Rendering„Algorithmic“

Rendering „Execution“DIV

INPU

T

Page 36: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library
Page 37: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

RISC Browser Architecture

Nucleus Library

#...

UI Element LibraryBased

OnNucleus Elements

ADVANTAGES

• Browser Incompatibility is no issue.

– Browser compatibiliy by design!– And not: browser compatibility

by test...

• Performance on current browsers (JavaScript „Compilers“) is excellent.

• Layouting is not bound to HTML limits.

Page 38: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

NutzungstopologienBr

owse

r

RISC Library

Client seitigeAnwendung

(JavaScript)

Serv

erEvent/U

ser Input

RISC Library

Rendering Engine /Layout Interpreter

(JavaScript)

z.B. REST BA

PI

Data

Layout

Server sideLogic

Serve sideInteraction

Server sideLogic

Client side Interaction Server side Interaction

Page 39: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Never ending story

Server centric UI

Client centric UI

Mainframe

PC

Static Web

JavaScript

?

Page 40: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Never ending story

Server centric UI

Client centric UIClient Side Scenarios

Server Side Scenarios

Page 41: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library
Page 42: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

JavaFX - Summary

• „Gut zu programmieren“• (Ausreichend) Stabil• Performance: „befriedigend bis ausreichend“ ;-)• Deployment: setup.exe

Page 43: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

„JavaFX passt“ - Szenarien

• Viel Client-seitige Logik– Java > JavaScript

• Client-seitiger Zugriff auf Resourcen– File System, serielle Schnittstelle, TCP/IP

• Explizite Unabhängigkeit vom Browser

• Interaktion auf Pixel-Ebene

Page 44: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library
Page 45: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

JavaFX für Unternehmensanwendungen

• Schwierig zu positionieren– Kein Mainstream– Keine „Zero Installation“– Keine Pixel-Interaktion

• „Einfach so“ einsetzen ist nicht möglich, Sie brauchen einen echten Grund! ;-)

– Java ist für bestimmte Szenarien ein guter Grund

Page 46: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

JavaFX für Unternehmensanwendungen

• CaptainCasa Sicht– RISC HTML Ansatz löst die Probleme, die wir mit

JavaFX hatten– JavaFX Positionierung ist/wird deutlich geringer

Page 47: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Im Jahr 2016, mit RISC based HTML

Page 48: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Im Jahre 2016

JAVA SwingJAVA FX

RISC HTML ;-)

Page 49: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Swing

HTML V.

JavaFX

CaptainCasaEnterprise Client

2007 2016

Page 50: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Take the “RISC”! reduced instruction set client

A substantially different architecture forindustry-stable HTML Web UIs.

browser-compatible by designfast by design robust by design

zero installation – zero maintenance

Page 51: JavaFX im UI-Technologiedschungel · A. position them absolutely (x,y,width,height(,z)) B. compose them. Nucleus Library RISC Browser Architecture ... #CSS 2 El. UI Element Library

Und zu guter Letzt - CaptainCasa

• Phantastischer Stand auf der JAX• Phantastische Werbegeschenke! (am Nachbarstand)

• Phantastische Web Seite• Phantastische Community

• Phantastisches Rich Client Framework für Unternehmensanwendungen