{"id":61099,"date":"2016-02-03T11:19:33","date_gmt":"2016-02-03T10:19:33","guid":{"rendered":"http:\/\/e3mag.com\/?p=61099"},"modified":"2019-07-15T11:27:25","modified_gmt":"2019-07-15T09:27:25","slug":"html5-vs-sapui5","status":"publish","type":"post","link":"https:\/\/e3mag.com\/de\/html5-vs-sapui5\/","title":{"rendered":"HTML5 vs. SAPUI5"},"content":{"rendered":"<p>Es hat lange gedauert, bis auch SAP moderne UI-Technologien auf den Weg gebracht hat. Schwierig ist vor allem die Anpassungsf\u00e4higkeit an individuelle Anforderungen und die wenig intuitive Bedienbarkeit.<\/p>\n<p>Im Rahmen einer Evaluierungsphase f\u00fcr HTML5-UI-Technologien entstand die Idee, einen Artikel \u00fcber Oberfl\u00e4chentechnologien zu schreiben. Vor allem \u00fcber solche, die im SAP-Umfeld typischerweise eingesetzt werden.<\/p><div class=\"great-fullsize-content-de great-entity-placement\" style=\"float: left;\" id=\"great-2632662704\"><div id=\"great-3646653737\" style=\"margin-bottom: 20px;\"><a data-no-instant=\"1\" href=\"https:\/\/www.youtube.com\/watch?v=6Ja0zaCg0ss\" rel=\"noopener\" class=\"a2t-link\" target=\"_blank\" aria-label=\"banner_bdc_2026_1200x150\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150.jpg\" alt=\"\"  srcset=\"https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150.jpg 1200w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-400x50.jpg 400w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-768x96.jpg 768w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-100x13.jpg 100w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-480x60.jpg 480w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-640x80.jpg 640w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-720x90.jpg 720w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-960x120.jpg 960w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-1168x146.jpg 1168w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-18x2.jpg 18w, https:\/\/e3mag.com\/wp-content\/uploads\/2026\/03\/banner_bdc_2026_1200x150-600x75.jpg 600w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" width=\"1200\" height=\"150\"  style=\" max-width: 100%; height: auto;\" \/><\/a><\/div><\/div>\n<p>Das WebDynpro Framework ist mittlerweile bew\u00e4hrt und bietet auch interessante M\u00f6glichkeiten f\u00fcr Eigenentwicklungen. So kann man vordefinierte Templates f\u00fcr Benutzeroberfl\u00e4chen und eine komfortable Entwicklungsumgebung mit einem \u00adWYSIWYG-Editor nutzen.<\/p>\n<p>Wie bei allen geschlossenen Frameworks ist SAP als Hersteller der Rahmengeber und gibt somit die Grenzen strikt vor. Somit wird die gesamte Steuerung der Kommunikation mit dem Backend-System auf dem Server definiert.<\/p>\n<p>Es gibt keine M\u00f6glichkeit f\u00fcr ein individuelles Coding auf der Client-Seite, wie es zum Beispiel bei der Einbindung bestimmter multimedialer Inhalte (z. B. Video) notwendig w\u00e4re.<\/p>\n<p>Andererseits bieten diese Grenzen auch Vorteile, gerade bei Themen, wie Releaseplanung, Support sowie der Datensicherheit und Stabilit\u00e4t. Aufgrund der beschriebenen Begrenzungen geht SAP neue Wege und stellt ein noch relativ neues UI-Framework zur Verf\u00fcgung: SAPUI5!<\/p>\n<p>Bisher ist SAPUI5 haupts\u00e4chlich durch die Fiori-Apps bekannt, aber es handelt sich hierbei um ein offeneres Konzept mit mehr Eingriffsm\u00f6glichkeiten im Vergleich zu WebDynpro.<\/p>\n<h3>SAPUI5<\/h3>\n<p>SAPUI5 ist ebenfalls ein Framework und bietet eine Sammlung von Design- und Steuerungselementen auf Basis von HTML5. Weiter stellt SAP mit SAPUI5 ein Konzept zum Data Binding zur Verf\u00fcgung, wie es bereits in \u00e4hnlicher Form aus WebDynpro bekannt ist.<\/p>\n<p>Damit wird der Datenaustausch zwischen Oberfl\u00e4che und Backendsystemen (mit SAPUI5 lassen sich auch Non-SAP-Systeme anbinden) gew\u00e4hrleistet. Hierzu h\u00e4lt das SAPUI5-Framework eine Form des Model View Controller (MVC) bereit, wodurch geregelt wird, wie die Daten von der Oberfl\u00e4che in die Businesslogik bzw. von der Businesslogik in die Oberfl\u00e4che gelangen.<\/p>\n<p>Mithilfe dieses Prinzips k\u00f6nnen schnell und einfach Oberfl\u00e4chen produziert werden, um erste Vorhaben umzusetzen und Eindr\u00fccke der L\u00f6sung zu vermitteln. Das Framework setzt sich dabei aber nicht nur aus SAP-eigenen Bibliotheken zusammen, sondern bedient sich weiterer Open Source Libraries wie jQuery, Bootstrap, Cordova\/Phonegap.<\/p>\n<p>Aktuell gibt es zwei Auspr\u00e4gungen (auch Kombinationsvarianten genannt): eine f\u00fcr mobile Anwendungszwecke und eine f\u00fcr den Desktop-Bereich.<\/p>\n<p>Ein Unterschied zwischen den beiden Varianten liegt darin, dass die Mobile-Variante aus Performancegr\u00fcnden eine kleinere und auf mobile Anwendungen hin optimierte Bibliothek umfasst.<\/p>\n<p>Durch die leistungsstarken mobilen Endger\u00e4te, die immer besser werdende Netzabdeckung und die h\u00f6heren mobilen Datenraten wird der Unterschied zwischen diesen Variationen vernachl\u00e4ssigbar. Lediglich die Anpassung an unterschiedliche Bildschirmgr\u00f6\u00dfen mithilfe von Responsive Design ist wirklich relevant.<\/p>\n<h3>Frameworks<\/h3>\n<p>Bei SAPUI5 handelt es sich, wie gesagt, um ein Framework. Zur Einordnung wollen wir deshalb kurz auf die Vor- und Nachteile solcher Frameworks eingehen.<\/p>\n<p>Bei einer Eigenentwicklung steht man immer vor der Frage, ob man bereits existierende Frameworks verwendet oder ob alles selbst entwickelt wird. Dazu h\u00f6rt man als Entwickler oft die Aussage:<\/p>\n<p><em>\u201eVerwende doch lieber ein vorhandenes Framework und erfinde nicht immer das Rad neu.\u201c<\/em><\/p>\n<p>Es gibt aus unserer Sicht zwei Indikatoren, die Aufschluss f\u00fcr die Nutzung eines Frameworks geben k\u00f6nnen: erstens der Einsatzzeitraum der L\u00f6sung, zweitens die Flexibilit\u00e4t im Hinblick auf die Anpassbarkeit an neue Anforderungen.<\/p>\n<p>Will man schnell etwas Vorzeigbares erzeugen, k\u00f6nnen Frameworks mit Sicherheit das Mittel der Wahl sein. Will man die L\u00f6sung auch langfristiger einsetzen oder sogar dauerhaft f\u00fcr \u00c4nderungen offenhalten, sind beim Einsatz von Frameworks weitere Ma\u00dfnahmen n\u00f6tig, um deren Nachteile zu mildern.<\/p>\n<p>Grunds\u00e4tzlich sollte man Frameworks oder verwendete Komponenten immer so einbinden, dass sie nicht elementarer Bestandteil der L\u00f6sung sind, um funktionale Abh\u00e4ngigkeiten zu vermeiden.<\/p>\n<p>Dies kann durch eine Softwarearchitektur erreicht werden, die von Fremdkomponenten bestm\u00f6glich abstrahiert, damit diese austauschbar bleiben. Zum Beispiel sollte es in der Ablauflogik keine Rolle spielen, welche Eingabem\u00f6glichkeiten die GUI zur Verf\u00fcgung stellt.<\/p>\n<p>Dies alles f\u00fchrt bei uns zu dem Entschluss, dass wir uns gerne anschauen, wie ein Framework arbeitet, um dann ggf. einzelne Konzepte daraus zu \u00fcbernehmen. Nat\u00fcrlich ist dieses Vorgehen auf den ersten Blick aufw\u00e4ndig, doch f\u00fcr Erweiterungsanforderungen sind dann auch die entsprechenden M\u00f6glichkeiten bekannt und die Anpassungen k\u00f6nnen wesentlich kontrollierter und damit sicherer erfolgen.<\/p>\n<p>Frameworks setzen, wie der Name schon sagt, einen Rahmen, um L\u00f6sungen zu erstellen. Diese Einschr\u00e4nkungen k\u00f6nnen dabei helfen, schnelle Ergebnisse zu produzieren, da ein Framework uns viele Entscheidungen (bewusst oder unbewusst) abnimmt.<\/p>\n<p>Aber wer entscheidet sich im Endeffekt f\u00fcr oder gegen ein Framework? Projektleiter? Entwickler? Die optimale L\u00f6sung w\u00e4re: beide miteinander. Hier bestehen allerdings oft sehr unterschiedliche Meinungen und Interessenlagen:<\/p>\n<p>Risikominimierung gegen Flexibilit\u00e4t, kurzfristige Ergebnisse gegen langfristige Optionsvielfalt.<\/p>\n<p>Nur wenn allen dies in gen\u00fcgender Tiefe bewusst ist, kann auch hier ein bewusster und richtiger Entschluss getroffen werden.<\/p>\n<h3>HTML5<\/h3>\n<p>Im Gegensatz zu den Frameworks (WebDynpro, SAPUI5) ist HTML5 lediglich eine Auszeichnungssprache und stellt die aktuelle Version (gem\u00e4\u00df der W3C-Spezifikation) von HTML (Hypertext Markup Language) dar.<\/p>\n<p>HTML dient an sich zur Beschreibung und zum Verkn\u00fcpfen\/Verbinden von Web\u00adinhalten (wie z. B. Texten, Bildern, Videos) in elektronischer Dokumentenform. Hierzu z\u00e4hlen Webseiten und andere webbasierten L\u00f6sungen mit grafischer Oberfl\u00e4che, die mithilfe von Webbrowsern oder sonstigen Browser-Engines dargestellt werden.<\/p>\n<p>Bei der Entwicklung einer HTML-L\u00f6sung wird in der Regel auf CSS (Cascading Style Sheets) f\u00fcr die Ausgestaltung von \u00adHTML-Dokumenten zur\u00fcckgegriffen. Dies war auch schon in fr\u00fcheren HTML-Versionen der Fall und wird mit der aktuellen HTML-Version weiterverfolgt.<\/p>\n<p>HTML und CSS allein reichen aber noch nicht aus, um den Leistungsumfang von dynamischen und komplexeren HTML5-L\u00f6sungen abzubilden. Dazu wird die weitere Komponente JS (JavaScript) ben\u00f6tigt.<\/p>\n<p>JavaScript ist eine Skriptsprache, mit der Dynamik in HTML-Dokumenten realisiert wird. Da sich die ma\u00dfgeblichen Ziele einer L\u00f6sung aus den fachlichen Anforderungen ergeben, bietet sich HTML5 gerade bei Oberfl\u00e4chen mit einem hohen Ma\u00df an Flexibilit\u00e4t und individueller Gestaltung an.<\/p>\n<h3>Anwendungsszenarien<\/h3>\n<p>Pikon-typische Anwendungsszenarien sehen einen Datenaustausch mit einem Back\u00adend-System (z. B. SAP ERP) vor. In SAP kann hierzu eine HTML5-L\u00f6sung mithilfe einer Business Server Page (BSP) oder auch in Kombination mit einer WebDynpro-Anwendung umgesetzt werden.<\/p>\n<p>Solch eine Anwendung l\u00e4uft nicht ausschlie\u00dflich auf dem SAP-Server ab, sondern in erster Linie auf einem mobilen Client, und es muss ein Weg f\u00fcr die Kommunikation mit SAP gefunden werden.<\/p>\n<p>Den klassischen Weg im Webumfeld stellt daf\u00fcr das Internet Communication Framework (ICF) im SAP NetWeaver dar. Hierbei kann ein Client z.\u00a0B. mithilfe eines ICF-Service Daten zum SAP-Server senden und der SAP-Server entsprechende Daten zur\u00fcckliefern. Diesen Weg erspart uns SAPUI5 mit dem SAP NetWeaver Gateway und oData Services.<\/p>\n<h3>Fazit<\/h3>\n<p>Zusammenfassend kann man sagen, dass eine reine HTML5-Entwicklung mit einer Mischung aus selbst erstellten und bewusst genutzten Fremdkomponenten f\u00fcr uns das Mittel der Wahl ist, auch wenn hier zur Umsetzung einiges an Wissen, Disziplin und Aufwand n\u00f6tig ist.<\/p>\n<p>Aber gerade wenn ein ganzes Entwicklerteam an einer Sache arbeitet, ist es sinnvoll, an der Strukturierung sowie Verst\u00e4ndlichkeit einer L\u00f6sung zu arbeiten, und der Aufwand wird mit jedem \u00c4nderungswunsch, der sp\u00e4ter folgt und umgesetzt wird, lohnender.<\/p>\n<p>Wer also mit den Einschr\u00e4nkungen eines Frameworks nicht leben kann, dem steht mit HTML5 auch im SAP-Umfeld ein durchaus gangbarer Weg zur Verf\u00fcgung.<\/p>\n<p>Insgesamt l\u00e4sst sich die Abw\u00e4gung, ob und welches Framework eingesetzt werden soll, immer nur vor dem Hintergrund der konkreten Anforderung vor allem an die Individualit\u00e4t und die Anpassungsf\u00e4higkeit der Software entscheiden.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nach wie vor beherrschen alt wirkende, blau dominierte Oberfl\u00e4chen die Standard-SAP-Welt. Sie orientieren sich weniger am individuellen Nutzen als vielmehr an der Abbildung von allgemeing\u00fcltigen Prozessen. Aber: SAP Dynpro stirbt \u2013 der Trend geht zu WebDynpro und SAPUI5\/HTML5.<\/p>\n","protected":false},"author":1817,"featured_media":60767,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pmpro_default_level":"","footnotes":""},"categories":[5,1596],"tags":[296,10435,506,5177],"coauthors":[33353,33354],"class_list":["post-61099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-management","category-1596","tag-html5","tag-javascript","tag-open-source","tag-sapui5","pmpro-has-access"],"acf":[],"featured_image_urls_v2":{"full":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"thumbnail":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-150x150.jpg",150,150,true],"medium":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",400,155,false],"medium_large":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-768x297.jpg",768,297,true],"large":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"image-100":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-100x39.jpg",100,39,true],"image-480":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-480x186.jpg",480,186,true],"image-640":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-640x248.jpg",640,248,true],"image-720":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-720x279.jpg",720,279,true],"image-960":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-960x372.jpg",960,372,true],"image-1168":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"image-1440":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"image-1920":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"1536x1536":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"2048x2048":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"trp-custom-language-flag":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",18,7,false],"bricks_large_16x9":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"bricks_large":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"bricks_large_square":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",1000,387,false],"bricks_medium":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",600,232,false],"bricks_medium_square":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016.jpg",600,232,false],"profile_24":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-24x24.jpg",24,24,true],"profile_48":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-48x48.jpg",48,48,true],"profile_96":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-96x96.jpg",96,96,true],"profile_150":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-150x150.jpg",150,150,true],"profile_300":["https:\/\/e3mag.com\/wp-content\/uploads\/2019\/07\/2016-300x300.jpg",300,300,true]},"post_excerpt_stackable_v2":"<p>Nach wie vor beherrschen alt wirkende, blau dominierte Oberfl\u00e4chen die Standard-SAP-Welt. Sie orientieren sich weniger am individuellen Nutzen als vielmehr an der Abbildung von allgemeing\u00fcltigen Prozessen. Aber: SAP Dynpro stirbt \u2013 der Trend geht zu WebDynpro und SAPUI5\/HTML5.<\/p>\n","category_list_v2":"<a href=\"https:\/\/e3mag.com\/de\/category\/it-management\/\" rel=\"category tag\">IT-Management<\/a>, <a href=\"https:\/\/e3mag.com\/de\/category\/1602\/\" rel=\"category tag\">MAG 16-02<\/a>","author_info_v2":{"name":"Dirk Hirschmann, Pikon","url":"https:\/\/e3mag.com\/de\/author\/dirk-hirschmann\/"},"comments_num_v2":"0 comments","_links":{"self":[{"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/posts\/61099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/users\/1817"}],"replies":[{"embeddable":true,"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/comments?post=61099"}],"version-history":[{"count":0,"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/posts\/61099\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/media\/60767"}],"wp:attachment":[{"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/media?parent=61099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/categories?post=61099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/tags?post=61099"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/e3mag.com\/de\/wp-json\/wp\/v2\/coauthors?post=61099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}