In the recent years you may have noticed SAP is adding new softwares to its cloud offerings. SuccessFactors, Hybris, Ariba etc … Which I think is the need of the time, because current business challenges have changed as compared to the earlier decade when infrastructure and computing power was limited.

Now the challenges are geared more towards

1. User interfaces and data access
2. Infrastucture setup.

Simply speaking Users don’t want to be restricted to their desktops but want to use their own smart devices to access their business data and also businesses need to cut down cost by leveraging existing Infrastructure setups ( Amazon WebServices, Microsoft Azure etc ) rather than hosting everything in-house themselves. This was not an option a couple of years ago, but advances in cloud computing is making this very much a reality.

However SAP Customers have already made several years worth of investments in their SAP Implementations.

So would that mean they would need to push all that away and start embracing cloud ?

It might(will) happen eventually — most probably — But for now we need a way to leverage existing data systems and help them communicate with other open technologies.

And here is where the Web Technologies come into picture.

SAP in the recent years has introduced a couple of Web Technologies : SAPUI5, OData, NetWeaver Gateway, FIORI to name a few. However to understand these technologies and to fully appreciate its value we need to understand its operational base, which is the Web.

The Web as you know works on the HTTP Protocol.

So any device or software which needs to be on the web needs to understand this protocol. (Protocol means a set of rules or principles). Which is a good thing in a way because that means atleast certain things can be standardized because imagine if we as humans would not have agreed upon a globally accepted language for communication (which happens to be English whether you like it or not) we would not be able to do progress at such a global scale.

However we ABAPers, for most part, till date have been working on our singular island called SAP which was functioning fully well on its 3 Tier Achitecture. But when we enter the Internet Domain, this basic premise has limitations. Because the web, by nature ( a requirement of HTTP protocol ) is stateless. Hence once a request is sent to the server and a response is received back, the connection to the server is broken.

For the open systems folks – developer who grew up in the Java-ASP-VB-Dot.Net world these things come as a given. But for Abapers this may be a new revelation and hence we may need some time to understand the depth of what statelessness really means.

Just imagine if you would not be allowed to keep variables in memory and would have to reload them each time you called your program. Thats ideally what happens in a javascript code.

So in this blog let me give you a brief walk through of the various Web Technolgies that you might need to work or get familiar with when you start making your transition to SAP Web Technology development.

Knowing these is advantageous, if not absolutely essential, in case you want to build better running applications on SAPUI5 or extend FIORI Apps.

---

HTML :  Hyper Text markup Language – is basically a non programming mark-up language made of tags which any standard web browser can understand and interpret. There are a limited set of tags which can be used to format information. For Example when you want to show something as a Title of a Page with bold, big font you would use the <h1> tag and the data will be shown on the browser in a bold, large font. like this

I am in an H1 Tag

The set of  available tags  in HTML is very limited and simple enough, making it easy to standardize.

Since HTML is a markup language hence you cannot do programming in this language. Its only used to format the data and text on a page.

There are various popular Web Browsers like Internet Explorer (MS), Chrome(Google), FireFox(Mozilla) . Each of these browsers internally has a rendering engine. When a Webpage ( made of HMTL tags ) hits one of these rendering engines – the engine ( program ) interprets the tags and renders the page on the browser.

HTML5 : HTML from its inception has been evolving and currently the 5th version of this language is called HTML5. HTML5 adds to the existing set of HTML tags and includes support to Web Media like videos etc.

 

 

---

CSS : Since there are only a limited set of HTML tags, how would you go about beautifying your text and applying various colors and fonts to your Web Page ? Thats where styles come into play. A style added to an HTML tags tells the Page how to display a particular text, data or information.

For example : A style like this one

<body style=”background-color:lightgrey;”>

would make the background color of this whole page lightgrey.

However it is very cumbersome to add individual styles to each and every element of a Web Page. Therefore the idea of a Cascading Style Sheet – also known as CSS was introduced.

CSS helps keep the styles ( formatting elements ) of a page separate from its actual content.

---

JavaScript : When the Web was first introduced initially, all the Web Pages ( Developed in HTML ) were primarily static. Which means the user could make a call to a web server by typing its address ( URL ) in their browsers and the server would find an appropriate page and send it to the caller as a response. This was fine initially as data speeds were limited. However once the concept of HTML was understood, developers started playing around with making HTML Dynamic. ( The initial concept was developed by Netscape — as part of NetScape Navigator Browser — a browser that no longer exists 🙁 ) called as Dynamic HTML. Later on Microsoft and others extended it and termed it as JavaScript.

JavaScript is a scripting language which is used for client side scripting to add validations to your static webpage. So for example if you enter a wrong email address – like missing out on the @ sign while filling in your email address on a web form, JavaScript may send you an alert prompt telling you your email address is incorrect.  Such validations are called client side because you don’t need to send the data to the server to validate basic format of the email — it could be done on the client browser itself.

---

AJAX : Though with JavaScript you can perform a lot of validations and add dynamic features to a basically static Web Page, however once your page has rendered on a browser, any interaction with the page sends the entire page to the server and reloads it completely. This is time consuming and mostly redundant activity. Let say you only need to refresh a part of the page you would not want to reload the whole page — right.. In that case AJAX helps us to reload only part of the Page or request and receive data even after a Page has loaded or in background. This helps the user continue to work with the Web Page even while some other part of the page is being loaded or refreshed.

You have experienced this functionality many times – when you start typing anything in google’s search box, an AJAX Query runs to give you possible type results as you type in the box. — try it if you haven’t noticed.

---

JQuery : As Javascript became more popular to add dynamic features to a static web page a need was felt to collect similar pieces of Javascript code into a Function Library. For ABAPers this could mean something like a Function Group. So JQuery could be thought to be a Function Group with a large number of independent Function Modules — all built in JavaScript.

In your HTML page you would include a JQuery Library – and then you can use any of the methods or functions included in the library to make your page cool — which means you wont need to write your own Javascript code. JQuery can do it for you. The Library includes a large set of cool user controls and functions to change the controls behavior at run-time based on user interaction.

---

SAPUI5 : UI Development toolkit for HTML5 is another JavaScript Library. This Library is proprietary of SAP and an open source version of this Library is called OPENUI5. Just like JQuery, this Library also has a lot of common JavaScript Functions, but mostly these give a Business-like look and feel to your Web Application. So primarily this Library would be suitable to build Business-like applications such as Purchase Orders, Travel Management Apps etc.

SAP has introduced this library so that developers can quickly build custom Web Applications which can have a similar look and functionality to the original SAP approach.

---

Okay !!!  Finally I realize that this discussion on Web Technologies can go on for a long time.. however I cannot stop it without a mention of FIORI.

---

FIORI : SAP FIORI  is a group of SAP Web Applications which are built using SAPUI5. SAP has delivered a large number of these applications and currently its in version 2.0 and still growing. These Applications are role-based and work on the following principles

• Role-Based
• Adaptive
• Coherent
• Simple
• Delightful

So Ideally you could build a Web Application using SAPUI5 but still it could not be classified as FIORI if it does not follow these design guidelines. Most important of this I think is Role-based meaning one APP for one Role and one Task– unlike in Standard SAP GUI where one Transaction is used to do several task, thus making the transaction difficult to use.

---

So there you have it.. I have tried to layout some of the most important Web Technologies that I think you need to understand in order to make your move to the SAP Web Development Area. Though this is not very detailed blog but it should give you a fair understanding of where each development language fits in. In my future blogs, I plan to extend these ideas with concrete examples.

But I would like to know your view on these technologies ? Have you started exploring them yet ?

If you haven’t started then here are couple of links you can use to explore these concepts

1. For HTML, CSS, JavaScript you could use www.W3Schools.com
2. For JQuery : this one is good https://jquery.com
3. For SAPUI5 — Everything you want you can get at https://sapui5.netweaver.ondemand.com/
4. And Finally you can experience couple of FIORI Apps yourself at https://www.sapfioritrial.com

Go Ahead — Give it a try — see what you find out.

 

---

Couple of interesting Facts :

• The address of worlds first website was info.cern.ch
• The first web page was http://info.cern.ch/hypertext/WWW/TheProject.html
• The first Web Server which hosted this website was running on a NeXT computer at CERN
• NeXT computer was developed by NeXT, Inc which was co-founded by Steve Jobs in 1988 after he resigned from Apple Computers – a company he had co-founded along with Steve Wozniak in 1976