34
05.07.2012 Leichtgewichtige Web 2.0-Architektur für komplexe Business-Anwendungen Nicolas Moser PRODYNA AG

Leichtgewichtige Web 2.0-Architektur für komplexe Business ...alt.java-forum-stuttgart.de/jfs//2012/folien/E1.pdf05.07.2012 Leichtgewichtige Web 2.0-Architektur für komplexe Business-Anwendungen

Embed Size (px)

Citation preview

05.07.2012

Leichtgewichtige Web 2.0-Architektur für komplexe Business-Anwendungen

Nicolas Moser PRODYNA AG

© PRODYNA AG 2012 2 © PRODYNA AG 2012 2 © PRODYNA AG 2012

Agenda

01 Einführung 02 Architektur 03 Lösungen 04 Zusammenfassung

2

© PRODYNA AG 2012 3 © PRODYNA AG 2012 3 © PRODYNA AG 2012

Agenda

01 Einführung 02 Architektur 03 Lösungen 04 Zusammenfassung

3

© PRODYNA AG 2012 4 © PRODYNA AG 2012 4 © PRODYNA AG 2012

• Was ist eine Business Anwendung?

• Bildet verschiedene Prozesse eines Unternehmens ab

• Problematik

• Immer wiederkehrende Anforderungen

• Kein kompletter Ansatz für Business Anwendungen vorhanden

• NABUCCO Idee

• Ein Framework mit einer Architektur für unterschiedliche Business Anwendungen zu schaffen

Einführung Architekturen für Business Anwendungen

4

© PRODYNA AG 2012 5 © PRODYNA AG 2012 5 © PRODYNA AG 2012

• Leichtgewichtig und Performant

• Kurze Ladezeiten / Keine langen Wartepausen

• Kontinuierliches Arbeiten ermöglichen

• Wiederverwendbar und Konfigurierbar

• LEGO Baukastenprinzip

• Business Anwendungen unterschiedlicher Arten

• Unabhängig

• Open Source Framework

• Keine Lizenzabhängigkeiten

Einführung Unsere Anforderungen an ein Framework für Business Anwendung

5

© PRODYNA AG 2012 6 © PRODYNA AG 2012 6 © PRODYNA AG 2012

• Web 2.0

• HTML, CSS, JavaScript

• AJAX, XHR, JSON

• Server-Zentrisch

• Thin Client (beschränkt auf DOM Manipulation)

• Ressourcen Orientiert (REST)

• KISS Prinzip

Einführung Unsere Anforderungen an ein Framework für Business Anwendung

6

© PRODYNA AG 2012 7 © PRODYNA AG 2012 7 © PRODYNA AG 2012

• Zusammenstecken vorhandener Frameworks

• Universeller Ansatz

• Basisarchitektur

• Getestete Funktionalität

• Schnelle Ergebnisse

• Eigenentwicklung

• Individueller Ansatz

• Spezielle Lösungen für spezielle Probleme

• Optimierungsmöglichkeiten

• Keine Abhängigkeiten (Releases, Lizenzen)

Einführung Entwicklungsmöglichkeiten

7

© PRODYNA AG 2012 8 © PRODYNA AG 2012 8 © PRODYNA AG 2012

• Beispiele für aktuelle Web Anwendungen

• Amazon

• Google Mail

• Facebook

• Wikipedia

• Outlook Web Access

• Nicht auf Basis von Frameworks entwickelt

Einführung Heutige Web Anwendungen

8

© PRODYNA AG 2012 9 © PRODYNA AG 2012 9 © PRODYNA AG 2012

Agenda

01 Einführung 02 Architektur 03 Lösungen 04 Zusammenfassung

9

© PRODYNA AG 2012 10 © PRODYNA AG 2012 10 © PRODYNA AG 2012

Architektur Browser

HTML, CSS, JavaScript, JSON

Client

Web Server

Application Server

Servlet Servlet

Service Proxy

Component Tree

Component Component Component

Database External System

10

© PRODYNA AG 2012 11 © PRODYNA AG 2012 11 © PRODYNA AG 2012

Architektur Browser

HTML, CSS, JavaScript, JSON

Client

Web Server

Application Server

Servlet Servlet

Service Proxy

Component Tree

Component Component Component

Database External System

11

© PRODYNA AG 2012 12 © PRODYNA AG 2012 12 © PRODYNA AG 2012

Architektur Browser

HTML, CSS, JavaScript, JSON

Client

Web Server

Application Server

Servlet Servlet

Service Proxy

Component Tree

Component Component Component

Database External System

12

© PRODYNA AG 2012 13 © PRODYNA AG 2012 13 © PRODYNA AG 2012

Architektur Browser

HTML, CSS, JavaScript, JSON

Client

Web Server

Application Server

Servlet Servlet

Service Proxy

Component Tree

Component Component Component

Database External System

13

© PRODYNA AG 2012 14 © PRODYNA AG 2012 14 © PRODYNA AG 2012

Architektur Browser

HTML, CSS, JavaScript, JSON

Client

Web Server

Application Server

Servlet Servlet

Service Proxy

Component Tree

Component Component Component

Database External System

14

© PRODYNA AG 2012 15 © PRODYNA AG 2012 15 © PRODYNA AG 2012

Agenda

01 Einführung 02 Architektur 03 Lösungen 04 Zusammenfassung

15

© PRODYNA AG 2012 16 © PRODYNA AG 2012 16 © PRODYNA AG 2012

Lösungen Layout

• Konfigurierbares Layout

• Layout der Anwendung ist individuell konfigurierbar

• Konfiguration per XML

• Kein Anpassen von HTML, CSS, JavaScript notwendig

• Layouting nach LEGO Prinzip

• Verschiedene Bestandteile

• Individuell zusammensteckbar

16

© PRODYNA AG 2012 17 © PRODYNA AG 2012 17 © PRODYNA AG 2012

Lösungen Layout

Titlebar

Statusbar

NABUCCO Application

Logo Search

Version 17

© PRODYNA AG 2012 18 © PRODYNA AG 2012 18 © PRODYNA AG 2012

Lösungen Layout

Titlebar

Statusbar

NABUCCO Application

Perspective Area Perspective 1 Perspective 2

18

© PRODYNA AG 2012 19 © PRODYNA AG 2012 19 © PRODYNA AG 2012

Lösungen Layout

Titlebar

Statusbar

NABUCCO Application

Perspective Area Perspective 1

Perspective 2 Perspective 3 Perspective 4

19

© PRODYNA AG 2012 20 © PRODYNA AG 2012 20 © PRODYNA AG 2012

Lösungen Layout

Titlebar

Statusbar

NABUCCO Application

Perspective Area

Navigation Area

Browser Area

Entry A

Entry B

Entry A

Entry A

20

© PRODYNA AG 2012 21 © PRODYNA AG 2012 21 © PRODYNA AG 2012

Lösungen Layout

Titlebar

Statusbar

NABUCCO Application

Perspective Area

Navigation Area

Browser Area

Editing Area

List / Editor / Dashboard

Tab 1 Tab 2 Tab 3

21

© PRODYNA AG 2012 22 © PRODYNA AG 2012 22 © PRODYNA AG 2012

• Listen Layouting

• Listen stellen Mengen von Daten in einer Tabelle dar

• Serverseitiges Paging, Filtern & Sortieren

• Konfigurierbare Titel, Größe, Filter, Sortierung

Lösungen Layout

0-7 of 50

Name Description Status Type

Filter Menu

22

<column

id="name"

property="name"

label="Name"

tooltip="Projektname"

width="15"

visible="true"

sortable="true" />

Column Konfiguration

© PRODYNA AG 2012 23 © PRODYNA AG 2012 23 © PRODYNA AG 2012

• Editor und Dashboard Layouting

• Aufteilung in zweidimensionales Grid

• Controls werden auf dem Grid platziert

• Layout Hints definieren die Ausrichtung

• Eigene Controls und Widgets

• Text-Field, Combo-Box, Date-Picker, etc.

• Bar-Chart, Pie-Chart, etc.

Lösungen Layout

A0-B0

23

<text

id="name"

property="name"

label="Name"

tooltip="Projektname"

position="A0-B0"

hint="std" />

Text-Field Konfiguration

© PRODYNA AG 2012 24 © PRODYNA AG 2012 24 © PRODYNA AG 2012

• Binding

• Controls werden per Property-Name an Attribute gebunden

• Keine Verwendung von Java Reflection dank eigener MDA

Lösungen Layout

24

NABUCCO Name

Description A framework for lightweight business applications

Project Status Running

Project Type Fixed Price

Editing Area Tab 1

© PRODYNA AG 2012 25 © PRODYNA AG 2012 25 © PRODYNA AG 2012

Lösungen Live Demo

25

© PRODYNA AG 2012 26 © PRODYNA AG 2012 26 © PRODYNA AG 2012

Lösungen Komponentenbaum

• Server kennt und verwaltet den Client

• Baum aller Anwendungsbestanteile

• Serverseitige Abbildung der UI Elemente

• Ressourcensicht

• Ressourcen werden per URL angesprochen

• HTTP GET liefert die Ressource

• HTTP PUT ändert die Ressource

• HTTP POST legt neue Ressource an

• HTTP DELETE löscht die Ressource

26

© PRODYNA AG 2012 27 © PRODYNA AG 2012 27 © PRODYNA AG 2012

Lösungen Komponentenbaum

27

© PRODYNA AG 2012 28 © PRODYNA AG 2012 28 © PRODYNA AG 2012

Lösungen Komponentenbaum

28

© PRODYNA AG 2012 29 © PRODYNA AG 2012 29 © PRODYNA AG 2012

Lösungen Komponentenbaum

HTTP GET Request 29

© PRODYNA AG 2012 30 © PRODYNA AG 2012 30 © PRODYNA AG 2012

Agenda

01 Einführung 02 Architektur 03 Lösungen 04 Zusammenfassung

30

© PRODYNA AG 2012 31 © PRODYNA AG 2012 31 © PRODYNA AG 2012

• NABUCCO Business Framework

• Leichtgewichtig & Performant

• Wiederverwendbar

• Konfigurierbar

• Simpel

• Unabhängig

• Open Source

• NABUCCO Human Resources

• Referenzimplementierung

Zusammenfassung

31

© PRODYNA AG 2012 32 © PRODYNA AG 2012 32 © PRODYNA AG 2012

Fragen?

Stand Nummer 23 32

Uns gibt’s auch hier im Java Forum!

© PRODYNA AG 2012 33 © PRODYNA AG 2012 33 © PRODYNA AG 2012

• NABUCCO

• http://nabucco.org/

• http://github.com/nabucco/

• PRODYNA

• http://www.prodyna.com/

• http://www.prodyna.com/nabucco-business-framework/

Vielen Dank für Ihre Aufmerksamkeit

33

© PRODYNA AG 2012 34 © PRODYNA AG 2012 34 © PRODYNA AG 2012

PRODYNA AG Ludwig-Erhard-Straße 12-14 65760 Eschborn Telefon +49 69 597724-0 Telefax +49 69 597724-700 [email protected] www.prodyna.com PRODYNA AG Stuttgart Wilhelmsplatz 11 70182 Stuttgart Telefon +49 711 596004-22 Telefax +49 711 596004-11

Ihr Ansprechpartner: Nicolas Moser Software Engineer

[email protected]

Unsere Kontaktdaten

34