| Seite Migros | SAP CC Entwicklung | BSP

Offene Web-Anwendungen mit BSP

21.6.2012

6.6.2012 1

| Seite Migros | SAP CC Entwicklung | BSP

Business Server Pages (BSP)und Web Dynpro (WD)

Architekturprinzip

18.02.2010 2

| Seite Migros | SAP CC Entwicklung | BSP

3 Tier Anwendungsarchitektur

Applikationslogik

GUI

DB

6.6.2012 3

BenutzeroberflächeMeist eigenständiger Agent (Programm)

RegelnPrüfungenPflege von BelegenFolgeverarbeitung

Datenbank-Layer(*dumm*)

| Seite Migros | SAP CC Entwicklung | BSP

SAP GUI-Anwendung

Applikationslogik

Dynpro

DB

6.6.2012 4

N SAP Frontends (SAPGUI)- Installation auf Client-PCSprache: intern - Black Box

SAPGUI-Protokoll (DIAG)

SAP DBI DB conn. open SQL

N SAP Appl.-ServerSprache: ABAP

Ein RDBMSSprache: SQL

Modellierung: Screen Painter

| Seite Migros | SAP CC Entwicklung | BSP

Web-Anwendung (BSP oder WD)

Applikationslogik

Browser

DB

6.6.2012 5

HTTP-Protokoll

SAP DBI DB conn. Open SQL

N SAP Appl.-ServerSprache: ABAP

Ein RDBMSSprache: SQL

Browser - Universelle User AgentsKeine separate Software nötigSprachen: HTML, CSS, JavaScript

| Seite Migros | SAP CC Entwicklung | BSP

Business Server Pages

Applikationslogik

Browser

DB

6.6.2012 6

HTTP-Protokoll

SAP DBI DB conn. Open SQL

N SAP Appl.-ServerSprache: ABAP

Ein RDBMSSprache: SQL

Browser - Universelle User AgentsKeine separate Software nötigSprachen: HTML, CSS, JavaScript

Entwickler spricht die Sprache des Clients

| Seite Migros | SAP CC Entwicklung | BSP

Web-Dynpro

Applikationslogik

Browser

DB

6.6.2012 7

HTTP-Protokoll

SAP DBI DB conn. Open SQL

N SAP Appl.-ServerSprache: ABAP

Ein RDBMSSprache: SQL

Browser - Universelle User AgentsKeine separate Software nötigSprachen: HTML, CSS, JavaScript

Modellierung WD View

für Entwickler verboten

HTML-, CSS-, JavaScript-

Codegenerierung

durch WD Design- und Runtime

| Seite Migros | SAP CC Entwicklung | BSP

Wie ist BSP realisiert?

18.02.2010 8

| Seite Migros | SAP CC Entwicklung | BSP

BSP := Toolset für Pflege und Erzeugung von HTML, CSS, JavaScript im ABAP Stack

• Eingebaut in die Workbench• View-Klassen, Scripting-Direktiven Verbindung mit ABAP• Keine HTML-Generierung! (Generierungs-Tools scheitern, siehe MS Frontpage)

HTML Editor

• CSS und JavaScript mit externem Text-Editor bearbeitbar

MIME Repositoy

• Saubere Anwendungs-Organisation nach Klassen

MVC

• Wiederverwendbare Custom UI-Elemente• Best Practice: Je System (z.B. Obsonis, T&M, NewMSS) eine passende Tag Library

Tag Library

6.6.2012 9

| Seite Migros | SAP CC Entwicklung | BSP

BSP "Kosten und Nutzen"

21.6.2012 10

| Seite Migros | SAP CC Entwicklung | BSP

BSP Vorteile

• Flexibilität und Offenheit• Geräte-Unabhängigkeit• Clientseitige Validierungen

21.6.2012 11

| Seite Migros | SAP CC Entwicklung | BSP

Flexibilität / Offenheit

• Reiche Auswahl von UI-Elementen• Das ganze Internet als Lösungs-Pool !

• Neue Komponenten & Features können sofort eingesetzt werden• Kein Entwicklungsantrag nach Walldorf, um das Feature XYZ im

Web-Dynpro eingebaut zu bekommen• Reiche Palette an Entwickler-Tools für HTML, CSS, JavaScript

• Code-Validierung, Code-Generierung, Pretty Printer, Editoren, ...• Open Source

• HTML, CSS und JavaScript sind Klartextformate

6.6.2012 12

"BSP is freedom!"Brian McKellar

BSP-Basis-Entwickler in Walldorf

| Seite Migros | SAP CC Entwicklung | BSP

Plattformunabhängigkeit

• Geräteunabhängig• WebApps besser als iApps:

• iApps laufen nicht auf Android, AndroidApps nicht auf iPhone

• WebApps laufen auf allen Geräten mit Browser• Gerätespezifische Layoutangaben sind möglich

• Laufen auf allen standardkonformen Browsern• Sorgenkind MSIE wird von Release zu Release besser

• Windows-Update – Browser-Update – SAP-Update?• Standardkonformes HTML wird nicht beschädigt• Allenfalls kleinere Darstellungsprobleme, aufgrund

unzureichender Browser-Implementierungen (meist IE).

21.6.2012 13

| Seite Migros | SAP CC Entwicklung | BSP

Gegenbeispiel Web Dynpro: SRM-Portal: IE8 -> IE9 UpgradeIm Oktober 2011

21.6.2012 14

| Seite Migros | SAP CC Entwicklung | BSP

Clientseitige Logik

• Um neuen Bildaufbau zu vermeiden:• Anwendungsspezifische Logik in JavaScript• Komplexere Regeln per Ajax-Request einbindbar

• Beispiele • Domänenwertprüfungen (Lieferanten-Nr. etc.)• AutoCompletion-Felder (Eingabehilfe)• Konsistenzprüfungen für mehrere Inputfelder• Detailinformationen

21.6.2012 15

| Seite Migros | SAP CC Entwicklung | BSP

BSP – der Preis

• Für gute Webanwendungen werden gute Webanwendungsentwickler benötigt

18.02.2010 16

| Seite Migros | SAP CC Entwicklung | BSP

BSP – der Preis

• Für gute Webanwendungen werden gute Webanwendungsentwickler benötigt

18.02.2010 17

| Seite Migros | SAP CC Entwicklung | BSP

Gute Webanwendungsentwickler...

• sind keine ABAP-Fachidioten• beherrschen HTML, CSS und JavaScript (selbstverständlich)• haben einen Blick für einheitliches Design• kennen die Schwächen des HTTP-Protokolls

• z.B. Back-Button, Aktualisieren-Button• können mit diesen Schwächen umgehen• können die Stärken von HTTP ausnutzen• sind wie alle guten Entwickler:

• vermeiden Wiederholungen• bemühen sich um ausdrucksstarken, lesbaren, testbaren,

effizienten, => änderbaren Code

6.6.2012 18

| Seite Migros | SAP CC Entwicklung | BSP

Wird BSP irgendwann einmal abgeschaltet?

18.02.2010 19

| Seite Migros | SAP CC Entwicklung | BSP

Die BSP-Technik lässt sich nicht abschalten!

• Solange der HTTP-Port vom SAP NetWeaver (ICF) existiert, sind auch BSP-Anwendungen möglich

• SAP selbst wartet das BSP-Framework weiterhin• Es gibt nur unbedeutende, nicht essentielle

Weiterentwicklungen• BSP ist nur Voraussetzung für das Schreiben von Web Apps• Der Anschluss der HTML/CSS/JavaScript-Welt an ABAP• Es gibt keinen Weiterentwicklungsbedarf für das SAP-BSP-

Framework (ist genau wie mit dem ICF).

6.6.2012 20

| Seite Migros | SAP CC Entwicklung | BSP

Sind BSP strategisch?

18.02.2010 21

| Seite Migros | SAP CC Entwicklung | BSP

Was sind strategische Standards in Web-Anwendungen?

18.02.2010 22

| Seite Migros | SAP CC Entwicklung | BSP

HTML, CSS und JavaScript

• HTML : Logische Dokumentstruktur• Logische Dokumentstruktur,• Inhalte, Graphik• W3C-Standard (orig: CERN 1992)

• CSS : Eigentliche Präsentation• Farbschema, Positionierung, Effekte• W3C-Standard (orig: 1996)

• JavaScript : Präsentationslogik• Ein-/Ausblenden, Austauschen von Bildteilen, Navigation• Clientseitige Prüfungen• ECMA-262 Standard (orig: 1997)• DOM Standard (orig: 1998)

6.6.2012 23

| Seite Migros | SAP CC Entwicklung | BSP

Mehr braucht man nicht für Web-Anwendungen!

• Frameworks oder Abstraktionen, die sich an die Stelle von HTML, CSS und JavaScript setzen wollen, haben sich bislang im Web nie durchgesetzt

• Z.B. Silverlight – von SAP für das BusinessByDesign UI gewählt – wird von Microsoft nicht mehr weiterentwickelt.

• Hypes kommen, Hypes gehen – HTML, CSS, JavaScript sind geblieben!

6.6.2012 24

| Seite Migros | SAP CC Entwicklung | BSP

SAP-Entwicklung als Entwicklungs-Kompetenzträger entscheidet über die jeweils richtige TechnikUnsere Kriterien sind:

• Wenn es Web-Anwendungen sein sollen: • Beispiel: Public Internet• Beispiel: Retail Store

... dann: BSP verwenden

• Bei Anwendern mit SAP-Erfahrung, z.B. CC-Mitarbeitern

... dann: GUI-Anwendung mit Dynpro,

oder WebDynpro-Anwendung (z.B. BRFplus)

21.6.2012 25