SlideShare ist ein Scribd-Unternehmen logo
05/16/12
RESTful Web-UI Architecture
Sandro Sonntag, Technical Lead
adorsys GmbH & Co. KG
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Die Probleme von herkömmlichen
Thin-Client-Architekturen
2
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Daten und Repräsentation
sind vermischt
Browser Server
Name Foo
Nachname Bar
Str Laufer-Str 99
➡Datenstrukturen?
➡Datentypen?
<html>
<body>
<span>Name: Foo</
span>
➡Daten und
Repäsentation
gemischt
➡Präsentationsflow und
Datenaustausch gemischt
3
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Resourcen am Client werden nicht genutzt
Rich-Server
berechnet das
GUI
für jeden
Client
Client
Client
Client
4
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Usability erfordert eine flüssige Bedienung.
Hohe Latenz
Seite 1 Seite 2 Seite 3 Seite 4
Browser
GET POST POST POST
➡Herkömmliche Webapps reagieren zu langsam auf
Benutzer-Interaktionen.
5
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Komplexität
Präsentationslogik ist am Client und
Server
Webframework ein Codegenerator
für HTML & JS(denken in 2
Dimensionen - sehr umständlich)
HTML muss erst in Server Templates
verpackt werden
Debugging in zwei
Laufzeitumgebungen (Client/
Server)
Der meiste Code dreht sich um das
Event/Request Handling
(Serialisierung, Protokoll quirx)
Korrektes State Handling unmöglich
Client Code
(HTML, JS, CSS)
Webframework
Generate
GUIEvents
State
6
State
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
UI-State am Server
Problem: Statemanagement
State am Client muss nicht zum Server State passen.
Fehlerbehandlung hierfür ist komplex.
Client muss immer auf den richtigen Server geroutet werden
Skalierung und Failover ein echtes Problem (und sehr teuer)
Speicherverbrauch am Server (Beispiel JSF Component Tree)
Server behelfen sich mit Sessiontimeouts (Session bleibt meist noch 30 Minuten
wenn der User bereits weg ist)
7
05/16/12
Offlinefähigkeit
Nicht möglich
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Fehlende Interoperabilität
HTML Markup ist keine Schnittstelle
Echte Services sind häufig nicht von „außen“ zugreifbar (z.B. Spring Services)
• ... nein, man kann Sie nicht einfach zum Webservice machen!
◦ es ist ein fundamentaler Unterschied ob ein Service als WebService oder lokaler Service
konzeptioniert wurde (Fehlerbehandlung, Call by Value, Granularität)
• Ergo: Webservice Projekte müssen von 0 starten
◦ Risiko das Rad neu zu erfinden
Fehlender Fokus auf qualitative Schnittstellen („die sind ja nicht von außen
erreichbar“)
Präsentation und Geschäftslogik in einem Tier fördert das vermischen zu
einem „Brei“
9
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Symptome linderbar, aber nicht fixbar!
Zustand -> HTTPSession/Conversations
AJAX Feeling -> Partitial Page Rendering
Multi Windows -> Conversations
Browserhistory -> Post/Redirect/Get (PRG)
Browsernavigation -> bsw. durch JSF-State-Saving und Memory limitiert
Failover -> Session Replication ist nicht praktikabel! (Speicher, Kosten, Network
Traffic..)
Verhindert echtes Webscale!
10
05/16/12
Ausweg:
Thin-Server-Architekturen
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
3 Tier - so wie es sein soll
Business Logic
HTML Renderer
Controller View
Model
Server
Client
Präsentation
Controller View
Model API
Business Logic
Server
Client
12
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
DOM
und so in JavaScript:
Event Listener Function
1. addEventListener
2. getElementById
/backend
3. jQuery.ajax
13
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Zur Erinnerung: Der JSF Lifecycle
14
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Die Möglichkeiten des Browsers den Zustand zu speichern...
Stateless Server aber wohin mit dem State?
JS var
Cookie
local/session Storage
BrowserDB
HTML5 History API
URL Hash (#)
15
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Semantic HTML 5
Don’t hide the Web
HTML als Inhalts-Beschreibungssprache
CSS für das Layout
CSS/ Javascript Features variieren zwischen den Browsertypen
Aber: Oberfläche sollte in den immer funktional bedienbar sein
“Progressive-Enhancement” für “Aufhübschung” von Oberflächen ohne
funktionalen Einfluss
Gutes HTML hat einen hohen Wert!
• Responsive Webdesign
• Suchmaschienen
• Geringer Datentransfer
• Leichte Anpassbarkeit des Layouts
Eine gute HTML Struktur ist vergleichbar mit OOD und erfordert Erfahrung
• Floting boxes, CSS Classes/ID, DIV, Browserkompatibilität etc
Mit HTML Frameworks wie Bootstrap kann man die gröbsten Fehler vermeiden
16
05/16/12
HTML(5) hat alles was man braucht
JavaScript für die Oberfächensteuerung
DOM Selector API um die View zu manipulieren
AJAX für den Zugriff auf Geschäftslogik
05/16/12
No Serverside Webframeworks
HTML5 ist das Framework!
05/16/12
Von JavaScript und HTML zu
einer wartbaren Frontend-Architektur
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Auch einfache Anwendungen erfordern eine
Architektur
20
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
für einfache Anwendungen
Rich Internet Application (RIA) Architecture
View (HTML)
Controller (JS)
Service / Resource
Network
‣ Ein großes Javascript...
‣ Eine HTML-Seite bestehend aus “Unter-Seiten”
‣Nicht geeignet für komplexe Anwendungen
21
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
erfordern Komponentisierung
RIA’s
22
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Model View Presenter (MVP) vs. MVC Pattern
View
Presenter
Model
ModelView
Controller
23
prostuliert durch Google
First Class Pattern in GWT
Vorteil: Bessere Trennung von UI und Controller-Logik
• Dadurch:
• Bessere Austauschbarkeit von Model,View und Controller
• Bessere Testbarkeit
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
erfordert ein Bus System
Kommunikation in Rich Internet Applications
24
Network
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Mail ChatMenü
Lose Kopplung von UI-Komponenten
durch Pub/Sub
View
Presenter
Event Bus
View
Presenter
View
Presenter
Application
Controller
Service
25
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
hierdurch ist Wiederverwendung von Fachlichen UI-Komponenten möglich
Komponentisierte Frontend-Architektur
26
KomponenteKomponente
Widget
Application Controller
Dialog
Event Bus
Sitzung
Öffentlicher Service
Dialog
View
Event
(sende Richtung)
Dependency
(Abhängkeit zu)
Legende
Dialog
Komponenten Controller
Öffentlicher Service
Optionaler
Baustein
Dialog
Presenter
View
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Gängige Webservice-Protokolle
Grundsätzlich HTTP basiert
RESTful HTTP
• JSON
• XML
• Feeds - ATOM/RSS
• RDF
SOAP / WS-*
Push Technologien
• Comet/Ajax Push
• Websocket
27
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
und JSON auf dem Vormarsch
RESTful HTTP ist führend
28
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
REST Principals
Give every “thing” an ID
Link things together
Use standard methods
Resources with multiple representations
Communicate statelessly
29
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Warum REST?
Skalierung
Fehlertoleranz
Wiederherstellbarkeit
Sicherheit
Lose Kopplung
30
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
für lose Kopplung von Severices
Hypermedia
Inspiriert von Hypertext. Paradigma: folge den Links
Schlagwort: HATEOAS (Hypertext As The Enging Of Application State)
• Resourcen sind selbst beschreibend
• Gibt Auskunft über State und Verhalten
Ziel: Applikationen sollten kein Wissen über die semantic von URLs haben
(starke Kopplung)
31
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Beispiel einer Hypermedia HTTP Response
32
<articles total="1921" xmlns:atom="http://www.w3.org/2005/Atom">
<atom:link rel="self" href="http://www.example.org/articles?contains=cycling&start=10"/>
<atom:link rel="prev" href="http://www.example.org/books?contains=cycling"/>
<atom:link rel="next" href="http://www.example.org/books?contains=cycling&start=20"/>
<article>
<atom:link rel="self" href="http://www.nytimes.com/2009/07/15/sports/cycling/15tour.html"/>
<title>For Italian, Yellow Jersey Is Fun While It Lasts</title>
<body>...</body>
</article>
<article>
<atom:link rel="alternate" href="http://www.nytimes.com/2009/07/27/sports/cycling/27tour.html"/>
<title>Contador Wins, but Armstrong Has Other Victory</title>
<body>...</body>
</article>
</articles>
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
GUI Rendering am Client
Konzept: Stateless Backend
• REST
• Caching (Client/Server)
• einfache und „billige“ Skalierung
• durch zusätzliche Hardware
• keine (sticky) Sessions
◦ transparent Failover
Scaling RESTful Architectures
Server Server
Client Client
33
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Authentication in RESTful Apps
Gängige Authentisierung in Severside-Webapps basiert auf HttpSession Auth
• Aber: nicht Restful (HTTPSession)
Restful Authentisierung erfordert Zustandslosigkeit (Server seitig)
Restful Technologien:
• Simple per HTTP Basic/Digest Auth
• Client Cert Auth
• Security Tokens
◦ Eigene Protokolle
◦ OAuth
◦ OpenID
34
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
RESTful Authentication mit OAuth
Service
Provider
Service
Client 4. erzeuge Access Token
2.AuthentisiererequestToken
Token
Server
(IdP)
1. erzeuge Request Token
5. API Call
3. redirect request Token
param
6.checkToken
35
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Zusammenfassung
Der REST
Die klassischen Frameworks wie JSF/Stuts kommen aus einer Zeit (2000-2004) in
der AJAX und JavaScript noch keine grosse Rolle gespielt haben
Heutige Anforderungen an User Experience lassen sich mit klassischen
Technologien nur unter Schmerzen umsetzen
Server-Side-Frameworks können mit den Anforderungen umgehen, sind
jedoch keinenfalls dafür entwickelt worden
Die Komplexität von aufgerüsteten Server-Side-Anwendungen steigt eminent
durch den Mix von JavaScript und AJAX
Die Architektur des Webs (RESTful) wird bei vielen Server-Side-Anwendungen
gebrochen mit Auswirkungen auf Robustheit, Skallierung und User
Experience
36

Weitere ähnliche Inhalte

Was ist angesagt?

MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
Nico Steiner
 
Spring 2.0
Spring 2.0Spring 2.0
Spring 2.0
Thorsten Kamann
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
gedoplan
 
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Christian Janz
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
schmichri
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Nico Steiner
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
Tobias Kraft
 
C1 CDH Sametime
C1 CDH SametimeC1 CDH Sametime
C1 CDH Sametime
Andreas Schulte
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Oliver Hader
 
SCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - Winterberg
SCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - WinterbergSCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - Winterberg
SCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - Winterberg
OPITZ CONSULTING Deutschland
 
JBoss ESB
JBoss ESBJBoss ESB
Web Components
Web ComponentsWeb Components
Web Components
Oliver Hader
 
WebLogic Server auf ODA: Erfahrungen aus einem Kundenprojekt
WebLogic Server auf ODA: Erfahrungen aus einem KundenprojektWebLogic Server auf ODA: Erfahrungen aus einem Kundenprojekt
WebLogic Server auf ODA: Erfahrungen aus einem Kundenprojekt
OPITZ CONSULTING Deutschland
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
Virttoo org
 
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreibenSQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
Jan Hentschel
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
chmoser79
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
OPEN KNOWLEDGE GmbH
 

Was ist angesagt? (19)

MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Spring 2.0
Spring 2.0Spring 2.0
Spring 2.0
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
 
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
C1 CDH Sametime
C1 CDH SametimeC1 CDH Sametime
C1 CDH Sametime
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
 
SCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - Winterberg
SCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - WinterbergSCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - Winterberg
SCA und SDO: Konzepte und Design - OPITZ CONSULTING - Maier - Winterberg
 
JBoss ESB
JBoss ESBJBoss ESB
JBoss ESB
 
Web Components
Web ComponentsWeb Components
Web Components
 
WebLogic Server auf ODA: Erfahrungen aus einem Kundenprojekt
WebLogic Server auf ODA: Erfahrungen aus einem KundenprojektWebLogic Server auf ODA: Erfahrungen aus einem Kundenprojekt
WebLogic Server auf ODA: Erfahrungen aus einem Kundenprojekt
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreibenSQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 

Ähnlich wie Restful Frontend-Architecture

Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...
Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...
Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...
Stefan Ehrlich
 
Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud
Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud
Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud
Stefan Ehrlich
 
TRANSCONNECT® cloud (SQL Projekt AG)
TRANSCONNECT® cloud (SQL Projekt AG)TRANSCONNECT® cloud (SQL Projekt AG)
TRANSCONNECT® cloud (SQL Projekt AG)
SQL Projekt AG
 
Lambdaarchitektur für BigData
Lambdaarchitektur für BigDataLambdaarchitektur für BigData
Lambdaarchitektur für BigData
Andreas Buckenhofer
 
SOA Suite 12c aus der Infrastruktur-Sicht
SOA Suite 12c aus der Infrastruktur-SichtSOA Suite 12c aus der Infrastruktur-Sicht
SOA Suite 12c aus der Infrastruktur-Sicht
OPITZ CONSULTING Deutschland
 
Architekturen für .NET Core-Anwendungen
Architekturen für .NET Core-AnwendungenArchitekturen für .NET Core-Anwendungen
Architekturen für .NET Core-Anwendungen
Robin Sedlaczek
 
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
OPEN KNOWLEDGE GmbH
 
Microsoft Environments aus der Cloud
Microsoft Environments aus der CloudMicrosoft Environments aus der Cloud
Microsoft Environments aus der Cloud
Beck et al. GmbH
 
SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?
IOZ AG
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Niels de Bruijn
 
Cloud Computing Übersicht
Cloud Computing ÜbersichtCloud Computing Übersicht
Cloud Computing Übersicht
artgrohe
 
OpenBib und Linked Open Data - Weiterentwicklung eines Recherche-Portals
OpenBib und Linked Open Data - Weiterentwicklung eines Recherche-PortalsOpenBib und Linked Open Data - Weiterentwicklung eines Recherche-Portals
OpenBib und Linked Open Data - Weiterentwicklung eines Recherche-Portals
flimm
 
Multichannel Application Development Best Practices
Multichannel Application Development Best PracticesMultichannel Application Development Best Practices
Multichannel Application Development Best Practices
Andreas Koop
 
Cloud Connectivity - Herausforderungen und Loesungen
Cloud Connectivity - Herausforderungen und LoesungenCloud Connectivity - Herausforderungen und Loesungen
Cloud Connectivity - Herausforderungen und Loesungen
Daniel Steiger
 
Cloud Konzepte und Strategien
Cloud Konzepte und StrategienCloud Konzepte und Strategien
Cloud Konzepte und Strategien
ARS Computer und Consulting GmbH
 
Azure Hybrid Connections
Azure Hybrid ConnectionsAzure Hybrid Connections
Azure Hybrid Connections
Robin Sedlaczek
 
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
Nikolaos Kaintantzis
 
Cloud ms0.9
Cloud ms0.9Cloud ms0.9
Cloud ms0.9
Tom Peruzzi
 

Ähnlich wie Restful Frontend-Architecture (20)

Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...
Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...
Mit TransConnect® einfach die Produktion vernetzen: mit wenigen Schritten zur...
 
Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud
Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud
Integration von OnSite- und Cloud-Systemen mit TransConnect® cloud
 
TRANSCONNECT® cloud (SQL Projekt AG)
TRANSCONNECT® cloud (SQL Projekt AG)TRANSCONNECT® cloud (SQL Projekt AG)
TRANSCONNECT® cloud (SQL Projekt AG)
 
Lambdaarchitektur für BigData
Lambdaarchitektur für BigDataLambdaarchitektur für BigData
Lambdaarchitektur für BigData
 
SOA Suite 12c aus der Infrastruktur-Sicht
SOA Suite 12c aus der Infrastruktur-SichtSOA Suite 12c aus der Infrastruktur-Sicht
SOA Suite 12c aus der Infrastruktur-Sicht
 
Architekturen für .NET Core-Anwendungen
Architekturen für .NET Core-AnwendungenArchitekturen für .NET Core-Anwendungen
Architekturen für .NET Core-Anwendungen
 
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
 
Microsoft Environments aus der Cloud
Microsoft Environments aus der CloudMicrosoft Environments aus der Cloud
Microsoft Environments aus der Cloud
 
SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
 
Cloud Computing Übersicht
Cloud Computing ÜbersichtCloud Computing Übersicht
Cloud Computing Übersicht
 
OpenBib und Linked Open Data - Weiterentwicklung eines Recherche-Portals
OpenBib und Linked Open Data - Weiterentwicklung eines Recherche-PortalsOpenBib und Linked Open Data - Weiterentwicklung eines Recherche-Portals
OpenBib und Linked Open Data - Weiterentwicklung eines Recherche-Portals
 
Multichannel Application Development Best Practices
Multichannel Application Development Best PracticesMultichannel Application Development Best Practices
Multichannel Application Development Best Practices
 
Cloud Connectivity - Herausforderungen und Loesungen
Cloud Connectivity - Herausforderungen und LoesungenCloud Connectivity - Herausforderungen und Loesungen
Cloud Connectivity - Herausforderungen und Loesungen
 
Cloud Konzepte und Strategien
Cloud Konzepte und StrategienCloud Konzepte und Strategien
Cloud Konzepte und Strategien
 
Hsps2014
Hsps2014Hsps2014
Hsps2014
 
Azure Hybrid Connections
Azure Hybrid ConnectionsAzure Hybrid Connections
Azure Hybrid Connections
 
Kevin Hofer
Kevin HoferKevin Hofer
Kevin Hofer
 
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
Thin, Rich und RIA Clients entwirrt -- und Faktoren, die Sie zum geeigneten C...
 
Cloud ms0.9
Cloud ms0.9Cloud ms0.9
Cloud ms0.9
 

Restful Frontend-Architecture

  • 1. 05/16/12 RESTful Web-UI Architecture Sandro Sonntag, Technical Lead adorsys GmbH & Co. KG
  • 2. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Die Probleme von herkömmlichen Thin-Client-Architekturen 2
  • 3. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Daten und Repräsentation sind vermischt Browser Server Name Foo Nachname Bar Str Laufer-Str 99 ➡Datenstrukturen? ➡Datentypen? <html> <body> <span>Name: Foo</ span> ➡Daten und Repäsentation gemischt ➡Präsentationsflow und Datenaustausch gemischt 3
  • 4. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Resourcen am Client werden nicht genutzt Rich-Server berechnet das GUI für jeden Client Client Client Client 4
  • 5. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Usability erfordert eine flüssige Bedienung. Hohe Latenz Seite 1 Seite 2 Seite 3 Seite 4 Browser GET POST POST POST ➡Herkömmliche Webapps reagieren zu langsam auf Benutzer-Interaktionen. 5
  • 6. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Komplexität Präsentationslogik ist am Client und Server Webframework ein Codegenerator für HTML & JS(denken in 2 Dimensionen - sehr umständlich) HTML muss erst in Server Templates verpackt werden Debugging in zwei Laufzeitumgebungen (Client/ Server) Der meiste Code dreht sich um das Event/Request Handling (Serialisierung, Protokoll quirx) Korrektes State Handling unmöglich Client Code (HTML, JS, CSS) Webframework Generate GUIEvents State 6 State
  • 7. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG UI-State am Server Problem: Statemanagement State am Client muss nicht zum Server State passen. Fehlerbehandlung hierfür ist komplex. Client muss immer auf den richtigen Server geroutet werden Skalierung und Failover ein echtes Problem (und sehr teuer) Speicherverbrauch am Server (Beispiel JSF Component Tree) Server behelfen sich mit Sessiontimeouts (Session bleibt meist noch 30 Minuten wenn der User bereits weg ist) 7
  • 9. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Fehlende Interoperabilität HTML Markup ist keine Schnittstelle Echte Services sind häufig nicht von „außen“ zugreifbar (z.B. Spring Services) • ... nein, man kann Sie nicht einfach zum Webservice machen! ◦ es ist ein fundamentaler Unterschied ob ein Service als WebService oder lokaler Service konzeptioniert wurde (Fehlerbehandlung, Call by Value, Granularität) • Ergo: Webservice Projekte müssen von 0 starten ◦ Risiko das Rad neu zu erfinden Fehlender Fokus auf qualitative Schnittstellen („die sind ja nicht von außen erreichbar“) Präsentation und Geschäftslogik in einem Tier fördert das vermischen zu einem „Brei“ 9
  • 10. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Symptome linderbar, aber nicht fixbar! Zustand -> HTTPSession/Conversations AJAX Feeling -> Partitial Page Rendering Multi Windows -> Conversations Browserhistory -> Post/Redirect/Get (PRG) Browsernavigation -> bsw. durch JSF-State-Saving und Memory limitiert Failover -> Session Replication ist nicht praktikabel! (Speicher, Kosten, Network Traffic..) Verhindert echtes Webscale! 10
  • 12. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG 3 Tier - so wie es sein soll Business Logic HTML Renderer Controller View Model Server Client Präsentation Controller View Model API Business Logic Server Client 12
  • 13. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG DOM und so in JavaScript: Event Listener Function 1. addEventListener 2. getElementById /backend 3. jQuery.ajax 13
  • 14. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Zur Erinnerung: Der JSF Lifecycle 14
  • 15. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Die Möglichkeiten des Browsers den Zustand zu speichern... Stateless Server aber wohin mit dem State? JS var Cookie local/session Storage BrowserDB HTML5 History API URL Hash (#) 15
  • 16. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Semantic HTML 5 Don’t hide the Web HTML als Inhalts-Beschreibungssprache CSS für das Layout CSS/ Javascript Features variieren zwischen den Browsertypen Aber: Oberfläche sollte in den immer funktional bedienbar sein “Progressive-Enhancement” für “Aufhübschung” von Oberflächen ohne funktionalen Einfluss Gutes HTML hat einen hohen Wert! • Responsive Webdesign • Suchmaschienen • Geringer Datentransfer • Leichte Anpassbarkeit des Layouts Eine gute HTML Struktur ist vergleichbar mit OOD und erfordert Erfahrung • Floting boxes, CSS Classes/ID, DIV, Browserkompatibilität etc Mit HTML Frameworks wie Bootstrap kann man die gröbsten Fehler vermeiden 16
  • 17. 05/16/12 HTML(5) hat alles was man braucht JavaScript für die Oberfächensteuerung DOM Selector API um die View zu manipulieren AJAX für den Zugriff auf Geschäftslogik
  • 19. 05/16/12 Von JavaScript und HTML zu einer wartbaren Frontend-Architektur
  • 20. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Auch einfache Anwendungen erfordern eine Architektur 20
  • 21. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG für einfache Anwendungen Rich Internet Application (RIA) Architecture View (HTML) Controller (JS) Service / Resource Network ‣ Ein großes Javascript... ‣ Eine HTML-Seite bestehend aus “Unter-Seiten” ‣Nicht geeignet für komplexe Anwendungen 21
  • 22. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG erfordern Komponentisierung RIA’s 22
  • 23. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Model View Presenter (MVP) vs. MVC Pattern View Presenter Model ModelView Controller 23 prostuliert durch Google First Class Pattern in GWT Vorteil: Bessere Trennung von UI und Controller-Logik • Dadurch: • Bessere Austauschbarkeit von Model,View und Controller • Bessere Testbarkeit
  • 24. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG erfordert ein Bus System Kommunikation in Rich Internet Applications 24
  • 25. Network 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Mail ChatMenü Lose Kopplung von UI-Komponenten durch Pub/Sub View Presenter Event Bus View Presenter View Presenter Application Controller Service 25
  • 26. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG hierdurch ist Wiederverwendung von Fachlichen UI-Komponenten möglich Komponentisierte Frontend-Architektur 26 KomponenteKomponente Widget Application Controller Dialog Event Bus Sitzung Öffentlicher Service Dialog View Event (sende Richtung) Dependency (Abhängkeit zu) Legende Dialog Komponenten Controller Öffentlicher Service Optionaler Baustein Dialog Presenter View
  • 27. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Gängige Webservice-Protokolle Grundsätzlich HTTP basiert RESTful HTTP • JSON • XML • Feeds - ATOM/RSS • RDF SOAP / WS-* Push Technologien • Comet/Ajax Push • Websocket 27
  • 28. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG und JSON auf dem Vormarsch RESTful HTTP ist führend 28
  • 29. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG REST Principals Give every “thing” an ID Link things together Use standard methods Resources with multiple representations Communicate statelessly 29
  • 30. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Warum REST? Skalierung Fehlertoleranz Wiederherstellbarkeit Sicherheit Lose Kopplung 30
  • 31. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG für lose Kopplung von Severices Hypermedia Inspiriert von Hypertext. Paradigma: folge den Links Schlagwort: HATEOAS (Hypertext As The Enging Of Application State) • Resourcen sind selbst beschreibend • Gibt Auskunft über State und Verhalten Ziel: Applikationen sollten kein Wissen über die semantic von URLs haben (starke Kopplung) 31
  • 32. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Beispiel einer Hypermedia HTTP Response 32 <articles total="1921" xmlns:atom="http://www.w3.org/2005/Atom"> <atom:link rel="self" href="http://www.example.org/articles?contains=cycling&start=10"/> <atom:link rel="prev" href="http://www.example.org/books?contains=cycling"/> <atom:link rel="next" href="http://www.example.org/books?contains=cycling&start=20"/> <article> <atom:link rel="self" href="http://www.nytimes.com/2009/07/15/sports/cycling/15tour.html"/> <title>For Italian, Yellow Jersey Is Fun While It Lasts</title> <body>...</body> </article> <article> <atom:link rel="alternate" href="http://www.nytimes.com/2009/07/27/sports/cycling/27tour.html"/> <title>Contador Wins, but Armstrong Has Other Victory</title> <body>...</body> </article> </articles>
  • 33. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG GUI Rendering am Client Konzept: Stateless Backend • REST • Caching (Client/Server) • einfache und „billige“ Skalierung • durch zusätzliche Hardware • keine (sticky) Sessions ◦ transparent Failover Scaling RESTful Architectures Server Server Client Client 33
  • 34. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Authentication in RESTful Apps Gängige Authentisierung in Severside-Webapps basiert auf HttpSession Auth • Aber: nicht Restful (HTTPSession) Restful Authentisierung erfordert Zustandslosigkeit (Server seitig) Restful Technologien: • Simple per HTTP Basic/Digest Auth • Client Cert Auth • Security Tokens ◦ Eigene Protokolle ◦ OAuth ◦ OpenID 34
  • 35. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG RESTful Authentication mit OAuth Service Provider Service Client 4. erzeuge Access Token 2.AuthentisiererequestToken Token Server (IdP) 1. erzeuge Request Token 5. API Call 3. redirect request Token param 6.checkToken 35
  • 36. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Zusammenfassung Der REST Die klassischen Frameworks wie JSF/Stuts kommen aus einer Zeit (2000-2004) in der AJAX und JavaScript noch keine grosse Rolle gespielt haben Heutige Anforderungen an User Experience lassen sich mit klassischen Technologien nur unter Schmerzen umsetzen Server-Side-Frameworks können mit den Anforderungen umgehen, sind jedoch keinenfalls dafür entwickelt worden Die Komplexität von aufgerüsteten Server-Side-Anwendungen steigt eminent durch den Mix von JavaScript und AJAX Die Architektur des Webs (RESTful) wird bei vielen Server-Side-Anwendungen gebrochen mit Auswirkungen auf Robustheit, Skallierung und User Experience 36